ivyDesign

Appearance

Detail 详情 ​

增强原生 details 元素

常规用法 ​

十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
html
<ivy-details>
  十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
</ivy-details>

设置标题 ​

通过设置 summary 属性来设置标题

十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
html
<ivy-details summary="浣溪沙">
  十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
</ivy-details>

不显示动画 ​

通过设置 remove-transition 为 true 来移除动画效果

十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
html
<ivy-details summary="浣溪沙" remove-transition>
  十八年来坠世间，吹花嚼蕊弄冰弦，多情情寄阿谁边？紫玉钗斜灯影背，红绵粉冷枕函边。相看好处却无言。
</ivy-details>

可用的 CSS 变量 ​

通过暴露的 CSS 变量可以修改其 ivy-details 的样式

点击代开
css
:host {
  --ivy-details-border-radius: 8px;
  --ivy-background-color: #f7f7f7;
  --ivy-details-summary-color: #666;
  --ivy-details-color: #515a6e;
  --ivy-details-font-size: 13px;
  --ivy-details-summary-font-size: 14px;
}

Props ​

Prop描述类型可选值默认值
summary标题string-详细信息
remove-transition移除动画boolean--