条目
@astryxdesign/core v0.7.1 · Item
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | number | — | 这一行的主文字。写字符串或数字时只显示一行;要放别的内容就用 label 插槽。 |
description | string | number | — | 主文字下面那行小字,同样只显示一行。要多行或者放别的内容就用 description 插槽。 |
as | ItemElement(标签名或组件) | '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 把说明和主文字放同一行,空间不够先截断说明,这样这一行能塞进高度固定的容器。 |
labelLines | number | — | 主文字最多显示几行,超过就用省略号。不传时,字符串主文字只显示一行。 |
descriptionLines | number | — | 说明最多显示几行,超过就用省略号。不传时,字符串说明只显示一行。 |
onClick | (event: MouseEvent) => void | — | 点了之后做什么。给了它就渲染一个铺满行内容区的按钮,这一行也就有了按钮语义和悬停、按下样式。模板里写 @click。 |
interactiveRef | MaybeRefOrGetter<HTMLElement | null | undefined> | — | 指向行里那个本来就能操作的控件,比如 startContent 里的复选框。这时整行变成更大的点击区域,点行面就转给那个控件,行自己不再渲染按钮。它和 onClick、href 只能用一个,写了它那两个会被忽略。 |
href | string | — | 链接地址。行里会渲染一个链接元素。如果根元素本身就是链接组件(见 as),地址直接挂在根上,不再多画一个元素。 |
target | '_blank' | '_self' | — | 链接在哪打开,只有写了 href 才有用。_blank 会自动补上 noopener 和 noreferrer。 |
rel | string | — | 链接的 rel 值,会和自动补的那些合在一起。 |
isDisabled | boolean | false | 禁用。这一行不动了,内容变淡。 |
isSelected | boolean | false | 选中状态。行的角色支持时写成 aria-selected="true",不支持时写成 aria-current="true"。 |
isHighlighted | boolean | false | 画出高亮状态,就是键盘聚焦和鼠标悬停时那个样子。 |
swipeActions | ItemSwipeActions | — | 手指横滑能露出哪些操作,左右各一组,越靠后越靠外,每项是 { label, icon?, onActivate, isDisabled?, variant?, hasRemoval? }。鼠标不会触发这次拖动。只有角色允许行内有可交互元素的才行,选项、菜单项、原生单选按钮的放大目标行都不能用。 |
swipeBehavior | 'reveal' | 'commit' | 'reveal' | reveal 松手后行停在滑开的位置,露出来的每项都是真按钮,拖得够远就触发最外面那个;commit 直接把行滑出去,松手就触发,什么都不留在屏幕上。 |
插槽
marker:排在startContent前面,比如列表的圆点或者序号。startContent:前面那块,比如头像、图标、图片、复选框。label:自己画主文字,替掉label属性。description:自己画说明,替掉description属性。endContent:末尾对齐的那块,比如徽章、时间、操作按钮。
暴露
element(根元素)、focus() 和 blur()。聚焦会落到行里那个真正能接焦点的控件上。