Skip to content

列表项

@astryxdesign/core v0.7.1 · ListItem

属性 ​

属性类型默认值说明
labelstring | number—这一行的主文字。写字符串或数字时只显示一行,超出用省略号;要放别的内容就用 label 插槽。
descriptionstring | number—主文字下面那行小字,同样只显示一行。要多行或者放别的内容就用 description 插槽。
densityItemDensity('compact' | 'balanced' | 'spacious')继承外面列表的值盖掉外层 List 的疏密。不在列表里时默认是 'balanced'。
onClick(event: MouseEvent) => void—点了之后做什么。给了它就渲染一个铺满行内容区的按钮,悬停和按下的样式也跟着有。模板里写 @click。
interactiveRefMaybeRefOrGetter<HTMLElement | null | undefined>—指向行里那个本来就能操作的控件,比如 startContent 里的复选框。这时整行变成更大的点击区域,点行面就转给那个控件,行自己不再渲染按钮,也就不会多一个 Tab 停留点。它和 onClick、href 只能用一个,写了它那两个会被忽略。
hrefstring—链接地址。行里会渲染一个链接元素。
target'_blank' | '_self'—链接在哪打开,只有写了 href 才有用。_blank 会自动补上 noopener 和 noreferrer。
relstring—链接的 rel 值,会和自动补的那些合在一起。
isDisabledbooleanfalse禁用。这一行不动了,内容变淡,同时写上 aria-disabled="true"。
isSelectedbooleanfalse选中状态。行的角色支持时写成 aria-selected="true",不支持时写成 aria-current="true"。你自己传的 aria-current 优先。
swipeActionsItemSwipeActions—手指横滑能露出哪些操作,左右各一组,每项是 { label, icon?, onActivate, isDisabled?, variant?, hasRemoval? }。鼠标不会触发这次拖动。每个操作都要在行里再有个入口,否则键盘和鼠标用户够不着。
swipeBehavior'reveal' | 'commit''reveal'reveal 松手后行停在滑开的位置,拖得够远就触发最外面那个操作;commit 直接把行滑出去,松手就触发,什么都不留在屏幕上。

插槽 ​

  • startContent:名字前面,比如图标或头像。
  • label:自己画主文字,替掉 label 属性。
  • description:自己画说明,替掉 description 属性。
  • endContent:名字后面,比如徽章、数量、时间。

暴露 ​

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