设计规范

开发者文档
三种不同大小的标签页,可以当做静态组件使用,引入js之后可以做动态的切换。js用法参考 tab-js。
- 更新 v1.1.9:修复了灰色导航条样式的标签页在ie8下垂直样式的bug。
- 更新 v1.1.7:为导航条样式的标签页增加了一个轻量的样式(灰色高亮)。
默认标签页
- <ul class="sui-nav nav-tabs">
- <li class="active"><a>标签一</a></li>
- <li><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-large">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <h3>垂直</h3>
- <ul class="sui-nav nav-tabs nav-large tab-vertical">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
有三种尺寸: default,
默认标签页是静态的,如果需要动态的标签页可以参考这里 js 标签页
.nav-large
, .nav-tabs-xlarge
。通过在 li
标签上添加 .active
可以指定当前高亮的tab。默认标签页是静态的,如果需要动态的标签页可以参考这里 js 标签页
- 复制代码代码已复制
首要标签页
- <ul class="sui-nav nav-tabs nav-primary">
- <li class="active"><a>标签一</a></li>
- <li><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-large nav-primary">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge nav-primary">
- <li><a>前端</a></li>
- <li class="active"><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <h3>垂直</h3>
- <ul class="sui-nav nav-tabs nav-primary nav-large tab-vertical">
- <li><a>标签一</a></li>
- <li class="active"><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
首要标签页,添加
nav-primary
- 复制代码代码已复制
胶囊样式
- <ul class="sui-nav nav-tabs nav-pills">
- <li class="active"><a>标签一</a></li>
- <li><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-large nav-pills">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge nav-pills">
- <li><a>前端</a></li>
- <li class="active"><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <h3>垂直</h3>
- <ul class="sui-nav nav-tabs nav-xlarge nav-pills tab-vertical">
- <li><a>前端</a></li>
- <li class="active"><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- 复制代码代码已复制
导航条样式
垂直
- <ul class="sui-nav nav-tabs tab-navbar">
- <li class="active"><a>标签一</a></li>
- <li><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-large tab-navbar">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar">
- <li><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li class="active"><a href="#">运维</a></li>
- </ul><br>
- <ul class="sui-nav nav-tabs tab-navbar tab-light">
- <li class="active"><a>标签一</a></li>
- <li><a href="#">标签二</a></li>
- <li><a href="#">标签二</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-large tab-navbar tab-light">
- <li><a>语文</a></li>
- <li class="active"><a href="#">数学</a></li>
- <li><a href="#">英语</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-light">
- <li><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li class="active"><a href="#">运维</a></li>
- </ul>
- <h3>垂直</h3>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
- <li class="active"><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
- <li><a>前端</a></li>
- <li class="active"><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
- <li><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li class="active"><a href="#">运维</a></li>
- </ul><br>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
- <li class="active"><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
- <li><a>前端</a></li>
- <li class="active"><a href="#">后端</a></li>
- <li><a href="#">运维</a></li>
- </ul>
- <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical tab-light">
- <li><a>前端</a></li>
- <li><a href="#">后端</a></li>
- <li class="active"><a href="#">运维</a></li>
- </ul>
- 复制代码代码已复制
包裹内容
- 注意,需要在sui-nav和tab-content上都加上
.tab-wraped
- 默认是四列,可以通过在sui-nav加上
.column3
/.column5
变成3列/5列。 - 内部的label和ul的宽度可以根据需求自己调整。
qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park
Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!
- <style>
- /*自己调整宽度*/
- .tab-wraped > li ul {
- width: 140px;
- }
- .tab-wraped > li ul label {
- width: 50px!important;
- }
- </style>
- <ul class="sui-nav nav-tabs tab-wraped">
- <li class="active"><a href="#index" data-toggle="tab">
- <h3>海贼王</h3>
- <ul class="unstyled">
- <li>
- <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
- </li>
- <li>
- <label>占比</label><span class="sui-text-info">33%</span>
- </li>
- </ul></a></li>
- <li><a href="#profile" data-toggle="tab">
- <h3>海贼王</h3>
- <ul class="unstyled">
- <li>
- <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
- </li>
- <li>
- <label>占比</label><span class="sui-text-info">33%</span>
- </li>
- </ul></a></li>
- <li><a href="#about" data-toggle="tab">
- <h3>海贼王</h3>
- <ul class="unstyled">
- <li>
- <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
- </li>
- <li>
- <label>占比</label><span class="sui-text-info">33%</span>
- </li>
- </ul></a></li>
- <li><a href="#help" data-toggle="tab">
- <h3>海贼王</h3>
- <ul class="unstyled">
- <li>
- <label>总赏金</label><strong class="sui-text-warning">999,999</strong>
- </li>
- <li>
- <label>占比</label><span class="sui-text-info">33%</span>
- </li>
- </ul></a></li>
- </ul>
- <div class="tab-content tab-wraped">
- <div id="index" class="tab-pane active">
- <p>qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
- </div>
- <div id="profile" class="tab-pane">
- <p>Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park</p>
- </div>
- <div id="about" class="tab-pane">
- <p>Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
- </div>
- <div id="help" class="tab-pane">
- <p>help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!help!!!</p>
- </div>
- </div>
- 复制代码代码已复制