使用原生功能定制滚动区域的样式。
排版的三大基本要素是可读性、易读性和美观性。虽然在非技术意义上，“可读”和“易读”通常可以互换使用，但在排版上它们是相互关联但不同的概念。
可读性是指单个字符彼此之间区分的难易程度。沃尔特·特雷西将其描述为“可辨认和可识别的质量”。例如，如果“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 原生 Root 和 Viewport 部分的 props。它支持 常见的边距 props。
| Prop | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | 响应式<"1" | "2" | "3"> | "1" |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
scrollbars | "vertical" | "horizontal" | "both" | "both" |
使用 size prop 来控制滚动条手柄的尺寸。
<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 prop 为手柄分配特定的圆角。
<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 prop 来限制可滚动轴。
<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>