参考资料

1. xls表格怎么制作表格
2. web component ui组件库
3. docx和doc的区别
4. docx是word文件吗
5. xlsx和excel一样吗
6. docx和doc的哪个好
7. xls是什么文件
8. doc是什么意思

Web原生UI组件库说明及案例

基本概念

Web原生UI组件库是指基于HTML、CSS和JavaScript标准技术构建的可复用用户界面组件集合，不依赖任何框架。

核心组件类型

1. 表单组件

• 输入框(input)

• 选择框(select)

• 复选框(checkbox)

• 单选按钮(radio)

• 按钮(button)

2. 导航组件

• 菜单(nav)

• 标签页(tabs)

• 面包屑(breadcrumb)

3. 内容展示

• 卡片(card)

• 表格(table)

• 列表(list)

• 模态框(dialog)

4. 反馈组件

• 提示框(alert)

• 加载指示器(spinner)

• 进度条(progress)

实现案例

1. 原生模态框实现

<button id="openModal">打开模态框</button>

<dialog id="modal">
  <h2>标题</h2>
  <p>这是模态框内容</p>
  <button id="closeModal">关闭</button>
</dialog>

<script>
  const modal = document.getElementById('modal');
  document.getElementById('openModal').addEventListener('click', () => {
    modal.showModal();
  });
  document.getElementById('closeModal').addEventListener('click', () => {
    modal.close();
  });
</script>

<style>
  dialog {
    border: none;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
</style>

2. 自定义下拉选择框

<div class="custom-select">
  <select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <span class="custom-arrow"></span>
</div>

<style>
  .custom-select {
    position: relative;
    width: 200px;
  }
  .custom-select select {
    width: 100%;
    padding: 8px;
    appearance: none;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .custom-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
  }
</style>

3. 标签页组件

<div class="tabs">
  <div class="tab-header">
    <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 id="tab1" class="tab-pane active">内容1</div>
    <div id="tab2" class="tab-pane">内容2</div>
  </div>
</div>

<script>
  document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const tabId = btn.dataset.tab;
      
      // 移除所有active类
      document.querySelectorAll('.tab-btn, .tab-pane').forEach(el => {
        el.classList.remove('active');
      });
      
      // 添加active类到当前按钮和对应内容
      btn.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    });
  });
</script>

<style>
  .tab-header {
    display: flex;
    border-bottom: 1px solid #ddd;
  }
  .tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .tab-btn.active {
    border-bottom: 2px solid blue;
  }
  .tab-pane {
    display: none;
    padding: 20px;
  }
  .tab-pane.active {
    display: block;
  }
</style>

优势

1. 无框架依赖，性能高效

2. 浏览器原生支持，兼容性好

3. 体积小，加载速度快

4. 可渐进增强，与现代框架兼容

注意事项

1. 需要处理浏览器兼容性问题

2. 部分组件需要手动实现交互逻辑

3. 样式需要自行维护一致性

4. 对于