---
title: 组件概览
description: 将根据业务实践持续新增组件类型，敬请留意组件库更新日志。
spline: explain
---

<h3>基础<em class="tag">3</em></h3>
<section class="image-group">
  <div class="image-wrapper">
    <a class="item" href="./components/button">
      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-button.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-button-dark.png" />
      <p class="name">Button 按钮</p>
    </a>
  </div>

  <div class="image-wrapper">
    <a class="item" href="./components/divider">
      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-divider.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-divider-dark.png" />
      <p class="name">Divider 分割线</p>
    </a>
  </div>

  <div class="image-wrapper">
    <a class="item" href="./components/icon">
      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-icon.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-icon-dark.png" />
      <p class="name">Icon 图标</p>
    </a>
  </div>
</section>

<h3>导航<em class="tag">6</em></h3>
<section class="image-group">
  <div class="image-wrapper">
    <a class="item" href="./components/dropdown-menu">
      <img class="__light__" src="https://tdesign.gtimg.com/site/doc/doc-dropdown.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/doc/doc-dropdown-dark.png" />
      <p class="name">DropdownMenu 下拉菜单</p>
    </a>
  </div>
	<!-- <div class="image-wrapper">
    <a class="item" href="./components/indexes">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-indexes-dark.png" />
      <p class="name">Indexes 索引</p>
    </a>
  </div> -->
  <div class="image-wrapper">
    <a class="item" href="./components/navbar">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar-dark.png" />
      <p class="name">Navbar 导航条</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/steps">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-steps.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-steps-dark.png" />
      <p class="name">Steps 步骤条</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/tabbar">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabbar-dark.png" />
      <p class="name">TabBar 标签栏</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/tabs">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tabs-dark.png" />
      <p class="name">Tabs 选项卡</p>
    </a>
  </div>
</section>
<h3>输入<em class="tag">12</em></h3>
<section class="image-group">
  <div class="image-wrapper">
    <a class="item" href="./components/checkbox">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox-dark.png" />
      <p class="name">CheckBox 多选框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/date-time-picker">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-datetimepicker-dark.png" />
      <p class="name">DateTimePicker 日期选择器</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/input">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-input.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-input-dark.png" />
      <p class="name">Input 输入框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/picker">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-picker.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-picker-dark.png" />
      <p class="name">Picker 选择器</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/radio">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-radio.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-radio-dark.png" />
      <p class="name">Radio 单选框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/rate">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-rate.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-rate-dark.png" />
      <p class="name">Rate 评分</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/search">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-search.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-search-dark.png" />
      <p class="name">Search 搜索框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/slider">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-slider.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-slider-dark.png" />
      <p class="name">Slider 滑动选择器</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/stepper">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-stepper-dark.png" />
      <p class="name">Stepper 步进器</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/switch">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-switch.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-switch-dark.png" />
      <p class="name">Switch 开关</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/textarea">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-textarea-dark.png" />
      <p class="name">Textarea 多行文本框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/upload">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-upload.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-upload-dark.png" />
      <p class="name">Upload 上传</p>
    </a>
  </div>
</section>

<h3>数据展示<em class="tag">10</em></h3>
<section class="image-group">
  <div class="image-wrapper">
    <a class="item" href="./components/avatar">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-avatar-dark.png" />
      <p class="name">Avatar 头像</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/badge">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-badge.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-badge-dark.png" />
      <p class="name">Badge 徽章</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/cell">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-cell.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-cell-dark.png" />
      <p class="name">Cell 单元格</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/count-down">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-countdown-dark.png" />
      <p class="name">CountDown 倒计时</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/grid">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-grid.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-grid-dark.png" />
      <p class="name">Grid 宫格</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/image">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-image.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-image-dark.png" />
      <p class="name">Image 图片</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/skeleton">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-skeleton-dark.png" />
      <p class="name">Skeleton 骨架屏</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/sticky">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-sticky-dark.png" />
      <p class="name">Sticky 吸顶容器</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/swiper">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swiper-dark.png" />
      <p class="name">Swiper 轮播图</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/tag">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-tag.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-tag-dark.png" />
      <p class="name">Tag 标签</p>
    </a>
  </div>
</section>

<h3>消息提醒<em class="tag">7</em></h3>
<section class="image-group">
  <div class="image-wrapper">
    <a class="item" href="./components/back-top">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-backtop-dark.png" />
      <p class="name">BackTop 返回顶部</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/dialog">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-dialog-dark.png" />
      <p class="name">Dialog 对话框</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/loading">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-loading.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-loading-dark.png" />
      <p class="name">Loading 加载</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/message">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-message.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-message-dark.png" />
      <p class="name">Message 全局提示</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/popup">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-popup.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-popup-dark.png" />
      <p class="name">Popup 弹出层</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/swipe-cell">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-swipecell-dark.png" />
      <p class="name">SwipeCell 滑动操作</p>
    </a>
  </div>
  <div class="image-wrapper">
    <a class="item" href="./components/toast">
      <img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-toast.png" />
      <img class="__dark__" src="https://tdesign.gtimg.com/site/mobile/doc-toast-dark.png" />
      <p class="name">Toast 轻提示</p>
    </a>
  </div>
</section>
