广州市天河区天河路621号天娱广场西塔10楼
EAIC界面库
颜色
类似于按钮，标签也可以有不同的颜色
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
Black
Dark
Light
White
Primary
Link
Info
Success
Warning
Danger
大小
标签可以有不同的大小
<span class="tag is-link is-normal">普通</span>
<span class="tag is-primary is-medium">中等</span>
<span class="tag is-info is-large">偏大</span>
普通
中等
偏大
修饰
可以将标签修饰为圆角或删除按钮样式
<span class="tag is-rounded">圆角</span>
<a class="tag is-delete"></a>
组合使用
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
Bar
Hello
World
标签组
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
</div>
当标签很多时，它将自动按多行处理
<div class="tags">
<span class="tag">标签1</span>
<span class="tag">标签2</span>
<span class="tag">标签3</span>
<span class="tag">标签4</span>
<span class="tag">标签5</span>
<span class="tag">标签6</span>
<span class="tag">标签7</span>
<span class="tag">标签8</span>
<span class="tag">标签9</span>
<span class="tag">标签10</span>
<span class="tag">标签11</span>
<span class="tag">标签12</span>
<span class="tag">标签13</span>
<span class="tag">标签14</span>
<span class="tag">标签15</span>
<span class="tag">标签16</span>
<span class="tag">标签17</span>
<span class="tag">标签18</span>
<span class="tag">标签19</span>
<span class="tag">标签20</span>
</div>
将两个标签合并在一起
<div class="tags has-addons">
<span class="tag">左边标签</span>
<span class="tag is-primary">右边标签</span>
</div>
文本标签与删除标签配合
<div class="tags has-addons">
<span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a>
</div>
组合后的标签组
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">0.7.0</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">chat</span>
<span class="tag is-primary">on gitter</span>
</div>
</div>
</div>
组合后的多行效果
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Technology</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">CSS</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Flexbox</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Web Design</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Open Source</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Community</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Documentation</a>
<a class="tag is-delete"></a>
</div>
</div>
</div>
