Paper

Paper은 배경색을 설정하거나 테두리 색상이나 둥글기를 설정하는 등의 용도로 사용할 수 있는 컴포넌트입니다.

Paper

<Paper width={200} height={200} backgroundColor="primary" rounded="sm" />

<Paper
  width={200}
  height={200}
  backgroundColor="primary"
  rounded="sm"
/>

Loading...

How to use

import { Paper } from '@vibrant-ui/components';

Properties

DisplaySystemProps, SpacingSystemProps, InteractionSystemProps, PositionSystemProps, Pick< FlexboxSystemProps, 'flexBasis' | 'flexGrow' | 'flexShrink'>, Pick< ElevationSystemProps, 'elevationLevel'>, OverflowSystemProps, SizingSystemProps, Pick< BorderSystemProps, 'borderBottomLeftRadiusLevel' | 'borderBottomRightRadiusLevel' | 'borderTopLeftRadiusLevel' | 'borderTopRightRadiusLevel' | 'roundedBottomLeftProp' | 'roundedBottomRightProp' | 'roundedTopLeftProp' | 'roundedTopRightProp'>, Pick< BackgroundSystemProps, 'backgroundColor' | 'gradient' >

Prop	Type	Default	Description
id	string
as	string		렌더될 요소를 지정합니다.
children	ReactElementChild

Usage

Border

borderWidth, borderStyle, borderColor속성을 통해 테두리의 두께, 스타일, 색상을 지정할 수 있습니다.

<Paper m={20} width={200} height={200} borderWidth={1} borderColor="outline1" borderStyle="solid" />

<Paper
  m={20}
  width={200}
  height={200}
  borderWidth={1}
  borderColor="outline1"
  borderStyle="solid"
/>

Loading...

Border Radius

roundedBottomLeft, roundedBottomRight, roundedTopLeft , roundedTopRight 또는 rounded 속성을 통해 theme에 정의된 테두리 경계의 꼭짓점을 둥글기를 설정합니다.

<Paper roundedTopLeft="sm" roundedTopRight="md" roundedBottomLeft="xl" roundedBottomRight="xxl" width={200} height={200} backgroundColor="informative" p={10} top={0} />

<Paper
  roundedTopLeft="sm"
  roundedTopRight="md"
  roundedBottomLeft="xl"
  roundedBottomRight="xxl"
  width={200}
  height={200}
  backgroundColor="informative"
  p={10}
  top={0}
/>

Loading...

Gradient

gradient 속성을 통해 theme에 정의된 그라데이션을 사용할 수 있습니다.

<Paper width="100%" height={300} backgroundColor="inverseSurface" > <Paper width="100%" height={200} gradient="linearTop" /> </Paper>

<Paper
  width="100%"
  height={300}
  backgroundColor="inverseSurface"
>
  <Paper width="100%" height={200} gradient="linearTop" />
</Paper>

Loading...

Elevation

elevationLevel 속성을 통해 theme에 정의된 테두리를 감싸는 그림자 효과를 사용할 수 있습니다.

<HStack m={50} spacing={50}> <Paper width={100} height={100} backgroundColor="background" elevationLevel={1} /> <Paper width={100} height={100} backgroundColor="background" elevationLevel={2} /> <Paper width={100} height={100} backgroundColor="background" elevationLevel={3} /> <Paper width={100} height={100} backgroundColor="background" elevationLevel={4} /> </HStack>

<HStack m={50} spacing={50}>
  <Paper
    width={100}
    height={100}
    backgroundColor="background"
    elevationLevel={1}
  />
  <Paper
    width={100}
    height={100}
    backgroundColor="background"
    elevationLevel={2}
  />
  <Paper
    width={100}
    height={100}
    backgroundColor="background"
    elevationLevel={3}
  />
  <Paper
    width={100}
    height={100}
    backgroundColor="background"
    elevationLevel={4}
  />
</HStack>

Loading...