ダウンロード

ここから始めましょう

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

タグ

どこにでも挿入できる小さなタグラベル

Bulmaのタグは小さくても汎用性の高い要素です。ブロックや他のコンポーネントに情報を添付するのに非常に役立ちます。そのサイズは数字で表示することも容易なので、長いアイテムリストに適しています。

デフォルトでは、タグは高さ1.5remのラベルです。
タグラベル 
<span class="tag"> Tag label </span>

色 #

ボタンと同様に、10種類の異なる色を使用できます。

ブラック

ダーク

ライト

ホワイト

プライマリー

リンク

情報

成功

警告

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

これで、色のライトバージョンを選択できるようになりました。

プライマリー

リンク

情報

成功

警告

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

サイズ #

タグには3つの異なるサイズがあります。

デフォルトのサイズはノーマルですが、タグをノーマルサイズに戻す必要がある場合は、`is-normal`修飾子を使用できます。

ノーマル

ミディアム

ラージ 

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

すべてのタグのサイズを一度に変更できます

例

すべて ミディアム サイズ

HTML 

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

例

すべて ラージ サイズ

HTML 

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

ただし、修飾子クラスの1つを適用するだけで、一部のタグの元のサイズを維持できます

例

ミディアム ノーマル ミディアム ラージ ミディアム

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>

ホバー/アクティブ状態 #

タグ要素は、以下の場合に`：hover`および`：active`状態に反応します。

  • アンカー要素の場合 `<a class="tag">`
  • ボタン要素の場合 `<button class="tag">`
  • `is-hoverable`修飾子クラスを持つ場合 `<div class="tag is-hoverable">`

例

ホバー
ホバー

HTML 

<a class="tag">Hover me</a>
<button class="tag">Hover me</button>
<div class="tag is-hoverable">Hover me</div>

修飾子 #

`is-rounded`修飾子を追加して、丸みを帯びたタグを作成できます。
丸みを帯びた 
<span class="tag is-rounded">Rounded</span>
`is-delete`修飾子を追加して、タグを削除ボタンに変えることができます。
<a class="tag is-delete"></a>

組み合わせ #

ホバー可能なカラータグを作成できます。
ホバー
ホバー
ホバー
ホバー
<a class="tag is-link">Hover me</a>
<button class="tag is-primary">Hover me</button>
<div class="tag is-hoverable is-success">Hover me</div>
<a class="tag is-info">Hover me</a>
<button class="tag is-warning">Hover me</button>
<div class="tag is-hoverable is-danger">Hover me</div>
削除ボタンを付けることができます。

バー

こんにちは

世界 

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

タグのリスト #

`tags`コンテナを使用して、タグのリストを作成できるようになりました。

一つ 二つ 三つ
<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">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>

タグアドオン #

`has-addons`修飾子を使用して、タグを一緒に添付できます。

パッケージ Bulma
<div class="tags has-addons">
  <span class="tag">Package</span>
  <span class="tag is-primary">Bulma</span>
</div>

テキストタグと削除タグを一緒に添付できます。

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 1.0.0
ビルド 成功
チャット 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">1.0.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>

これは、長いブログタグのリストに役立ちます。

テクノロジー
CSS
Flexbox
ウェブデザイン
オープンソース
コミュニティ
ドキュメント 
<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>

SassとCSS変数 #

Sass変数
CSS変数
値
 
$tag-radius
 
var(--bulma-tag-radius)
 
var(--bulma-radius)
 
$tag-delete-margin
 
var(--bulma-tag-delete-margin)
 
1px

Bulmaのサポート方法

一度きりの寄付

スポンサーをご覧ください

毎月の寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#