Cutest UI 样式框架

基本用法

标签组件由标签导航和标签内容两部分组成，通过data属性和ID进行关联。

<div class="tabs">
  <div class="tab-nav">
    <button class="tab-btn active" data-tab="tab1">标签1</button>
    <button class="tab-btn" data-tab="tab2">标签2</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel active" id="tab1">内容1</div>
    <div class="tab-panel" id="tab2">内容2</div>
  </div>
</div>

变体类型

JavaScript API

标签组件的切换通过JavaScript实现，核心逻辑如下：

document.addEventListener('DOMContentLoaded', function () {
  // 获取所有标签按钮
  const tabButtons = document.querySelectorAll('.tab-btn');
  
  // 为每个标签按钮添加点击事件
  tabButtons.forEach(button => {
    button.addEventListener('click', function () {
      // 获取目标标签ID
      const tabId = this.getAttribute('data-tab');
      // 获取所属标签组
      const tabs = this.closest('.tabs');
      
      // 移除同组所有标签的激活状态
      tabs.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      
      // 隐藏所有标签内容
      tabs.querySelectorAll('.tab-panel').forEach(panel => {
        panel.classList.remove('active');
      });
      
      // 添加当前标签的激活状态
      this.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    });
  });
});

最佳实践

• 确保每个标签按钮的data-tab属性与对应的标签面板ID匹配
• 在初始化时，至少设置一个标签按钮和标签面板为激活状态（添加active类）
• 使用适当的标签变体以匹配整体设计风格
• 对于禁用的标签，可以添加disabled属性
• 标签内容应保持相关主题，避免内容差异过大