Tab 頁籤

收透過切換的方式，收納不同內容或分類的資料。

網頁頁籤類型

適用平台：官網、網銀PC

線條版 色塊版

PC版

M版

PC版

M版
  • TAB位置：置中
  • TAB線條底色：#E1EFEF 4px
  • Active狀態：底線#00a19b 4px ; 文字#00a19b 18px bold
  • Defult狀態：文字#1c1c1c 18px regular
  • 內容區域皆需搭配底色 #E1EFEF
  • M版上寬度受限，用淡化方式讓使用者知道還有其他項目
  • TAB位置：置中
  • Active狀態：加上箭頭;底色#00a19b;文字#ffffff 18px regular
  • Defult狀態 文字#00a19b 18px regular 線條1px #00a19b
  • 內容區域皆需搭配底色 ##F4F8FA
  • M版上寬度受限，用淡化方式讓使用者知道還有其他項目

app頁籤類型

適用平台：行動銀行

線條版
  • TAB位置：置中
  • TAB線條底色：#E1EFEF 4px
  • Active狀態：底線#00a19b 4px ; 文字#00a19b 18px bold
  • Defult狀態：文字#1c1c1c 14px regular

線條版頁籤 (Tab)

SAMPLE

  • 內容示意
  • 內容示意

HTML

                                            
//引入uikit套件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.13.1/css/uikit.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.5/js/uikit.min.js"> </script>

<div class="uk-container-center tab">
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li aria-expanded="true" class="uk-active"><a href="">頁籤一</a></li>
    <li aria-expanded="false" class=""><a href="">頁籤二</a></li>
</ul>
<ul id="my-id" class="uk-switcher uk-margin">
    <li class="uk-active">
        <div style="height: 100px;" class="content d-flex align-items-center justify-content-center">
            內容示意
        </div>
    </li>
    <li class="">
        <div style="height: 100px;" class="content d-flex align-items-center justify-content-center">
            內容示意
        </div>
    </li>
</ul>
</div>
複製

CSS

                                                                         
.tab {
max-width: 1100px;
}
.tab .uk-switcher {
background: #E1EFEF;
border-radius: 10px;
padding: 20px;
}

.uk-tab {
max-width: 660px;
width: 100%;
margin: 0 auto;
}
.uk-tab > li {
display: inline-block !important;
width: calc(100% / 2);
padding-left: 0;
position: relative;
}
.uk-tab > li a {
font-size: 18px;
}
.uk-tab > .uk-active::after {
content: "";
width: 100%;
height: 4px;
background: #00a19b;
border-radius: 10px;
display: block;
position: absolute;
bottom: -4px;
right: 0;
}
.uk-tab > .uk-active > a {
color: #00a19b;
font-weight: bold;
padding-bottom: 16px;
border: 0;
}
.uk-tab::before {
display: none;
}
.uk-tab::after {
content: "";
bottom: 0;
left: 20px;
right: 0;
width: 100%;
height: 4px;
background: #E1EFEF;
border-radius: 10px;
position: static;
}
複製

色塊版頁籤 (Tab)

SAMPLE

  • 內容示意一
  • 內容示意二
  • 內容示意三
  • 內容示意四

HTML

                                                        
//引入uikit套件
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.13.1/css/uikit.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.5/js/uikit.min.js"> </script>

<div class="uk-container-center tab tab-block">
    <ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
        <li aria-expanded="true" class="uk-active"><a href="">頁籤一</a></li>
        <li aria-expanded="false" class=""><a href="">頁籤二</a></li>
        <li aria-expanded="false" class=""><a href="">頁籤三</a></li>
        <li aria-expanded="false" class=""><a href="">頁籤四</a></li>
    </ul>
    <ul id="my-id" class="uk-switcher uk-margin">
        <li class="uk-active">
            <div class="content">
                內容示意一
            </div>
        </li>
        <li class="">
            <div class="content">
                內容示意二
            </div>
        </li>
        <li class="">
            <div class="content">
                內容示意三
            </div>
        </li>
        <li class="">
            <div class="content">
                內容示意四
            </div>
        </li>

    </ul>
</div>
複製

CSS

                                                                           
  .tab {
  max-width: 1100px;
  }
  .tab .uk-switcher {
  background: #E1EFEF;
  border-radius: 10px;
  padding: 20px;
  }
  
  .uk-tab {
  width: 100%;
  }
  .uk-tab > li {
  display: inline-block !important;
  padding-left: 0;
  position: relative;
  }
  .uk-tab > li a {
  font-size: 18px;
  }
  .uk-tab > .uk-active::after {
  content: "";
  width: 100%;
  height: 4px;
  background: #00a19b;
  border-radius: 10px;
  display: block;
  position: absolute;
  bottom: -4px;
  right: 0;
  }
  .uk-tab > .uk-active > a {
  color: #00a19b;
  font-weight: bold;
  padding-bottom: 16px;
  border: 0;
  }
  .uk-tab::before {
  display: none;
  }

  
  .tab-block {
  overflow-x: scroll;
  }
  .tab-block .uk-switcher {
  margin-top: 10px !important;
  }
  .tab-block > .uk-tab {
  margin: 0 auto;
  overflow: scroll;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  max-width: 100%;
  }
  @media (min-width: 1200px) {
  .tab-block > .uk-tab {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
  }
  }
  .tab-block > .uk-tab::after {
  display: none;
  }
  .tab-block > .uk-tab > li {
  width: 160px;
  margin: 0 6px;
  }
  .tab-block > .uk-tab > li > a {
  border: 1px solid #00a19b;
  color: #00a19b;
  padding: 16px;
  border-radius: 8px;
  }
  .tab-block > .uk-tab > .uk-active::after {
  position: static;
  width: 0;
  height: 0;
  border-width: 14px;
  border-style: solid;
  border-color: #00a19b transparent transparent transparent;
  border-radius: 0;
  margin: 0 auto;
  background: transparent;
  }
  .tab-block > .uk-tab > .uk-active > a {
  background: #00a19b;
  color: #fff;
  }
複製