Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 2x 2x 2x | import React from "react";
import { SelectMultiple } from "@tencent/tea-component/lib/select";
import { Form } from "@tencent/tea-component/lib/form";
import { Tag } from "@tea/component/tag";
import { Tooltip } from "@tea/component/tooltip";
export default function MultiSelectExample() {
return (
<Form>
<Form.Item label="看电影吃什么">
<SelectMultiple
options={[
{ value: "gz", text: "瓜子", tooltip: "百煮入味香" },
{
value: "hs",
text: "花生",
tooltip: "花生已售罄",
},
{ value: "bmf", text: "爆米花", tooltip: "焦糖味" },
{ value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
{ value: "pj", text: "啤酒" },
{ value: "kqs", text: "矿泉水" },
{ value: "bbz", text: "八宝粥" },
]}
allOption={{
value: "all",
text: "我都要",
tooltip: "胖子是没有前途的",
}}
/>
</Form.Item>
<Form.Item label="看完电影吃什么">
<SelectMultiple
staging={false}
appearance="button"
defaultValue={["gz"]}
options={[
{ value: "gz", text: "瓜子", tooltip: "百煮入味香" },
{
value: "hs",
text: "花生",
disabled: true,
tooltip: "花生已售罄",
},
{ value: "bmf", text: "爆米花", tooltip: "焦糖味" },
{ value: "kl", text: "可乐", tooltip: "肥宅快乐水" },
{ value: "pj", text: "啤酒" },
{ value: "kqs", text: "矿泉水" },
{ value: "bbz", text: "八宝粥" },
]}
button={options =>
options.length ? (
<Tooltip title={options.map(o => o.text).join(", ")}>
<div>
<Tag.Group>
{options.map(o => (
<Tag key={o.value}>{o.text}</Tag>
))}
</Tag.Group>
</div>
</Tooltip>
) : (
"请选择"
)
}
/>
</Form.Item>
</Form>
);
}
|