文档
组件
标签
标签
默认
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs bw"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs bw'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
Bordered 带边框
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs danger bordered"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs danger bordered'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
Ghost 幽灵背景
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs success ghost"><div class="tab p-2">Tab 1</div><div class="tab p-2">Tab 2</div><div class="tab active p-2">Tab 3</div></div>
<div className='tabs success ghost'><div className='tab p-2'>Tab 1</div><div className='tab p-2'>Tab 2</div><div className='tab active p-2'>Tab 3</div></div>
Ghost + Bordered 幽灵背景+边框
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs info bordered ghost"><div class="tab p-2">Tab 1</div><div class="tab p-2">Tab 2</div><div class="tab active p-2">Tab 3</div></div>
<div className='tabs info bordered ghost'><div className='tab p-2'>Tab 1</div><div className='tab p-2'>Tab 2</div><div className='tab active p-2'>Tab 3</div></div>
Pill 按钮形标签
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs success pill"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs success pill'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
Boxed 盒子外壳
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs boxed warn"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs boxed warn'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
Boxed with pill 按钮形与盒子外壳
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs boxed success pill"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs boxed success pill'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
方向
默认 (上)
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs bordered success"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs bordered success'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
下
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs bordered success bottom"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs bordered success bottom'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
左
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs bordered success left"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs bordered success left'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>
右
演示
代码
HTML代码
JSX/TSXTab 1
Tab 2
Tab 3
<div class="tabs bordered success right"><div class="tab p-4">Tab 1</div><div class="tab p-4">Tab 2</div><div class="tab active p-4">Tab 3</div></div>
<div className='tabs bordered success right'><div className='tab p-4'>Tab 1</div><div className='tab p-4'>Tab 2</div><div className='tab active p-4'>Tab 3</div></div>