Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update overview for mobile #1297

Merged
merged 1 commit into from
Apr 22, 2023
Merged

docs: update overview for mobile #1297

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 122 additions & 15 deletions docs/mobile/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: 将根据业务实践持续新增组件类型，敬请留意组件
spline: explain
---

<h3>基础<em class="tag">3</em></h3>
<h3>基础<em class="tag">5</em></h3>
<section class="image-group">
<div class="image-wrapper">
<a class="item" href="./components/button">
Expand All @@ -22,31 +22,54 @@ spline: explain
</a>
</div>

<div class="image-wrapper">
<a class="item" href="./components/fab">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-fab.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-fab-dark.png" />
<p class="name">Fab 悬浮按钮</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>

<div class="image-wrapper">
<a class="item" href="./components/link">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-link.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-link-dark.png" />
<p class="name">Link 链接</p>
</a>
</div>
</section>

<h3>导航<em class="tag">6</em></h3>
<h3>导航<em class="tag">7</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 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/drawer">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-drawer.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-drawer-dark.png" />
<p class="name">Drawer 抽屉</p>
</a>
</div>
<!-- <div class="image-wrapper">
<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>
<div class="image-wrapper">
<a class="item" href="./components/navbar">
<img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-navbar.png" />
Expand Down Expand Up @@ -76,8 +99,22 @@ spline: explain
</a>
</div>
</section>
<h3>输入<em class="tag">12</em></h3>
<h3>输入<em class="tag">14</em></h3>
<section class="image-group">
<div class="image-wrapper">
<a class="item" href="./components/calendar">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-calendar.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-calendar-dark.png" />
<p class="name">Calendar 日历</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/cascader">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-cascader.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-cascader-dark.png" />
<p class="name">Cascader 级联选择器</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/checkbox">
<img class="__light__" src="https://tdesign.gtimg.com/site/mobile/doc-checkbox.png" />
Expand Down Expand Up @@ -164,7 +201,7 @@ spline: explain
</div>
</section>

<h3>数据展示<em class="tag">10</em></h3>
<h3>数据展示<em class="tag">16</em></h3>
<section class="image-group">
<div class="image-wrapper">
<a class="item" href="./components/avatar">
Expand All @@ -187,13 +224,34 @@ spline: explain
<p class="name">Cell 单元格</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/collapse">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-collapse.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-collapse-dark.png" />
<p class="name">Collapse 折叠面板</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/empty">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-empty.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-empty-dark.png" />
<p class="name">Empty 空状态</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/footer">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-footer.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-footer-dark.png" />
<p class="name">Footer 页脚</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" />
Expand All @@ -208,6 +266,27 @@ spline: explain
<p class="name">Image 图片</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/image-viewer">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-imageviewer.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-imageviewer-dark.png" />
<p class="name">ImageViewer 图片预览</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/progress">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-progress.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-progress-dark.png" />
<p class="name">Progress 进度条</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/result">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-result.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-result-dark.png" />
<p class="name">Result 结果</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" />
Expand Down Expand Up @@ -238,13 +317,13 @@ spline: explain
</div>
</section>

<h3>消息提醒<em class="tag">7</em></h3>
<h3>反馈<em class="tag">11</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 class="item" href="./components/action-sheet">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet-dark.png" />
<p class="name">ActionSheet 动作面板</p>
</a>
</div>
<div class="image-wrapper">
Expand All @@ -254,6 +333,13 @@ spline: explain
<p class="name">Dialog 对话框</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/dropdown-menu">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu-dark.png" />
<p class="name">DropdownMenu 下拉菜单</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" />
Expand All @@ -268,13 +354,34 @@ spline: explain
<p class="name">Message 全局提示</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/notice-bar">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-noticebar.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-noticebar-dark.png" />
<p class="name">NoticeBar 消息提醒</p>
</a>
</div>
<div class="image-wrapper">
<a class="item" href="./components/overlay">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-overlay.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-overlay-dark.png" />
<p class="name">Overlay 遮罩层</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/pull-down-refresh">
<img class="__light__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-pulldownrefresh.png" />
<img class="__dark__" src="https://tdesign.gtimg.com/site/miniprogram-doc/doc-pulldownrefresh-dark.png" />
<p class="name">PullDownRefresh 下拉刷新</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" />
Expand Down