Bulma 的 tabs
是一个简单的有多种版本的导航组件。它们通常需要下列构件:
-
一个
tabs
容器
-
一个
<ul>
HTML 元素
-
一个
<li>
HTML 元素列表
-
面向每个链接的
<a>
HTML 锚点元素
默认 tabs 样式在底部有一个单边框。
HTML
对齐方式
#
对齐 tabs 列表,在 .tabs
容器上添加 is-centered
或者 is-right
修饰符:
HTML
HTML
图标
#
HTML
型号
#
您可选择 3 个扩展型号之一:is-small
is-medium
和 is-large
。
HTML
HTML
HTML
样式
#
如果您想要带边框的经典样式,只需添加 is-boxed
修饰符即可。
HTML
如果您想要互斥效果的 tabs(像单选按钮一样,点击一个会取消所有其他按钮),只需使用 is-toggle
修饰符即可。
HTML
如果您既使用了 is-toggle
又使用了 is-toggle-rounded
,那么第一个和最后一个项目会是圆角。
HTML
如果您想让 tabs 占用整个宽度,使用 is-fullwidth
。
HTML
组合
#
您可以组合使用不同的修饰符。例如,您可以使用居中带边框的 tabs,或者全宽度可切换 tabs。
HTML
HTML
HTML
HTML
Variables
#
Name
Type
Value
Computed Value
Computed Type
variable
color
string
size
variable
color
variable
color
variable
color
variable
color
variable
color
variable
color
string
variable
color
string
size
variable
color
variable
color
variable
color
variable
color
variable
color