๐tabs control
โฑ๐ง under construction
custom โฉ element โฉ tabs control
[0.0.1]๏ผChatGPT ็ข็
[0.0.2]๏ผๅๆ ็ข็ tab buttons
[0.0.3]๏ผ่ฝ็บ web componentใ
codepen๏ผtab button/content ่็บไธ้ซ(button, content ไน้ๆฒๅ็ท)
(Gemini)(0.0.1)๏ผไฝฟ็จ
<details>/<summary>(Gemini)(0.0.2)๏ผไฝฟ็จ HTML/CSS/JS ่ช่ฃฝ
(Gemini)(0.0.3)๏ผ่ชๅ็ข็ tab-buttons
(Gemini)(0.0.4)๏ผ่ฝ็บ web componentใ
(Gemini)(0.0.5)๏ผ+ default slot
(Gemini)(0.0.6)๏ผ+ static property ( ๐ init static property)
codepen๏ผtab button/content ่็บไธ้ซ
:root {
--bgcolor: lightgreen; /* ๅบ่ฒ */
background: #222;
}
.tabs {
display: flex;
}
.tabs button {
padding: 10px;
cursor: pointer;
background: #eee;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.tabs button.active {
font-weight: bold;
background: var(--bgcolor);
/* โญ๏ธ ็ขบไฟๆ้็ท่ฒผๅฎนๅจ้ๆก */
margin-bottom: -1px;
/* โญ๏ธ ๅบ็ทๅปๆๅกๆๅบ่ฒ๏ผ่ๆ .content ็้็ท */
border-bottom: 1px solid var(--bgcolor);
}
.content {
padding: 10px 20px;
background: var(--bgcolor);
border: 1px solid #ccc;
border-radius: 0 8px 8px 8px;
}Last updated
Was this helpful?