Components

引用块

来自其他来源的块级引用。

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Blockquote>
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>

API 参考

该组件基于 blockquote 元素,并支持 常见的边距属性

PropTypeDefault
asChild
boolean
No default value
size
Responsive<enum>
No default value
weight
Responsive<"light" | "regular" | "medium" | "bold">
No default value
color
enum
No default value
highContrast
boolean
No default value
truncate
boolean
No default value
wrap
Responsive<"wrap" | "nowrap" | "pretty" | "balance">
No default value

示例

尺寸

使用 size 属性来控制尺寸。

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Flex direction="column" gap="5">
<Box maxWidth="300px">
<Blockquote size="1">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="350px">
<Blockquote size="2">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="400px">
<Blockquote size="3">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="450px">
<Blockquote size="4">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="500px">
<Blockquote size="5">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="550px">
<Blockquote size="6">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="600px">
<Blockquote size="7">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="650px">
<Blockquote size="8">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
<Box maxWidth="1000px">
<Blockquote size="9">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Box>
</Flex>

字重

使用 weight 属性来设置文本的字重。

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote weight="regular">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote weight="medium">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote weight="bold">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Flex>

颜色

使用 color 属性来指定特定的 颜色

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="indigo">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote color="cyan">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote color="orange">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote color="crimson">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Flex>

高对比度

使用 highContrast 属性来增加与背景的颜色对比度。

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Flex direction="column" gap="3" maxWidth="500px">
<Blockquote color="gray">
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
<Blockquote color="gray" highContrast>
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Flex>

截断

使用 truncate 属性在文本溢出其容器时使用省略号截断文本。

完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
<Flex maxWidth="500px">
<Blockquote truncate>
完美的排版无疑是所有艺术中最难捉摸的。只有石雕在固执上接近它。
</Blockquote>
</Flex>
下一篇代码 Code