Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

滚动区域

使用原生功能自定义样式的可滚动区域。

View sourceReport an issueView in Playground

Principles of the typographic craft

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.

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.

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.

<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>

API 参考

¥API Reference

此组件继承了 ScrollArea 基础组件 根 和 视口 部件的属性。支持 常用边距属性。

¥This component inherits props from the ScrollArea primitive Root and Viewport parts. It supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"1"
radius
"none" | "small" | "medium" | "large" | "full"
No default value
scrollbars
"vertical" | "horizontal" | "both"
"both"

示例

¥Examples

尺寸

¥Size

使用 size 属性控制滚动条句柄的大小。

¥Use the size prop to control the size of the scrollbar handles.

<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

使用 radius 属性为句柄指定特定的圆角。

¥Use the radius prop to assign a specific radius to the handles.

<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

使用 scrollbars 属性限制可滚动轴。

¥Use the scrollbars prop to limit scrollable axes.

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.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.
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.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.
<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>
Previous单选按钮卡片
Next分段控件