APIbeta

Button

Introduce

按钮样式在 @bpui/button 中, 在使用bpui.js时会自动引入;

系统提供了如下内置的类型:

类名 描述
bp-btnPrimary 主按钮, button标签不填类名
bp-btnInfo 信息按钮 (默认)
bp-btnWarning 警告按钮

除了使用类名, 还可以使用属性, 例如以下效果一致.

1
2
<button class="bp-btnPrimary">primary</button>
<button primary>primary</button>
1
2
<button class="bp-btnWarning">primary</button>
<button warning>warning</button>

以下类可以与上述类名组合

类名 描述
bp-btnBorder 带边框的按钮; 默认按钮不带边框
bp-btnFill 使用文字颜色来做为背景色, 实心填充按钮 
1
2
3
4
5
6
7
8
<button>primary</button>
<button class="bp-btnPrimary">primary</button>
<button class="bp-btnWarning">warning</button>
<button disabled="disabled">disabled</button>
<button disabled="true">disabled</button>
<button>
  <bp-icon name="iconName"/>iconButton
</button>

如果项目中使用了其他的框架, 造成button标签被定义, 那么可以使用bp-btn类代替:

1
<div class="bp-btn">primary</div>

example

See the Pen bpui-button by brainpoint (@brainpoint) on CodePen.

自定义主题

样式结构

系统只默认提供了, primary, info, warning以及包含边框的样式, 其他类型样式请自行定义

scss样式文件存放在@bpui/button/style 目录下, 可以复制修改以定制主题