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 | 1x 1x 1x 6x 1x 6x | import React, { useState } from "react"; import { Text } from "@tencent/tea-component/lib/text"; import { Select } from "@tencent/tea-component/lib/select"; /** * @type {('baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom')[]} */ const aligns = [ "baseline", "top", "middle", "bottom", "text-top", "text-bottom", ]; export default () => { /** * @type {[any, any]} */ const [compare, setCompare] = useState("baseline"); const select = ( <Select style={{ fontSize: "18px" }} type="simulate" options={aligns.map(align => ({ value: align }))} value={compare} onChange={compare => setCompare(compare)} /> ); return ( <> {aligns.map(align => ( <p key={align} style={{ fontSize: "24px", fontFamily: "monospace" }}> <Text verticalAlign={compare} bgTheme="warning"> {compare}{" "} </Text> <Text verticalAlign={align} bgTheme="success"> {align} </Text> </p> ))} <hr /> <section> <Text verticalAlign="middle">参照:</Text> {select} </section> </> ); }; |