---
description: ╱🚧 under construction
---

# tabs control

[custom](..) ⟩ [element]() ⟩ tabs control

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="💈GPT" %}
* \[[0.0.1](https://codepen.io/pegasusroe/pen/xbKrxjQ)]：ChatGPT 產生
* \[[0.0.2](https://codepen.io/pegasusroe/pen/YPKQPGq)]：動態產生 tab buttons
* \[[0.0.3](https://codepen.io/pegasusroe/pen/GgKEgby)]：轉為 [web component](../../../component)。
* [codepen](https://codepen.io/pegasusroe/pen/yyBXmWZ)：tab button/content 融為一體(button, content 之間沒劃線)
{% endtab %}

{% tab title="💈Gemini" %}
* [(Gemini)(0.0.1)](https://codepen.io/pegasusroe/pen/MYgoZwV)：使用 <mark style="color:blue;">`<details>`</mark> / <mark style="color:blue;">`<summary>`</mark>
* [(Gemini)(0.0.2)](https://codepen.io/pegasusroe/pen/ZYzyVpj)：使用 HTML/CSS/JS 自製
* [(Gemini)(0.0.3)](https://codepen.io/pegasusroe/pen/dPbRwJY)：自動產生 tab-buttons
* [(Gemini)(0.0.4)](https://codepen.io/pegasusroe/pen/zxOzygY)：轉為 [web component](../../../component)。
* (Gemini)([0.0.5](https://codepen.io/pegasusroe/pen/KwPqJqj))：+ default slot
* (Gemini)([0.0.6](https://codepen.io/pegasusroe/pen/XJrgLxE))：+ static property  ( :point\_right: [init](../../../js/val/class/member/static/init "mention"))
{% endtab %}

{% tab title="💈範例" %}
[codepen](https://codepen.io/pegasusroe/pen/yyBXmWZ)：tab button/content 融為一體

{% embed url="https://codepen.io/pegasusroe/pen/yyBXmWZ" %}

```css
: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;
}
```
{% endtab %}
{% endtabs %}
