标签页

srczh.css src-tab 纯css定义标签页

水平标签页

普通标签页类型tab-a

选项卡甲 显示
选项卡乙 显示
选项卡丙 显示
tab-a 代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<sg-row title="标签页示例tab-a">           
    <src-tab class="tab-a">
     <input type="radio" class="tab-radio" name="srctab" id="tab-item1" checked="">
     <input type="radio" class="tab-radio" name="srctab" id="tab-item2">
     <input type="radio" class="tab-radio" name="srctab" id="tab-item3">
     <div class="src-tab-head">
         <label for="tab-item1">选项卡甲</label>
         <label for="tab-item2">选项卡乙</label>
         <label for="tab-item3">选项卡丙</label>
      </div>
      
     <div class="src-tab-body">
         <div class="src-tab-item">
             选项卡甲 显示
         </div>
         <div class="src-tab-item">
             选项卡乙 显示
         </div>
         <div class="src-tab-item">
            选项卡丙 显示
         </div>
     </div>
    </src-tab>
</sg-row>

普通标签页类型tab-b样式, 加入禁用标签

选项卡甲 显示
选项卡乙 显示
选项卡丙 显示
tab-b 代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<sg-row title="标签页示例tab-b">         
    <src-tab class="tab-b">
     <input type="radio" class="tab-radio" name="tab-b" id="tab-b1" checked="">
     <input type="radio" class="tab-radio" name="tab-b" id="tab-b2">
     <input type="radio" class="tab-radio" name="tab-b" id="tab-b3" disabled="disabled">
     <div class="src-tab-head">
         <label for="tab-b1">选项卡甲</label>
         <label for="tab-b2">选项卡乙</label>
         <label for="tab-b3" class="cr-d">选项卡丙</label>
      </div>
      
     <div class="src-tab-body">
         <div class="src-tab-item">
             选项卡甲 显示
         </div>
         <div class="src-tab-item">
             选项卡乙 显示
         </div>
         <div class="src-tab-item">
            选项卡丙 显示
         </div>
     </div>
    </src-tab>
</sg-row>

普通标签页常用案例

标签页常用展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<sg-row title="标签页示例tab-b">         
    <src-tab class="tab-b">
     <input type="radio" class="tab-radio" name="tab-zs" id="tab-1" checked="">
     <input type="radio" class="tab-radio" name="tab-zs" id="tab-2">
     <input type="radio" class="tab-radio" name="tab-zs" id="tab-3">
     <div class="src-tab-head pdl-10 cr-b">
         <label for="tab-1"><i class="fa fa-cube"></i> 展示</label>
         <label for="tab-2"><i class="fa fa-code"></i> 代码</label>
         <label for="tab-3"><i class="fa fa-file-photo-o"></i> 效果</label>
      </div>
     <div class="src-tab-body  bk-a" style="height:auto">
         <div class="src-tab-item">
                标签页常用展示
         </div>
         <div class="src-tab-item">
                代码
         </div>
         <div class="src-tab-item">
             效果
         </div>
     </div>
    </src-tab>
</sg-row>
效果

自定义方向标签页

tab-c 设置竖向标签

标签页常用展示
代码
效果

tab-m定义小号标签页, tab-x-r设置方向在右边

标签页常用展示
代码
效果
请您对本章评分:
2016 - 2021 © srczh.com 版权所有 增值电信经营许可:粤ICP备19068081号
深圳市中文远星科技有限公司