Skip to Content
文档

交互性

用于增强元素交互性的 JSX 样式属性

强调色

¥Accent Color

使用 accentColor 属性设置浏览器生成的用户界面控件的强调色。

¥Use the accentColor prop to set the accent color for browser generated user-interface controls.

// hardcoded
<label>
  <chakra.input type="checkbox" accentColor="#3b82f6" />
</label>

// token value
<label>
  <chakra.input type="checkbox" accentColor="blue.500" />
</label>
属性CSS 属性标记类别
accentColoraccent-colorcolors

外观

¥Appearance

使用 appearance 属性设置元素的外观。

¥Use the appearance prop to set the appearance of an element.

<chakra.select appearance="none">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</chakra.select>
属性CSS 属性标记类别
appearanceappearance*

插入符号颜色

¥Caret Color

使用 caretColor 属性设置输入框或文本区域中文本光标（插入符号）的颜色。

¥Use the caretColor prop to set the color of the text cursor (caret) in an input or textarea

// hardcoded
<chakra.input caretColor="#3b82f6" />

// token value
<chakra.input caretColor="blue.500" />
属性CSS 属性标记类别
caretColorcaret-colorcolors

光标

¥Cursor

使用 cursor 属性设置鼠标指针悬停在元素上时显示的鼠标光标图片。

¥Use the cursor prop to set the mouse cursor image to show when the mouse pointer is over an element.

<Box cursor="pointer" />
属性CSS 属性标记类别
cursorcursor*

指针事件

¥Pointer Events

使用 pointerEvents 属性控制如何处理元素上的指针事件。

¥Use the pointerEvents prop to control how pointer events are handled on an element.

<Box pointerEvents="none">Can't click me</Box>
属性CSS 属性标记类别
pointerEventspointer-events*

调整大小

¥Resize

使用 resize 属性控制元素是否可以调整大小，如果可以，则控制调整方向。

¥Use the resize prop to control whether an element is resizable, and if so, in which directions.

<chakra.textarea resize="both" />
<chakra.textarea resize="horizontal" />
<chakra.textarea resize="vertical" />
属性CSS 属性标记类别
resizeresize*

滚动条

¥Scrollbar

使用 scrollbar 属性自定义滚动条的外观。

¥Use the scrollbar prop to customize the appearance of scrollbars.

<Box scrollbar="hidden" maxH="100px" overflowY="auto">
  Scrollbar hidden
</Box>

滚动行为

¥Scroll Behavior

使用 scrollBehavior 属性设置导航或 JavaScript 代码触发滚动时滚动框的行为。

¥Use the scrollBehavior prop to set the behavior for a scrolling box when scrolling is triggered by the navigation or JavaScript code.

<Box maxH="100px" overflowY="auto" scrollBehavior="smooth">
  <div>Scroll me</div>
</Box>
属性CSS 属性标记类别
scrollBehaviorscroll-behavior*

滚动边距

¥Scroll Margin

使用 scrollMargin* 属性设置滚动容器周围的边距。

¥Use the scrollMargin* prop to set margins around scroll containers.

<Box maxH="100px" overflowY="auto" scrollMarginY="2">
  Scrollbar Container with block padding
</Box>
属性CSS 属性标记类别
scrollMarginX ,scrollMarginInlinescroll-margin-inlinespacing
scrollMarginInlineStartscroll-margin-inline-startspacing
scrollMarginInlineEndscroll-margin-inline-endspacing
scrollMarginY , scrollMarginBlockscroll-margin-blockspacing
scrollMarginBlockStartscroll-margin-block-startspacing
scrollMarginBlockEndscroll-margin-block-endspacing
scrollMarginLeftscroll-margin-leftspacing
scrollMarginRightscroll-margin-rightspacing
scrollMarginTopscroll-margin-topspacing
scrollMarginBottomscroll-margin-bottomspacing

滚动填充

¥Scroll Padding

使用 scrollPadding* 属性设置滚动容器内的内边距。

¥Use the scrollPadding* prop to set padding inside scroll containers.

<Box maxH="100px" overflowY="auto" scrollPaddingY="2">
  Scrollbar Container with block padding
</Box>
属性CSS 属性标记类别
scrollPaddingX , scrollPaddingInlinescroll-padding-inlinespacing
scrollPaddingInlineStartscroll-padding-inline-startspacing
scrollPaddingInlineEndscroll-padding-inline-endspacing
scrollPaddingY , scrollPaddingBlockscroll-padding-blockspacing
scrollPaddingBlockStartscroll-padding-block-startspacing
scrollPaddingBlockEndscroll-padding-block-endspacing
scrollPaddingLeftscroll-padding-leftspacing
scrollPaddingRightscroll-padding-rightspacing
scrollPaddingTopscroll-padding-topspacing
scrollPaddingBottomscroll-padding-bottomspacing

滚动捕捉边距

¥Scroll Snap Margin

使用 scrollSnapMargin* 属性设置滚动容器周围的边距。

¥Use the scrollSnapMargin* prop to set margins around scroll containers.

<Box maxH="100px" overflowY="auto" scrollSnapMarginY="2">
  Scrollbar Container with block padding
</Box>
属性CSS 属性标记类别
scrollSnapMarginscroll-marginspacing
scrollSnapMarginTopscroll-margin-topspacing
scrollSnapMarginBottomscroll-margin-bottomspacing
scrollSnapMarginLeftscroll-margin-leftspacing
scrollSnapMarginRightscroll-margin-rightspacing

滚动捕捉类型

¥Scroll Snap Type

使用 scrollSnapType 属性控制在滚动容器中强制执行捕捉点的严格程度。

¥Use the scrollSnapType prop to control how strictly snap points are enforced in a scroll container.

<Box maxH="100px" overflowY="auto" scrollSnapType="x">
  Scroll container with x snap type
</Box>
值
nonenone
xx var(--scroll-snap-strictness)
yy var(--scroll-snap-strictness)
bothboth var(--scroll-snap-strictness)

滚动捕捉严格度

¥Scroll Snap Strictness

使用 scrollSnapStrictness 属性设置元素的滚动捕捉严格性。这需要将 scrollSnapType 设置为 x、y 或 both。

¥Use the scrollSnapStrictness prop to set the scroll snap strictness of an element. This requires scrollSnapType to be set to x,y or both.

它的值可以是 mandatory 或 proximity 的值，并映射到 var(--scroll-snap-strictness)。

¥It's values can be mandatory or proximity values, and maps to var(--scroll-snap-strictness).

<Box maxH="100px" overflowY="auto" scrollSnapStrictness="proximity">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>
属性CSS 属性标记类别
scrollSnapStrictness--scroll-snap-strictness*

触摸操作

¥Touch Action

使用 touchAction 属性控制触摸屏用户如何操作元素区域。

¥Use the touchAction prop to control how an element's region can be manipulated by a touchscreen user

<Box touchAction="none" />
属性CSS 属性标记类别
touchActiontouch-action*

用户选择

¥User Select

使用 userSelect 属性控制用户是否可以选择元素内的文本。

¥Use the userSelect prop to control whether the user can select text within an element.

<Box userSelect="none">
  <p>Can't Select me</p>
</Box>
属性CSS 属性标记类别
userSelectuser-select*

将会改变

¥Will Change

使用 willChange 属性提示浏览器元素属性的预期变化方式。

¥Use the willChange prop to hint browsers how an element's property is expected to change.

<Box willChange="transform" />
属性CSS 属性标记类别
willChangewill-change*

Previous

弹性和网格

Next

布局