Bulma Sass 表单控件混合

Bulma 按钮和表单控件的混合

在 Bulma 中，表单控件是框架的重要组成部分。它们包含以下元素

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

control() 混合确保一致性，方法是提供一组在所有这些表单控件之间共享的样式。你可以使用它来创建其他控件

@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 种其他混合访问

```
@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() 混合也作为 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 表单控件混合

Bulma 按钮和表单控件的混合

尺寸 #

控件占位符 #

如何支持 Bulma