ElementUI浅尝辄止16:Tag 标签

用于标记和选择。

1.如何使用?

由type属性来选择tag的类型,也可以通过color属性来自定义背景色。

标签一
标签二
标签三
标签四
标签五

2.可移除标签

//设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画,如果不想使用,可以设置disable-transitions属性,它接受一个Boolean,true 为关闭。


  {{tag.name}}


3. 动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现


  {{tag}}



+ New Tag



4.不同尺寸

Tag 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。

额外的尺寸:medium、small、mini,通过设置size属性来配置它们。

默认标签
中等标签
小型标签
超小标签

5.不同主题

Tag 组件提供了三个不同的主题:darklight 和 plain

通过设置effect属性来改变主题,默认为 light

Dark {{ item.label }}
Plain {{ item.label }}

 

你可能感兴趣的:(element-ui,elementui,前端)