상호작용
상호작용 (Interactivity)
요소의 상호작용을 향상시키는 JSX 스타일 prop을 알려드려요. 커서, 스크롤, 사용자 선택 등 다양한 상호작용을 제어할 수 있어요.
출처: 문서
본문
Accent Color
accentColor prop을 사용해서 브라우저가 생성한 사용자 인터페이스 컨트롤의 엑센트 색상을 설정하세요.
// hardcoded
<label>
<chakra.input type="checkbox" accentColor="#3b82f6" />
</label>
// token value
<label>
<chakra.input type="checkbox" accentColor="blue.500" />
</label>
| Prop | CSS Property | Token Category |
|---|---|---|
accentColor |
accent-color |
colors |
Appearance
appearance prop을 사용해서 요소의 외형을 설정하세요.
<chakra.select appearance="none">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</chakra.select>
| Prop | CSS Property | Token Category |
|---|---|---|
appearance |
appearance |
- |
Caret Color
caretColor prop을 사용해서 input이나 textarea의 텍스트 커서(캐럿) 색상을 설정하세요.
// hardcoded
<chakra.input caretColor="#3b82f6" />
// token value
<chakra.input caretColor="blue.500" />
| Prop | CSS Property | Token Category |
|---|---|---|
caretColor |
caret-color |
colors |
Cursor
cursor prop을 사용해서 마우스 포인터가 요소 위에 있을 때 표시할 마우스 커서 이미지를 설정하세요.
<Box cursor="pointer" />
| Prop | CSS Property | Token Category |
|---|---|---|
cursor |
cursor |
- |
Pointer Events
pointerEvents prop을 사용해서 요소에서 포인터 이벤트가 처리되는 방식을 제어하세요.
<Box pointerEvents="none">Can't click me</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
pointerEvents |
pointer-events |
- |
Resize
resize prop을 사용해서 요소가 크기 조절 가능한지, 가능하다면 어떤 방향으로 조절 가능한지 제어하세요.
<chakra.textarea resize="both" />
<chakra.textarea resize="horizontal" />
<chakra.textarea resize="vertical" />
| Prop | CSS Property | Token Category |
|---|---|---|
resize |
resize |
- |
Scrollbar
scrollbar prop을 사용해서 스크롤바의 외형을 커스터마이징하세요.
<Box scrollbar="hidden" maxH="100px" overflowY="auto">
Scrollbar hidden
</Box>
Scroll Behavior
scrollBehavior prop을 사용해서 탐색이나 JavaScript 코드로 스크롤이 트리거될 때 스크롤 박스의 동작을 설정하세요.
<Box maxH="100px" overflowY="auto" scrollBehavior="smooth">
<div>Scroll me</div>
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
scrollBehavior |
scroll-behavior |
- |
Scroll Margin
scrollMargin* prop을 사용해서 스크롤 컨테이너 주변의 여백을 설정하세요.
<Box maxH="100px" overflowY="auto" scrollMarginY="2">
Scrollbar Container with block padding
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
scrollMarginX ,scrollMarginInline |
scroll-margin-inline |
spacing |
scrollMarginInlineStart |
scroll-margin-inline-start |
spacing |
scrollMarginInlineEnd |
scroll-margin-inline-end |
spacing |
scrollMarginY , scrollMarginBlock |
scroll-margin-block |
spacing |
scrollMarginBlockStart |
scroll-margin-block-start |
spacing |
scrollMarginBlockEnd |
scroll-margin-block-end |
spacing |
scrollMarginLeft |
scroll-margin-left |
spacing |
scrollMarginRight |
scroll-margin-right |
spacing |
scrollMarginTop |
scroll-margin-top |
spacing |
scrollMarginBottom |
scroll-margin-bottom |
spacing |
Scroll Padding
scrollPadding* prop을 사용해서 스크롤 컨테이너 내부의 패딩을 설정하세요.
<Box maxH="100px" overflowY="auto" scrollPaddingY="2">
Scrollbar Container with block padding
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
scrollPaddingX , scrollPaddingInline |
scroll-padding-inline |
spacing |
scrollPaddingInlineStart |
scroll-padding-inline-start |
spacing |
scrollPaddingInlineEnd |
scroll-padding-inline-end |
spacing |
scrollPaddingY , scrollPaddingBlock |
scroll-padding-block |
spacing |
scrollPaddingBlockStart |
scroll-padding-block-start |
spacing |
scrollPaddingBlockEnd |
scroll-padding-block-end |
spacing |
scrollPaddingLeft |
scroll-padding-left |
spacing |
scrollPaddingRight |
scroll-padding-right |
spacing |
scrollPaddingTop |
scroll-padding-top |
spacing |
scrollPaddingBottom |
scroll-padding-bottom |
spacing |
Scroll Snap Margin
scrollSnapMargin* prop을 사용해서 스크롤 컨테이너 주변의 여백을 설정하세요.
<Box maxH="100px" overflowY="auto" scrollSnapMarginY="2">
Scrollbar Container with block padding
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
scrollSnapMargin |
scroll-margin |
spacing |
scrollSnapMarginTop |
scroll-margin-top |
spacing |
scrollSnapMarginBottom |
scroll-margin-bottom |
spacing |
scrollSnapMarginLeft |
scroll-margin-left |
spacing |
scrollSnapMarginRight |
scroll-margin-right |
spacing |
Scroll Snap Type
scrollSnapType prop을 사용해서 스크롤 컨테이너에서 스냅 포인트가 얼마나 엄격하게 적용되는지 제어하세요.
<Box maxH="100px" overflowY="auto" scrollSnapType="x">
Scroll container with x snap type
</Box>
| Value | |
|---|---|
none |
none |
x |
x var(--scroll-snap-strictness) |
y |
y var(--scroll-snap-strictness) |
both |
both var(--scroll-snap-strictness) |
Scroll Snap Strictness
scrollSnapStrictness prop을 사용해서 요소의 스크롤 스냅 엄격성을 설정하세요. 이 기능은 scrollSnapType이 x, y 또는 both로 설정되어 있어야 해요.
값은 mandatory 또는 proximity가 될 수 있으며, var(--scroll-snap-strictness)에 매핑돼요.
<Box maxH="100px" overflowY="auto" scrollSnapStrictness="proximity">
<Box>Item 1</Box>
<Box>Item 2</Box>
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
scrollSnapStrictness |
--scroll-snap-strictness |
- |
Touch Action
touchAction prop을 사용해서 터치스크린 사용자가 요소의 영역을 어떻게 조작할 수 있는지 제어하세요.
<Box touchAction="none" />
| Prop | CSS Property | Token Category |
|---|---|---|
touchAction |
touch-action |
- |
User Select
userSelect prop을 사용해서 사용자가 요소 내 텍스트를 선택할 수 있는지 제어하세요.
<Box userSelect="none">
<p>Can't Select me</p>
</Box>
| Prop | CSS Property | Token Category |
|---|---|---|
userSelect |
user-select |
- |
Will Change
willChange prop을 사용해서 요소의 속성이 어떻게 변할 것으로 예상되는지 브라우저에 힌트를 주세요.
<Box willChange="transform" />
| Prop | CSS Property | Token Category |
|---|---|---|
willChange |
will-change |
- |