ivyDesign

Appearance

Tag 标签 ​

常规用法 ​

默认显示的样式

defaultprimarysuccesswarningdangerinfo

theme ​

通过theme属性来设置主题,一共有三种plain、dark、default,其中default是默认的不用写

default：

primarysuccesswarning#F56C6Cinfo

dark：

primarysuccesswarningdangerinfo
html
default：
<ivy-tag type="primary">primary</ivy-tag>
<ivy-tag type="success">success</ivy-tag>
<ivy-tag type="warning">warning</ivy-tag>
<ivy-tag type="danger">#F56C6C</ivy-tag>
<ivy-tag type="info">info</ivy-tag>

dark：
<ivy-tag theme="dark" type="primary">primary</ivy-tag>
<ivy-tag theme="dark" type="success">success</ivy-tag>
<ivy-tag theme="dark" type="warning">warning</ivy-tag>
<ivy-tag theme="dark" type="danger">danger</ivy-tag>
<ivy-tag theme="dark" type="info">info</ivy-tag>

Size 大小 ​

通过size属性来设置主题,一共有四种mini、default、medium、large,其中default是默认的不用写

smallmediumdefaultmini
html
<ivy-tag>default</ivy-tag>
<ivy-tag size="medium">medium</ivy-tag>
<ivy-tag size="small">small</ivy-tag>
<ivy-tag size="mini">mini</ivy-tag>

自定义颜色 ​

通过 css 变量可以自定义颜色

#008000
html
<ivy-tag
  style="--ivy-tag-color: #008000;--ivy-tag-border-color: red; --ivy-tag-bg-color: white;"
  >#008000</ivy-tag
>

可用的 CSS 变量 ​

点击打开
css
:host {
  --ivy-tag-color: var(--ivy-color-primary, #409eff);
  --ivy-tag-border-color: var(--ivy-color-primary-light-8, #d9ecff);
  --ivy-tag-bg-color: var(--ivy-color-primary-light-9, #ecf5ff);
}

props ​

属性名说明可选值默认值
type类型primary/success/warning/danger/infoprimary
theme主题plain/dark-
size大小mini/small/medium/largesmall