使用原生功能自定义样式的可滚动区域。
排版的三个基本方面是易读性、可读性和美观性。虽然在非技术意义上，“易读”和“可读”经常被同义使用，但在排版上，它们是独立但相关的概念。
易读性描述了单个字符彼此之间区分的容易程度。Walter Tracy 将其描述为“可辨认和可识别的质量”。例如，如果“b”和“h”或“3”和“8”在小尺寸下难以区分，这就是易读性问题。
排版师关注易读性，因为他们的工作是选择要使用的正确字体。“Brush Script”字体就是一个例子，其中包含许多可能难以区分的字符。大小写选择会影响排版的易读性，因为仅使用大写字母（全部大写）会降低易读性。
<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
<Box p="2" pr="8">
<Heading size="4" mb="2" trim="start">
Principles of the typographic craft
</Heading>
<Flex direction="column" gap="4">
<Text as="p">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense “legible” and “readable”
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text as="p">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as “the
quality of being decipherable and recognisable”. For instance, if a “b”
and an “h”, or a “3” and an “8”, are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
<Text as="p">
Typographers are concerned with legibility insofar as it is their job to
select the correct font to use. Brush Script is an example of a font
containing many characters that might be difficult to distinguish. The
selection of cases influences the legibility of typography because using
only uppercase letters (all-caps) reduces legibility.
</Text>
</Flex>
</Box>
</ScrollArea>
此组件继承自 ScrollArea primitive 的 props Root 和 Viewport 部分。它支持通用 margin props。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | boolean | 无默认值 |
size | Responsive<"1" | "2" | "3"> | "1" |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
scrollbars | "vertical" | "horizontal" | "both" | "both" |
使用 size 属性来控制滚动条滑块的大小。
<Flex direction="column" gap="2">
<ScrollArea
size="1"
type="always"
scrollbars="horizontal"
style={{ width: 300, height: 12 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
<ScrollArea
size="2"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 16 }}
>
<Box width="900px" height="1px" />
</ScrollArea>
<ScrollArea
size="3"
type="always"
scrollbars="horizontal"
style={{ width: 400, height: 20 }}
>
<Box width="1000px" height="1px" />
</ScrollArea>
</Flex>
使用 radius 属性为滑块指定特定的圆角。
<Flex direction="column" gap="3">
<ScrollArea
radius="none"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 20 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
<ScrollArea
radius="full"
type="always"
scrollbars="horizontal"
style={{ width: 350, height: 20 }}
>
<Box width="800px" height="1px" />
</ScrollArea>
</Flex>
使用 scrollbars 属性来限制可滚动的轴。
<Grid columns="2" gap="2">
<ScrollArea type="always" scrollbars="vertical" style={{ height: 150 }}>
<Flex p="2" pr="8" direction="column" gap="4">
<Text size="2" trim="both">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense "legible" and "readable"
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text size="2" trim="both">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as "the
quality of being decipherable and recognisable". For instance, if a "b"
and an "h", or a "3" and an "8", are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
</Flex>
</ScrollArea>
<ScrollArea type="always" scrollbars="horizontal" style={{ height: 150 }}>
<Flex gap="4" p="2" width="700px">
<Text size="2" trim="both">
Three fundamental aspects of typography are legibility, readability, and
aesthetics. Although in a non-technical sense "legible" and "readable"
are often used synonymously, typographically they are separate but
related concepts.
</Text>
<Text size="2" trim="both">
Legibility describes how easily individual characters can be
distinguished from one another. It is described by Walter Tracy as "the
quality of being decipherable and recognisable". For instance, if a "b"
and an "h", or a "3" and an "8", are difficult to distinguish at small
sizes, this is a problem of legibility.
</Text>
</Flex>
</ScrollArea>
</Flex>