Sphinx of black quartz, judge my vow.
import { Text } from "@chakra-ui/react"
const Demo = () => {
return <Text>Sphinx of black quartz, judge my vow.</Text>
}
用法
¥Usage
import { Text } from "@chakra-ui/react"<Text>This is the text component</Text>示例
¥Examples
尺寸
¥Sizes
使用 fontSize 或 textStyle prop 更改文本的大小。
¥Use the fontSize or textStyle prop to change the size of the text.
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
Chakra
import { Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Text textStyle="xs">Chakra</Text>
<Text textStyle="sm">Chakra</Text>
<Text textStyle="md">Chakra</Text>
<Text textStyle="lg">Chakra</Text>
<Text textStyle="xl">Chakra</Text>
<Text textStyle="2xl">Chakra</Text>
<Text textStyle="3xl">Chakra</Text>
<Text textStyle="4xl">Chakra</Text>
<Text textStyle="5xl">Chakra</Text>
<Text textStyle="6xl">Chakra</Text>
<Text textStyle="7xl">Chakra</Text>
</Stack>
)
}
权重
¥Weights
使用 fontWeight 属性更改文本的粗细。
¥Use the fontWeight prop to change the weight of the text.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
import { Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Text fontWeight="light">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="normal">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="medium">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="semibold">Sphinx of black quartz, judge my vow.</Text>
<Text fontWeight="bold">Sphinx of black quartz, judge my vow.</Text>
</Stack>
)
}
截断
¥Truncation
使用 truncate 属性在单行后截断文本。
¥Use the truncate prop to truncate the text after a single line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import { Flex, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Flex maxW="300px">
<Text truncate>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Text>
</Flex>
)
}
线条限制
¥Line Clamp
使用 lineClamp 属性在一定行数后截断文本。
¥Use the lineClamp prop to truncate the text after a certain number of lines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
import { Flex, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Flex maxW="300px">
<Text lineClamp="2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</Text>
</Flex>
)
}
参考
¥Ref
以下是如何访问底层元素引用的示例
¥Here's how to access the underlying element reference
const Demo = () => {
const ref = useRef<HTMLParagraphElement | null>(null)
return <Text ref={ref}>This is the text component</Text>
}