Scroll Area

Scroll Area

네이티브 기능을 사용해 스타일을 입힌 스크롤 가능한 영역이에요.

출처: 문서

본문

Radix Themes가 제공하는 스타일을 입힌 커스텀 스크롤바 영역이에요. 콘텐츠가 넘칠 때 세로 또는 가로로 스크롤할 수 있어요.

<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의 Root, Viewport 파트의 props를 상속받아요. 공통 margin props도 지원해요.

예시 (Examples)

Size

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

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

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>

더 알아보기 (Learn more)

• 스크롤바를 항상(always) 표시하거나 마우스를 올렸을 때만(hover) 표시하도록 type으로 조절할 수 있어요.