ダウンロード

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Password.link

パネル

コンパクトなコントロールのための、構成可能なパネル

panelは、いくつかのタイプを格納するコンテナです。

  • 最初の子供としてpanel-heading
  • ナビゲーションのためのpanel-tabs
  • 他の要素（以下など）を含むことができるpanel-block
    • コントロール
    • 入力
    • ボタン
    • panel-icon

panel-blockは、アンカータグ<a>、またはチェックボックスが内部にあるラベル<label>にすることができます。

例

HTML 

<nav class="panel">
  <p class="panel-heading">Repositories</p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-branch" aria-hidden="true"></i>
    </span>
    daniellowtw/infboard
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-code-branch" aria-hidden="true"></i>
    </span>
    mojs
  </a>
  <label class="panel-block">
    <input type="checkbox" />
    remember me
  </label>
  <div class="panel-block">
    <button class="button is-link is-outlined is-fullwidth">
      Reset all filters
    </button>
  </div>
</nav>

色 #

パネルコンポーネントは、$colors Sassマップで定義されたすべての異なる色で使用できます。色の修飾子を1つ追加するだけです。

たとえば、プライマリカラーを使用するには、クラスとして"panel is-primary"を使用します。

例

HTML 

<article class="panel is-link">
  <p class="panel-heading">Link</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-link" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

例

HTML 

<article class="panel is-primary">
  <p class="panel-heading">Primary</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-primary" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

例

HTML 

<article class="panel is-info">
  <p class="panel-heading">Info</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-info" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

例

HTML 

<article class="panel is-success">
  <p class="panel-heading">Success</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-success" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

例

HTML 

<article class="panel is-warning">
  <p class="panel-heading">Warning</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-warning" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

例

HTML 

<article class="panel is-danger">
  <p class="panel-heading">Danger</p>
  <p class="panel-tabs">
    <a class="is-active">All</a>
    <a>Public</a>
    <a>Private</a>
    <a>Sources</a>
    <a>Forks</a>
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-danger" type="text" placeholder="Search" />
      <span class="icon is-left">
        <i class="fas fa-search" aria-hidden="true"></i>
      </span>
    </p>
  </div>
  <a class="panel-block is-active">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    bulma
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    marksheet
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    minireset.css
  </a>
  <a class="panel-block">
    <span class="panel-icon">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    jgthms.github.io
  </a>
</article>

SassとCSS変数 #

Sass変数
CSS変数
値
 
$panel-margin
 
var(--bulma-panel-margin)
 
var(--bulma-block-spacing)
 
$panel-item-border
 
var(--bulma-panel-item-border)
 
1px solid var(--bulma-border-weak)
 
$panel-radius
 
var(--bulma-panel-radius)
 
var(--bulma-radius-large)
 
$panel-shadow
 
var(--bulma-panel-shadow)
 
var(--bulma-shadow)
 
$panel-heading-line-height
 
var(--bulma-panel-heading-line-height)
 
1.25
 
$panel-heading-padding
 
var(--bulma-panel-heading-padding)
 
1em 1.25em
 
$panel-heading-radius
 
var(--bulma-panel-heading-radius)
 
var(--bulma-radius)
 
$panel-heading-size
 
var(--bulma-panel-heading-size)
 
1.25em
 
$panel-heading-weight
 
var(--bulma-panel-heading-weight)
 
var(--bulma-weight-bold)
 
$panel-tabs-font-size
 
var(--bulma-panel-tabs-font-size)
 
1em
 
$panel-tab-border-bottom-color
 
var(--bulma-panel-tab-border-bottom-color)
 
var(--bulma-border)
 
$panel-tab-border-bottom-style
 
var(--bulma-panel-tab-border-bottom-style)
 
solid
 
$panel-tab-border-bottom-width
 
var(--bulma-panel-tab-border-bottom-width)
 
1px
 
$panel-tab-active-color
 
var(--bulma-panel-tab-active-color)
 
var(--bulma-link-active)
 
$panel-list-item-color
 
var(--bulma-panel-list-item-color)
 
var(--bulma-text)
 
$panel-list-item-hover-color
 
var(--bulma-panel-list-item-hover-color)
 
var(--bulma-link)
 
$panel-block-color
 
var(--bulma-panel-block-color)
 
var(--bulma-text-strong)
 
$panel-block-hover-background-color
 
var(--bulma-panel-block-hover-background-color)
 
var(--bulma-background)
 
$panel-block-active-border-left-color
 
var(--bulma-panel-block-active-border-left-color)
 
var(--bulma-link)
 
$panel-block-active-color
 
var(--bulma-panel-block-active-color)
 
var(--bulma-link-active)
 
$panel-block-active-icon-color
 
var(--bulma-panel-block-active-icon-color)
 
var(--bulma-link)
 
$panel-icon-color
 
var(--bulma-panel-icon-color)
 
var(--bulma-text-weak)

Bulmaをサポートする方法

一度きりの寄付

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

毎月の寄付

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