Tags

小 tag 标签随处插

Bulma 的 Tag——人小本事大。当需要附加信息到一个 Block 或者其他组件的时候 Tag 非常有用。其体型令其很适合显示数字，适用于长列表项。

默认情况下，一个 Tag 是一个 1.5rem 高度的标签。
Tag 标签 
<span class="tag">
  Tag label
</span>

颜色 #

跟 Button 一样有 10 种不同颜色可选。

Black

Dark

Light

White

Primary

Link

Info

Success

Warning

Danger 
<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>

您还可以选择颜色的高亮（light）版本。

Primary

Link

Info

Success

Warning

Danger 
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>

型号 #

Tag 有 3 种不同型号。

默认型号为 普通（normal），之所以有 is-normal 修饰符就是为了您可能有重置 Tag 为普通型号的需要。

普通

中型

大型 

<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>

您可以一次性修改所有 Tag：

示例

All Medium Size

HTML 

<div class="tags are-medium">
  <span class="tag">All</span>
  <span class="tag">Medium</span>
  <span class="tag">Size</span>
</div>

示例

All Large Size

HTML 

<div class="tags are-large">
  <span class="tag">All</span>
  <span class="tag">Large</span>
  <span class="tag">Size</span>
</div>

您可以通过为一组 Tag 中的某一个添加修饰符类，从而使添加修饰符的 Tag 型号改变的同时还能保持组内 其他 Tag 的型号不变：

示例

Medium Normal Medium Large Medium

HTML 

<div class="tags are-medium">
  <span class="tag">Medium</span>
  <span class="tag is-normal">Normal</span>
  <span class="tag">Medium</span>
  <span class="tag is-large">Large</span>
  <span class="tag">Medium</span>
</div>

修饰符 #

您可以添加 is-rounded 修饰符使 Tag 变为圆角（rounded）。
Rounded 
<span class="tag is-rounded">Rounded</span>
您可以添加 is-delete 修饰符使 Tag 变成一个 delete button。 
<a class="tag is-delete"></a>

组合 #

您可以添加一个 delete button。

Bar

Hello

World 

<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>

Tag 列表 #

您现在可以用 tags 做为容器创建一个 Tag 列表。

One Two Three 
<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
</div>

如果列表很长，它会自动生成 multiple lines 包裹变成多行，并且保持所有 Tag 合理布局。

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty 
<div class="tags">
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
  <span class="tag">Four</span>
  <span class="tag">Five</span>
  <span class="tag">Six</span>
  <span class="tag">Seven</span>
  <span class="tag">Eight</span>
  <span class="tag">Nine</span>
  <span class="tag">Ten</span>
  <span class="tag">Eleven</span>
  <span class="tag">Twelve</span>
  <span class="tag">Thirteen</span>
  <span class="tag">Fourteen</span>
  <span class="tag">Fifteen</span>
  <span class="tag">Sixteen</span>
  <span class="tag">Seventeen</span>
  <span class="tag">Eighteen</span>
  <span class="tag">Nineteen</span>
  <span class="tag">Twenty</span>
</div>

Tag 扩展 #

您可以组合 tags 和 has-addons 修饰符到一起。

Package Bulma 
<div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">Bulma</span>
</div>

您也可以组合 text 和 delete 修饰符。

Alex Smith 
<div class="tags has-addons">
  <span class="tag is-danger">Alex Smith</span>
  <a class="tag is-delete"></a>
</div>

如果您想组合多个 tags 容器到一起，就用带有 is-grouped 和 is-grouped-multiline 修饰符的 field 元素。

npm 0.9.4
build passing
chat on gitter 
<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.9.4</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>

这对于很长的博客 tags 列表就很适合。

Technology
CSS
Flexbox
Web Design
Open Source
Community
Documentation 
<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>

Variables #

Name
Type
Value
Computed Value
Computed Type 
$tag-background-color
variable
$background
hsl(0, 0%, 96%)
color
$tag-color
variable
$text
hsl(0, 0%, 29%)
color
$tag-radius
variable
$radius
4px
size
$tag-delete-margin
size
1px
$tag-colors
variable
$colors
Bulma colors
map

Made with Bulma 此页面为开放源码页面。 发现排版问题？或者表达模糊？
在 GitHub 改进该页内容

支持 Bulma 😃

一次性捐献

访问我们的赞助商

Stock APIs kasinohai casinoutanlicens

按月捐献

成为赞助商
#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布！