Legacy
CoreDot
도트 컴포넌트
Usage
Filled Dot
import { CoreDot } from '@featuring-corp/components';
<CoreDot size="xs" color="black" type="filled" />Border Dot
import { CoreDot } from '@featuring-corp/components';
<CoreDot size="xs" color="black" type="border" />크기 설정
import { CoreDot } from '@featuring-corp/components';
<CoreDot size="xs" color="black" type="filled" />
<CoreDot size="sm" color="black" type="filled" />
<CoreDot size="md" color="black" type="filled" />
<CoreDot size="lg" color="black" type="filled" />색상 설정
import { CoreDot } from '@featuring-corp/components';
<CoreDot size="xs" color="black" type="filled" />
<CoreDot size="xs" color="gray" type="filled" />
<CoreDot size="xs" color="green" type="filled" />
<CoreDot size="xs" color="orange" type="filled" />
<CoreDot size="xs" color="purple" type="filled" />
<CoreDot size="xs" color="red" type="filled" />
<CoreDot size="xs" color="white" type="filled" />Type과 Color 조합
import { CoreDot } from '@featuring-corp/components';
// Filled
<CoreDot size="xs" color="red" type="filled" />
<CoreDot size="xs" color="green" type="filled" />
<CoreDot size="xs" color="orange" type="filled" />
// Border
<CoreDot size="xs" color="red" type="border" />
<CoreDot size="xs" color="green" type="border" />
<CoreDot size="xs" color="orange" type="border" />Props
ComponentPropsWithoutRef<'div'> 타입을 확장한 컴포넌트입니다.
Prop
Type
dotColorType
Prop
Type
dotSizeType
Prop
Type
dotType
Prop
Type
스타일
기본 스타일 속성
border-radius:radius-fullflex:none
Size Variants
xs:width: 6px,height: 6pxsm:width: 8px,height: 8pxmd:width: 10px,height: 10pxlg:width: 14px,height: 14px
Color Variants
black:background-color: gray-90gray:background-color: gray-40green:background-color: green-50orange:background-color: orange-50purple:background-color: primary-60red:background-color: red-50white:background-color: white
Type Variants
filled: 기본 스타일만 적용border:border-color: white,border-style: solid,border-width: 1px