三分鐘，純 CSS 實(shí)現(xiàn)一個(gè) tabs 組件
作者：程序員Sunday
tabs? 組件是在日常開(kāi)發(fā)中的常見(jiàn)組件，很多同學(xué)表示：組件庫(kù)的 tabs 不好看，自己實(shí)現(xiàn)又不知道怎么去做。所以說(shuō)，今天，咱們就花上幾分鐘的時(shí)間，通過(guò)純 css? 的方式來(lái)實(shí)現(xiàn)一個(gè) tabs? 組件，以幫助大家完成自定義 tabs 組件的邏輯。
Hello，大家好，我是 Sunday。
tabs 組件是在日常開(kāi)發(fā)中的常見(jiàn)組件，很多同學(xué)表示：組件庫(kù)的 tabs 不好看，自己實(shí)現(xiàn)又不知道怎么去做。
所以說(shuō)，今天，咱們就花上幾分鐘的時(shí)間，通過(guò)純 css 的方式來(lái)實(shí)現(xiàn)一個(gè) tabs 組件，以幫助大家完成自定義 tabs 組件的邏輯。
最終效果圖
html 部分
先上代碼：
<div class="container">
<div class="tabs">
<input type="radio" id="radio-1" name="tabs" checked="" />
<label class="tab" for="radio-1">
首頁(yè)
<span class="notification">2</span>
</label>
<input type="radio" id="radio-2" name="tabs" />
<label class="tab" for="radio-2">分類</label>
<input type="radio" id="radio-3" name="tabs" />
<label class="tab" for="radio-3">我的</label>
<span class="glider"></span>
</div>
</div>這里需要 注意：在 html 部分需要設(shè)計(jì)成 input + label 的形式，而不能使用 div 的方案。
核心原因有兩點(diǎn)：
- input[type='radio'] 元素天生就具有 互斥性，即只能選中一個(gè)。這使得在實(shí)現(xiàn)多選一的標(biāo)簽頁(yè)功能時(shí)非常簡(jiǎn)便和自然，無(wú)需手動(dòng)管理狀態(tài)。
- 當(dāng)選擇某個(gè)標(biāo)簽頁(yè)時(shí)，其對(duì)應(yīng)的 radio 按鈕會(huì)被選中，而 CSS 可以通過(guò) :checked 偽類來(lái)捕捉這一狀態(tài)的變化，從而觸發(fā)樣式變化，比如滑塊的移動(dòng)、文本顏色的變化等。
整個(gè) HTML 結(jié)構(gòu)設(shè)計(jì)邏輯如下：
- container：最外層容器，用于包裹整個(gè)標(biāo)簽頁(yè)組件。
- tabs：用于包含標(biāo)簽頁(yè)的所有內(nèi)容，包括input、label和glider滑塊。
- input[type='radio']：作為標(biāo)簽頁(yè)的控制器，決定哪個(gè)標(biāo)簽頁(yè)被選中。每個(gè)標(biāo)簽頁(yè)對(duì)應(yīng)一個(gè)radio按鈕，三個(gè)input元素的id和label元素的for屬性配對(duì)，使得點(diǎn)擊label可以選擇對(duì)應(yīng)的radio按鈕。
- label.tab：每個(gè)標(biāo)簽頁(yè)的實(shí)際顯示部分，包括文字和可選的通知標(biāo)記notification。
- glider：滑塊，用于在標(biāo)簽頁(yè)切換時(shí)移動(dòng)，表示當(dāng)前選擇的標(biāo)簽頁(yè)。
CSS樣式
body {
padding: 300px;
}
.tabs {
width: 152px;
display: flex;
position: relative;
background-color: #fff;
box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
padding: 12px;
border-radius: 99px;
}- body：在body中添加了padding，使頁(yè)面內(nèi)容離頂部和邊界有一定的距離，便于演示。
- tabs：設(shè)置了tabs容器的寬度（152px），使用flex布局，子元素排列在一行。容器具有一定的陰影效果和圓角，使其更具層次感。
.tabs * {
z-index: 2;
}- 將tabs內(nèi)部的所有元素的z-index設(shè)置為2，確保這些元素位于滑塊（glider）之上。
.container input[type='radio'] {
display: none;
}- 隱藏radio按鈕，只保留它們的功能，不顯示在頁(yè)面上。
.tab {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 50px;
font-size: 14px;
color: black;
font-weight: 500;
border-radius: 99px;
cursor: pointer;
transition: color 0.15s ease-in;
}- 每個(gè)標(biāo)簽頁(yè)label.tab設(shè)置了固定的大小，字體樣式和顏色。使用flex布局使文本居中，邊角圓滑，鼠標(biāo)懸停時(shí)呈現(xiàn)為點(diǎn)擊手勢(shì)。使用transition實(shí)現(xiàn)顏色過(guò)渡效果。
.notification {
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
position: absolute;
top: 10px;
left: 30%;
font-size: 10px;
margin-left: 10px;
border-radius: 50%;
background-color: #e6eef9;
transition: 0.15s ease-in;
}- notification是標(biāo)簽頁(yè)上的小圓點(diǎn)，用于顯示通知數(shù)量。設(shè)置了大小、位置、字體大小和顏色。transition使背景色和位置的變化更為平滑。
.container input[type='radio']:checked + label {
color: #185ee0;
}
.container input[type='radio']:checked + label > .notification {
background-color: #185ee0;
color: #fff;
margin: 0px;
}- 當(dāng)radio按鈕被選中時(shí)，相應(yīng)的label顏色變?yōu)樗{(lán)色，通知標(biāo)記的背景色和文本顏色也會(huì)改變。
.container input[id='radio-1']:checked ~ .glider {
transform: translateX(0);
}
.container input[id='radio-2']:checked ~ .glider {
transform: translateX(100%);
}
.container input[id='radio-3']:checked ~ .glider {
transform: translateX(200%);
}- 通過(guò)CSS選擇器，當(dāng)某個(gè)radio按鈕被選中時(shí)，glider滑塊將根據(jù)不同的radio按鈕移動(dòng)相應(yīng)的距離，translateX是基于父容器的寬度（這里是152px）。
.glider {
position: absolute;
display: flex;
height: 30px;
width: 50px;
background-color: #e6eef9;
z-index: 1;
border-radius: 99px;
transition: 0.25s ease-out;
}- glider的樣式定義了滑塊的大小、位置和顏色，設(shè)置為absolute以便在容器內(nèi)自由移動(dòng)，transition使其移動(dòng)平滑。
責(zé)任編輯：武曉燕
來(lái)源：
程序員Sunday
