纽扣
按钮-Bootstrap 5和Material Design 2.0组件
将MDB自定义按钮样式用于表单,对话框等中的操作,并支持多个 大小,状态等。
注意:阅读 API 标签以找到所有可用选项,然后 高级定制
基本例子
<button type="button" class="btn btn-primary">Button</button>
禁用文字换行
如果您不希望换行,请添加
.text-nowrap
类添加到按钮。在Sass中,您可以设置
$ btn-white-space:nowrap
禁用每个按钮的文本换行。
色彩
MDB包含几种预定义的按钮样式,每种样式都有其自己的语义目的,并且 很少有其他东西可以控制。
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">Link</button>
向辅助技术体现含义:
使用颜色添加含义仅提供视觉指示,不会传达给
辅助技术的用户-例如屏幕阅读器。确保信息表示为
颜色可以从内容本身(例如可见文字)中显而易见,也可以包含在内
通过其他方式,例如用
.visually-hidden
类。
大纲
需要一个按钮,但是他们带来的沉重背景颜色不是吗?替换默认
带有 .btn-outline-*
的修饰符类,以删除所有背景图片和
任何按钮上的颜色。
在大纲按钮中,我们建议添加
data-mdb-ripple-color =“ dark”
更改颜色
涟漪效应。波纹的默认灯光颜色(自动应用
(对于每个按钮),在使用浅色和轮廓按钮的情况下可能看不到。
要了解有关波纹效应的更多信息,请查看以下所有可用选项 Ripple Docs 。
<button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
Primary
</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-color="dark">
Success
</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-color="dark">
Danger
</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-color="dark">
Warning
</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-color="dark">
Info
</button>
<button type="button" class="btn btn-outline-light" data-mdb-ripple-color="dark">
Light
</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark">
Dark
</button>
某些按钮样式使用相对较浅的前景色,并且仅应在 深色背景以具有足够的对比度。
四舍五入
添加 .btn-rounded
类以使按钮四舍五入。
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>
圆角轮廓
您可以结合使用 .btn-outline-*
和 .btn-rounded
按钮轮廓并同时四舍五入。
<button
type="button"
class="btn btn-outline-primary btn-rounded"
data-mdb-ripple-color="dark"
>
Primary
</button>
<button
type="button"
class="btn btn-outline-secondary btn-rounded"
data-mdb-ripple-color="dark"
>
Secondary
</button>
<button
type="button"
class="btn btn-outline-success btn-rounded"
data-mdb-ripple-color="dark"
>
Success
</button>
<button
type="button"
class="btn btn-outline-danger btn-rounded"
data-mdb-ripple-color="dark"
>
Danger
</button>
<button
type="button"
class="btn btn-outline-warning btn-rounded"
data-mdb-ripple-color="dark"
>
Warning
</button>
<button
type="button"
class="btn btn-outline-info btn-rounded"
data-mdb-ripple-color="dark"
>
Info
</button>
<button
type="button"
class="btn btn-outline-light btn-rounded"
data-mdb-ripple-color="dark"
>
Light
</button>
<button
type="button"
class="btn btn-outline-dark btn-rounded"
data-mdb-ripple-color="dark"
>
Dark
</button>
漂浮的
使用 .btn-floating
类制作一个圆形按钮。
为了使其正常工作,您必须在其中放置一个图标。 文字不会 适合。您可以在我们的网站上找到数百个可用图标 图标文档。
<button type="button" class="btn btn-primary btn-floating">
<i class="fas fa-download"></i>
</button>
您几乎可以将所有相同的类和属性应用于浮动按钮, 常规按钮-颜色,波纹,大小,轮廓等。
<button type="button" class="btn btn-primary btn-lg btn-floating">
<i class="fab fa-facebook-f"></i>
</button>
<button
type="button"
class="btn btn-outline-success btn-floating"
data-mdb-ripple-color="dark"
>
<i class="fas fa-star"></i>
</button>
<button type="button" class="btn btn-danger btn-floating">
<i class="fas fa-magic"></i>
</button>
<button type="button" class="btn btn-dark btn-floating">
<i class="fab fa-apple"></i>
</button>
Sizes
喜欢更大或更小的按钮吗?添加 .btn-lg
或 .btn-sm
其他尺寸。
<button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary btn-lg">Button</button>
活跃状态
添加 .active
类以使按钮看起来像被按下。
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"
>Primary link</a
>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true"
>Link</a
>
禁用状态
通过添加按钮使按钮看起来不活动disabled
布尔属性
<button>
元件。禁用的按钮有
pointer-events: none
适用于防止悬停状态和活动状态
触发。
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
使用的禁用按钮 <a>
元素的行为略有不同:
-
<a>
不支持disabled
属性,因此您必须添加 的.disabled
类以使其在视觉上显得已禁用。 -
包括一些未来友好的样式以禁用所有
定位按钮上的
pointer-events
。在支持该属性的浏览器中,您可以 根本看不到禁用的光标。 -
禁用的按钮应包括
aria-disabled =“ true”
属性指示元素的状态 辅助技术。
<a
href="#"
class="btn btn-primary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Primary link</a
>
<a
href="#"
class="btn btn-secondary btn-lg disabled"
tabindex="-1"
role="button"
aria-disabled="true"
>Link</a
>
链接功能警告:
.disabled
类使用 pointer-events:none
尝试禁用
的链接功能 <a>
,但是CSS属性尚未标准化。
另外,即使在支持 pointer-events:none
,键盘的浏览器中
导航不受影响,这意味着有视力的键盘用户和辅助用户
技术仍然可以激活这些链接。为了安全起见,请添加一个
这些链接上的 tabindex =“-1”
属性(以防止它们接收键盘
焦点)并使用自定义JavaScript禁用其功能。
切换状态
添加 data-mdb-toggle =“ button”
以切换按钮的活动 code>状态。如果
您要预先切换按钮,则必须手动添加
.active
类
和 strong> aria-pressed =“ true”
到&lt; button&gt;
。
<button type="button" class="btn btn-primary" data-mdb-toggle="button" autocomplete="off">
Toggle button
</button>
<button
type="button"
class="btn btn-primary active"
data-mdb-toggle="button"
autocomplete="off"
aria-pressed="true"
>
Active toggle button
</button>
<button
type="button"
class="btn btn-primary"
disabled
data-mdb-toggle="button"
autocomplete="off"
>
Disabled toggle button
</button>
<a href="#" class="btn btn-primary" role="button" data-mdb-toggle="button">Toggle link</a>
<a
href="#"
class="btn btn-primary active"
role="button"
data-mdb-toggle="button"
aria-pressed="true"
>Active toggle link</a
>
<a href="#" class="btn btn-primary disabled" role="button" data-mdb-toggle="button"
>Disabled toggle link</a
>
纽扣 - API
方法
您可以使用按钮构造函数创建按钮实例,例如:
const button = document.getElementById('myButton')
const bsButton = new mdb.Button(button)
Method | Description | Example |
---|---|---|
toggle
|
Toggles push state. Gives the button the appearance that it has been activated. | instance.toggle() |
dispose
|
Destroys an element's button. | instance.dispose() |
例如,切换所有按钮
const buttons = document.querySelectorAll('.btn')
buttons.forEach((button) => {
const button = new mdb.Button(button)
button.toggle()
})
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Button } from 'mdb-ui-kit';