Item 信息项

Hidden Title

基础用法：<SItem title="发起对话" sub-title="与数字员工直接交流" extra="立即进入" clickable />

属性事件插槽简介

基础用法

背景、边框与分割线

扩展区域布局

阴影和 Hover 动画

主题（theme 默认值：default）

切换主题查看同一信息项的样式。基础用法：通过顶部选项切换主题。theme 可选值 default / chenghua / shijingshan / sybz / gulou，默认值 default。

标题与副标题 Tooltip（titleAttrs / subTitleAttrs 默认值 `undefined`，lineClamp 默认值 `1`）

通过 :title-attrs="{ lineClamp: 2, placement: 'bottom-start', effect: 'light' }" 和 :sub-title-attrs="{ lineClamp: 2, showAfter: 300 }" 分别配置标题、副标题的 Tooltip。

API

属性名	说明	类型	可选值	默认值
`title`	标题，截断且溢出时鼠标移入显示完整内容	string / number	-	`undefined`
`subTitle`	副标题，截断且溢出时鼠标移入显示完整内容	string / number	-	`undefined`
`extra`	扩展区域的简单文本	string / number	-	`undefined`
`src`	左侧图片地址	string	-	`''`
`width`	组件宽度，数字按 px 处理	string / number	-	`''`
`height`	组件高度，数字按 px 处理	string / number	-	`''`
`color`	组件文字颜色	string	合法 CSS 颜色	`''`
`size`	预设内边距，也可直接传自定义尺寸	string / number	`small / default / large / CSS 尺寸`	`default`
`padding`	内容内边距，优先级高于 `size`	string / number	-	`undefined`
`gap`	前缀、主内容及标题右侧区域之间的间距	string / number	-	`12`
`contentGap`	标题、副标题、正文及操作项之间的间距	string / number	-	`4`
`align`	前缀与主内容在交叉轴上的对齐方式	string	`start / center / end / stretch`	`center`
`background`	根节点 CSS 背景，支持纯色、线性渐变和径向渐变	string	合法 CSS `background`	`''`
`hoverBackground`	可点击状态的悬停背景；未设置时沿用 `background`	string	合法 CSS `background`	`''`
`border`	显示默认边框或传入完整 CSS border；传 `false` 可关闭边框	boolean / string	`true / false / CSS border`	`true`
`borderRadius`	圆角，数字按 px 处理	string / number	-	`''`
`divider`	是否显示底部分割线	boolean	`true / false`	`false`
`titleAttrs`	标题的 Tooltip 属性；`lineClamp` 默认 `1`，`0` 表示自然展开	`SItemTooltipAttrs`	`s-tooltip` / Element Plus Tooltip 属性	`undefined`
`subTitleAttrs`	副标题的 Tooltip 属性；`lineClamp` 默认 `1`，`0` 表示自然展开	`SItemTooltipAttrs`	`s-tooltip` / Element Plus Tooltip 属性	`undefined`
`extraPlacement`	`extra / actions` 的布局位置	string	`header / side / bottom`	`header`
`extraAlign`	`side` 布局下扩展区域的垂直对齐方式	string	`start / center / end / stretch`	`center`
`styles`	各语义区域的内联样式	`SItemStyles`	见“语义样式区域”	`undefined`
`clickable`	是否显示点击交互，并支持 Enter / Space 键盘触发	boolean	`true / false`	`false`
`disabled`	是否禁用点击	boolean	`true / false`	`false`
`theme`	主题样式	string	`default / chenghua / shijingshan / sybz`	`default`
`shadow`	阴影显示时机	string	`always / never / hover`	`never`
`hoverAnimation`	悬停时是否上移动画	boolean	`true / false`	`false`

语义样式区域

styles 支持 root / row / main / prefix / content / header / title / subTitle / body / extra / actions。其中 root 的优先级高于同名外观属性；extra 在 side / bottom 布局下会覆盖完整的独立区域。

事件

事件名	说明	参数
`click`	点击信息项时触发；`disabled` 时不触发	`(event: MouseEvent)`

插槽

插槽名	说明
`prefix`	左侧图片、图标或头像
`title`	自定义标题
`subTitle`	自定义副标题
`extra`	自定义扩展区域内容
`actions`	自定义扩展区域操作
`default`	标题和副标题下方的扩展内容

说明

padding 优先于 size；数字会转换成像素值，字符串可传 12px 20px 等完整 CSS 内边距。
small / default / large 对应内边距默认值分别为 8px / 16px / 24px。
extraPlacement="side" 时，扩展区域是主内容的兄弟节点，因此设置背景或左边框会覆盖完整高度。
原生 class / style 会继续作用于根节点；复杂定制优先使用 styles，避免依赖组件内部 DOM 层级。
标题和副标题默认显示 1 行，通过 titleAttrs.lineClamp / subTitleAttrs.lineClamp 调整行数，0 表示自然展开。
titleAttrs / subTitleAttrs 可覆盖内置 Tooltip 的 content / placement / width 等配置；使用标题或副标题插槽、或设置 lineClamp: 0 时，仅应用行数配置，其余 Tooltip 属性不生效。

Item 信息项 ​

Hidden Title ​

属性事件插槽简介 ​

基础用法 ​

背景、边框与分割线 ​

扩展区域布局 ​

阴影和 Hover 动画 ​

主题（theme 默认值：default） ​

标题与副标题 Tooltip（titleAttrs / subTitleAttrs 默认值 undefined，lineClamp 默认值 1） ​

API ​

语义样式区域 ​

事件 ​

插槽 ​

说明 ​