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 | 1x 1x 1x 1x 1x | import React, { useState } from "react"; import { Bubble } from "@tencent/tea-component/lib/bubble"; import { Button } from "@tencent/tea-component/lib/button"; import { Input } from "@tencent/tea-component/lib/input"; export default function BubbleTriggerExample() { const [inputText, setInputText] = useState(""); const length = parseInt(inputText, 10); const inputError = Boolean(inputText) && Number.isNaN(length); const content = length ? `面积 S = ${length} x ${length} = ${length * length}` : "请输入边长,计算正方形面积"; return ( <> <section> <Bubble trigger="click" content="我是被点了之后才出现的内容"> <Button>点击出现</Button> </Bubble> </section> <section> <Bubble trigger="focus" content={inputError ? "输入有误,请输入整数" : content} placement="right" error={inputError} > <Input placeholder="聚焦出现" value={inputText} onChange={value => setInputText(value)} /> </Bubble> </section> </> ); } |