> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/appendix/custom/element/tabs-control.md).

# tabs control

╱🚧 under construction

[custom](/web/appendix/custom.md) ⟩ [element](/web/appendix/custom/element.md) ⟩ 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](/web/component.md)。
* [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](/web/component.md)。
* (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 static property](/web/js/val/class/member/static/init.md))
  {% 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 %}