👔tabs control

╱🚧 under construction

custom ⟩ element ⟩ tabs control

💈GPT

• [0.0.1]：ChatGPT 產生

• [0.0.2]：動態產生 tab buttons

• [0.0.3]：轉為 web component。

• codepen：tab button/content 融為一體(button, content 之間沒劃線)

💈Gemini

• (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;
}