Bulma Sass フォームコントロール Mixin

BulmaのボタンとフォームコントロールのためのMixin

Bulmaでは、フォームコントロールはフレームワークの重要な部分です。これらは、次の要素で構成されています。

.button
.input
.select
.file-cta .file-name
.pagination-previous .pagination-next .pagination-link .pagination-ellipsis

control() mixinは、これらのすべてのフォームコントロール間で共有される一連のスタイルを提供することにより、一貫性を保証します。これを使用して追加のコントロールを作成できます。

@use "bulma/sass/utilities/controls";

.bulma-control-mixin {
  @include controls.control;
  background: deeppink;
  color: white;
}

例

HTML

<button class="bulma-control-mixin">
  My control
</button>

サイズ #

コントロールのデフォルトのフォントサイズは$size-normalで、3つの追加サイズがあり、3つの追加mixinを介してアクセスできます。

```
@include control-small;
```
フォントサイズ$size-small
```
@include control-medium;
```
フォントサイズ$size-medium
```
@include control-large;
```
フォントサイズ$size-large

.bulma-control-mixin {
  &.is-small {
    @include control-small;
  }

  &.is-medium {
    @include control-medium;
  }

  &.is-large {
    @include control-large;
  }
}

例

HTML

<button class="bulma-control-mixin is-small">
  Small
</button>
<button class="bulma-control-mixin">
  Normal
</button>
<button class="bulma-control-mixin is-medium">
  Medium
</button>
<button class="bulma-control-mixin is-large">
  Large
</button>

コントロールプレースホルダー #

control() mixinは、Sassプレースホルダー %controlとしても存在します。

@use "bulma/sass/utilities/extends";

.bulma-control-extend {
  @extend %control;
  background: mediumblue;
  color: white;
}

例

HTML

<button class="bulma-control-extend">
  My control
</button>

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー

Bulma Sass フォームコントロール Mixin

BulmaのボタンとフォームコントロールのためのMixin

サイズ #

コントロールプレースホルダー #

Bulmaを支援する方法