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