Skip to content

条目

@astryxdesign/core v0.7.1 · Item

属性 ​

属性类型默认值说明
labelstring | number—这一行的主文字。写字符串或数字时只显示一行;要放别的内容就用 label 插槽。
descriptionstring | number—主文字下面那行小字,同样只显示一行。要多行或者放别的内容就用 description 插槽。
asItemElement(标签名或组件)'div'根元素渲染成什么。只有在这一行自带 role、键盘交给父级管、并且行里不会多出一个 Tab 停留点时,才传组件;另外 startContent 和 endContent 里也不能放控件。
align'center' | 'start''center'前面和后面那两块内容竖直方向怎么对齐。
density'compact' | 'balanced' | 'spacious''balanced'疏密。compact 上下各 4px,balanced 8px,spacious 上下左右各 12px。
layout'stacked' | 'inline''stacked'stacked 让说明单独占一行。inline 把说明和主文字放同一行,空间不够先截断说明,这样这一行能塞进高度固定的容器。
labelLinesnumber—主文字最多显示几行,超过就用省略号。不传时,字符串主文字只显示一行。
descriptionLinesnumber—说明最多显示几行,超过就用省略号。不传时,字符串说明只显示一行。
onClick(event: MouseEvent) => void—点了之后做什么。给了它就渲染一个铺满行内容区的按钮,这一行也就有了按钮语义和悬停、按下样式。模板里写 @click。
interactiveRefMaybeRefOrGetter<HTMLElement | null | undefined>—指向行里那个本来就能操作的控件,比如 startContent 里的复选框。这时整行变成更大的点击区域,点行面就转给那个控件,行自己不再渲染按钮。它和 onClick、href 只能用一个,写了它那两个会被忽略。
hrefstring—链接地址。行里会渲染一个链接元素。如果根元素本身就是链接组件(见 as),地址直接挂在根上,不再多画一个元素。
target'_blank' | '_self'—链接在哪打开,只有写了 href 才有用。_blank 会自动补上 noopener 和 noreferrer。
relstring—链接的 rel 值,会和自动补的那些合在一起。
isDisabledbooleanfalse禁用。这一行不动了,内容变淡。
isSelectedbooleanfalse选中状态。行的角色支持时写成 aria-selected="true",不支持时写成 aria-current="true"。
isHighlightedbooleanfalse画出高亮状态,就是键盘聚焦和鼠标悬停时那个样子。
swipeActionsItemSwipeActions—手指横滑能露出哪些操作,左右各一组,越靠后越靠外,每项是 { label, icon?, onActivate, isDisabled?, variant?, hasRemoval? }。鼠标不会触发这次拖动。只有角色允许行内有可交互元素的才行,选项、菜单项、原生单选按钮的放大目标行都不能用。
swipeBehavior'reveal' | 'commit''reveal'reveal 松手后行停在滑开的位置,露出来的每项都是真按钮,拖得够远就触发最外面那个;commit 直接把行滑出去,松手就触发,什么都不留在屏幕上。

插槽 ​

  • marker:排在 startContent 前面,比如列表的圆点或者序号。
  • startContent:前面那块,比如头像、图标、图片、复选框。
  • label:自己画主文字,替掉 label 属性。
  • description:自己画说明,替掉 description 属性。
  • endContent:末尾对齐的那块,比如徽章、时间、操作按钮。

暴露 ​

element(根元素)、focus() 和 blur()。聚焦会落到行里那个真正能接焦点的控件上。