Panel

panel قابل ترکیب برای کنترلر ها

رنگ دارد
انداه ندارد
متغیر دارد

panel بخشی برای چندین نوع است:

  • panel-heading به عنوان اولین بخش
  • panel-tabs فهرست
  • panel-block شامل چندین المان است:
    • control
    • input
    • button
    • panel-icon

panel-block می تواند یک تگ لینک <a> یا یک تگ <label> با چک باکس کناری باشد.


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

رنگها #

از 0.8.0

کامپوننت panel در رنگ های مختلف تعریف شده با the $colors Sass map موجود است. به سادگی یکس از کلاس های اصلاح رنگ را اضافه کنید.

به عنوان مثال برای استفاده از primary color، از "panel is-primary" به عنوان کلاس استفاده کنید.


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

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

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

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

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

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

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$panel-margin size $block-spacing 1.5rem
$panel-item-border size 1px solid $border-light
$panel-radius size $radius-large 6px
$panel-shadow size 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
$panel-heading-background-color color $border-light hsl(0, 0%, 93%)
$panel-heading-color color $text-strong hsl(0, 0%, 21%)
$panel-heading-line-height unitless 1.25
$panel-heading-padding size 0.75em 1em
$panel-heading-radius size $radius 4px
$panel-heading-size size 1.25em
$panel-heading-weight font-weight $weight-bold 700
$panel-tabs-font-size size 0.875em
$panel-tab-border-bottom size 1px solid $border
$panel-tab-active-border-bottom-color color $link-active-border hsl(0, 0%, 29%)
$panel-tab-active-color color $link-active hsl(0, 0%, 21%)
$panel-list-item-color color $text hsl(0, 0%, 29%)
$panel-list-item-hover-color color $link hsl(217, 71%, 53%)
$panel-block-color color $text-strong hsl(0, 0%, 21%)
$panel-block-hover-background-color color $background hsl(0, 0%, 96%)
$panel-block-active-border-left-color color $link hsl(217, 71%, 53%)
$panel-block-active-color color $link-active hsl(0, 0%, 21%)
$panel-block-active-icon-color color $link hsl(217, 71%, 53%)
$panel-icon-color color $text-light hsl(0, 0%, 48%)
$panel-colors function $colors mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)