From ac0d95a3baa2d4e1bac304f3250d9cfeddbd880a Mon Sep 17 00:00:00 2001 From: anlyyao Date: Thu, 29 Jun 2023 20:01:20 +0800 Subject: [PATCH] docs: add EN docs for mobile --- package.json | 2 +- site/docs.config.js | 959 ++++++++++-------- site/docs/getting-started.en-US.md | 168 +++ site/docs/getting-started.md | 4 +- site/web/app.vue | 10 +- site/web/main.ts | 4 + site/web/plugin-tdoc/md-to-vue.js | 14 +- site/web/plugin-tdoc/transforms.js | 39 +- site/web/router.ts | 18 +- src/_common | 2 +- src/back-top/back-top.en-US.md | 19 + src/back-top/back-top.md | 2 +- .../date-time-picker.en-US.md | 32 + src/fab/fab.en-US.md | 19 + src/fab/fab.md | 4 +- src/fab/type.ts | 2 +- src/icon/icon.en-US.md | 53 + src/sticky/sticky.en-US.md | 19 + 18 files changed, 926 insertions(+), 444 deletions(-) create mode 100644 site/docs/getting-started.en-US.md create mode 100644 src/back-top/back-top.en-US.md create mode 100644 src/date-time-picker/date-time-picker.en-US.md create mode 100644 src/fab/fab.en-US.md create mode 100644 src/sticky/sticky.en-US.md diff --git a/package.json b/package.json index 59009bbee..f001e8eb3 100644 --- a/package.json +++ b/package.json @@ -165,7 +165,7 @@ "rollup-pluginutils": "^2.8.2", "tdesign-icons-view": "^0.1.6", "tdesign-publish-cli": "^0.0.10", - "tdesign-site-components": "^0.11.19", + "tdesign-site-components": "^0.13.1", "tslib": "^2.3.1", "typescript": "~4.7.2", "vite": "^2.9.14", diff --git a/site/docs.config.js b/site/docs.config.js index d706374ef..d3e4b46bd 100644 --- a/site/docs.config.js +++ b/site/docs.config.js @@ -1,408 +1,551 @@ -export default { - docs: [ - { - title: '开始', - type: 'document', // 普通文档 - children: [ - { - title: '快速开始', - name: 'getting-started', - path: '/mobile-vue/getting-started', - component: () => import('@docs/getting-started.md'), - }, - { - title: '更新日志', - name: 'changelog', - path: '/mobile-vue/changelog', - component: () => import('@/../CHANGELOG.md'), - }, - { - title: '组件概览', - name: 'overview', - path: '/mobile-vue/overview', - component: () => import('@/_common/docs/mobile/overview.md'), - }, - ], - }, - { - title: '基础组件', - type: 'component', // 组件文档 - children: [ - { - title: 'Button 按钮', - name: 'button', - path: '/mobile-vue/components/button', - component: () => import('@/button/button.md'), - }, - { - title: 'Divider 分割符', - name: 'divider', - path: '/mobile-vue/components/divider', - component: () => import('@/divider/divider.md'), - }, - { - title: 'Fab 悬浮按钮', - name: 'fab', - path: '/mobile-vue/components/fab', - component: () => import('@/fab/fab.md'), - }, - { - title: 'Icon 图标', - name: 'icon', - path: '/mobile-vue/components/icon', - component: () => import('@/icon/icon.md'), - }, - { - title: 'Link 链接', - name: 'link', - path: '/mobile-vue/components/link', - component: () => import('@/link/link.md'), - }, - ], - }, - { - title: '导航', - type: 'component', - children: [ - { - title: 'BackTop 返回顶部', - name: 'back-top', - meta: { docType: 'base' }, - path: '/mobile-vue/components/back-top', - component: () => import('@/back-top/back-top.md'), - }, - { - title: 'Drawer 抽屉', - name: 'drawer', - path: '/mobile-vue/components/drawer', - component: () => import('@/drawer/drawer.md'), - }, - { - title: 'Indexes 索引', - name: 'indexes', - path: '/mobile-vue/components/indexes', - component: () => import('@/indexes/indexes.md'), - }, - { - title: 'Navbar 导航条', - name: 'navbar', - path: '/mobile-vue/components/navbar', - component: () => import('@/navbar/navbar.md'), - }, - { - title: 'SideBar 侧边栏', - name: 'side-bar', - path: '/mobile-vue/components/side-bar', - component: () => import('@/side-bar/side-bar.md'), - }, - { - title: 'Steps 步骤条', - name: 'steps', - path: '/mobile-vue/components/steps', - component: () => import('@/steps/steps.md'), - }, - { - title: 'TabBar 标签栏', - name: 'tab-bar', - path: '/mobile-vue/components/tabbar', - component: () => import('@/tab-bar/tab-bar.md'), - }, - { - title: 'Tabs 选项卡', - name: 'tabs', - path: '/mobile-vue/components/tabs', - component: () => import('@/tabs/tabs.md'), - }, - ], - }, - { - title: '输入', - type: 'component', - children: [ - { - title: 'Form 表单', - name: 'form', - path: '/mobile-vue/components/form', - component: () => import('@/form/form.md'), - }, - { - title: 'Calendar 日历', - name: 'calendar', - path: '/mobile-vue/components/calendar', - component: () => import('@/calendar/calendar.md'), - }, - { - title: 'CheckBox 复选框', - name: 'checkbox', - path: '/mobile-vue/components/checkbox', - component: () => import('@/checkbox/checkbox.md'), - }, - { - title: 'Input 输入框', - name: 'input', - path: '/mobile-vue/components/input', - component: () => import('@/input/input.md'), - }, - { - title: 'Textarea 多行输入框', - name: 'textarea', - path: '/mobile-vue/components/textarea', - component: () => import('@/textarea/textarea.md'), - }, - { - title: 'Picker 选择器', - name: 'picker', - path: '/mobile-vue/components/picker', - component: () => import('@/picker/picker.md'), - }, - { - title: 'DateTimePicker 时间选择器', - name: 'date-time-picker', - path: '/mobile-vue/components/date-time-picker', - component: () => import('@/date-time-picker/date-time-picker.md'), - }, - { - title: 'Radio 单选框', - name: 'radio', - path: '/mobile-vue/components/radio', - component: () => import('@/radio/radio.md'), - }, - { - title: 'Rate 评分', - name: 'rate', - path: '/mobile-vue/components/rate', - component: () => import('@/rate/rate.md'), - }, - { - title: 'Stepper 步进器', - name: 'stepper', - path: '/mobile-vue/components/stepper', - component: () => import('@/stepper/stepper.md'), - }, - { - title: 'Switch 开关', - name: 'switch', - path: '/mobile-vue/components/switch', - component: () => import('@/switch/switch.md'), - }, - { - title: 'Search 搜索框', - name: 'search', - path: '/mobile-vue/components/search', - component: () => import('@/search/search.md'), - }, - { - title: 'Slider 滑动选择器', - name: 'slider', - path: '/mobile-vue/components/slider', - component: () => import('@/slider/slider.md'), - }, - { - title: 'Upload 上传', - name: 'upload', - path: '/mobile-vue/components/upload', - component: () => import('@/upload/upload.md'), - }, - { - title: 'Cascader 级联选择器', - name: 'cascader', - path: '/mobile-vue/components/cascader', - component: () => import('@/cascader/cascader.md'), - }, - ], - }, - { - title: '数据展示', - type: 'component', - children: [ - { - title: 'Cell 单元格', - name: 'cell', - path: '/mobile-vue/components/cell', - component: () => import('@/cell/cell.md'), - }, - { - title: 'Grid 宫格', - name: 'grid', - path: '/mobile-vue/components/grid', - component: () => import('@/grid/grid.md'), - }, - { - title: 'Footer 页脚', - name: 'footer', - meta: { docType: 'data' }, - path: '/mobile-vue/components/footer', - component: () => import('@/footer/footer.md'), - }, - { - title: 'Image 图片', - name: 'image', - path: '/mobile-vue/components/image', - component: () => import('@/image/image.md'), - }, - { - title: 'Avatar 头像', - name: 'avatar', - path: '/mobile-vue/components/avatar', - component: () => import('@/avatar/avatar.md'), - }, - { - title: 'Badge 徽标', - name: 'badge', - path: '/mobile-vue/components/badge', - component: () => import('@/badge/badge.md'), - }, - { - title: 'CountDown 倒计时', - name: 'count-down', - path: '/mobile-vue/components/count-down', - component: () => import('@/count-down/count-down.md'), - }, - { - title: 'Empty 空状态', - name: 'empty', - path: '/mobile-vue/components/empty', - component: () => import('@/empty/empty.md'), - }, - { - title: 'Tag 标签', - name: 'tag', - path: '/mobile-vue/components/tag', - component: () => import('@/tag/tag.md'), - }, - { - title: 'Collapse 折叠面板', - name: 'collapse', - path: '/mobile-vue/components/collapse', - component: () => import('@/collapse/collapse.md'), - }, - { - title: 'Sticky 吸顶容器', - name: 'sticky', - path: '/mobile-vue/components/sticky', - component: () => import('@/sticky/sticky.md'), - }, - { - title: 'Swiper 轮播', - name: 'swiper', - path: '/mobile-vue/components/swiper', - component: () => import('@/swiper/swiper.md'), - }, - { - title: 'Table 表格', - name: 'table', - path: '/mobile-vue/components/table', - component: () => import('@/table/table.md'), - }, - { - title: 'ImageViewer 图片预览', - name: 'image-viewer', - path: '/mobile-vue/components/image-viewer', - component: () => import('@/image-viewer/image-viewer.md'), - }, - { - title: 'Skeleton 骨架屏', - name: 'skeleton', - path: '/mobile-vue/components/skeleton', - component: () => import('@/skeleton/skeleton.md'), - }, - { - title: 'List 列表', - name: 'list', - path: '/mobile-vue/components/list', - component: () => import('@/list/list.md'), - }, - { - title: 'Result 结果', - name: 'result', - path: '/mobile-vue/components/result', - component: () => import('@/result/result.md'), - }, - { - title: 'Progress 进度条', - name: 'progress', - path: '/mobile-vue/components/progress', - component: () => import('@/progress/progress.md'), - }, - ], - }, - { - title: '反馈', - type: 'component', // 组件文档 - children: [ - { - title: 'DropdownMenu 下拉菜单', - name: 'dropdown-menu', - path: '/mobile-vue/components/dropdown-menu', - component: () => import('@/dropdown-menu/dropdown-menu.md'), - }, - { - title: 'PullDownRefresh 下拉刷新', - name: 'pull-down-refresh', - path: '/mobile-vue/components/pull-down-refresh', - component: () => import('@/pull-down-refresh/pull-down-refresh.md'), - }, - { - title: 'ActionSheet 动作面板', - name: 'action-sheet', - path: '/mobile-vue/components/actionsheet', - component: () => import('@/action-sheet/action-sheet.md'), - }, - { - title: 'Toast 轻提示', - name: 'toast', - path: '/mobile-vue/components/toast', - component: () => import('@/toast/toast.md'), - }, - { - title: 'Message 消息', - name: 'message', - path: '/mobile-vue/components/message', - component: () => import('@/message/message.md'), - }, - { - title: 'Dialog 对话框', - name: 'dialog', - path: '/mobile-vue/components/dialog', - component: () => import('@/dialog/dialog.md'), - }, - { - title: 'Popover 弹出气泡', - name: 'popover', - path: '/mobile-vue/components/popover', - component: () => import('@/popover/popover.md'), - }, - { - title: 'Popup 弹出层', - name: 'popup', - path: '/mobile-vue/components/popup', - component: () => import('@/popup/popup.md'), - }, - { - title: 'Overlay 遮罩层', - name: 'overlay', - path: '/mobile-vue/components/overlay', - component: () => import('@/overlay/overlay.md'), - }, - { - title: 'SwipeCell 滑动单元格', - name: 'swipe-cell', - path: '/mobile-vue/components/swipe-cell', - component: () => import('@/swipe-cell/swipe-cell.md'), - }, - { - title: 'NoticeBar 公告栏', - name: 'notice-bar', - path: '/mobile-vue/components/notice-bar', - component: () => import('@/notice-bar/notice-bar.md'), - }, - { - title: 'Loading 加载中', - name: 'loading', - path: '/mobile-vue/components/loading', - component: () => import('@/loading/loading.md'), - }, - ], - }, - ], -}; +export const docs = [ + { + title: '开始', + titleEn: 'Start', + type: 'document', // 普通文档 + children: [ + { + title: '快速开始', + titleEn: 'Getting Started', + name: 'getting-started', + path: '/mobile-vue/getting-started', + component: () => import('@docs/getting-started.md'), + componentEn: () => import('@docs/getting-started.en-US.md'), + }, + { + title: '更新日志', + titleEn: 'CHANGELOG', + name: 'changelog', + path: '/mobile-vue/changelog', + component: () => import('@/../CHANGELOG.md'), + }, + { + title: '组件概览', + titleEn: 'Overview', + name: 'overview', + path: '/mobile-vue/overview', + component: () => import('@/_common/docs/mobile/overview.md'), + componentEn: () => import('@/_common/docs/mobile/overview.en-US.md'), + }, + ], + }, + { + title: '基础组件', + titleEn: 'Base', + type: 'component', // 组件文档 + children: [ + { + title: 'Button 按钮', + titleEn: 'Button', + name: 'button', + path: '/mobile-vue/components/button', + component: () => import('@/button/button.md'), + componentEn: () => import('@/button/button.en-US.md'), + }, + { + title: 'Divider 分割符', + titleEn: 'Divider', + name: 'divider', + path: '/mobile-vue/components/divider', + component: () => import('@/divider/divider.md'), + componentEn: () => import('@/divider/divider.en-US.md'), + }, + { + title: 'Fab 悬浮按钮', + titleEn: 'Fab', + name: 'fab', + path: '/mobile-vue/components/fab', + component: () => import('@/fab/fab.md'), + componentEn: () => import('@/fab/fab.en-US.md'), + }, + { + title: 'Icon 图标', + titleEn: 'Icon', + name: 'icon', + path: '/mobile-vue/components/icon', + component: () => import('@/icon/icon.md'), + componentEn: () => import('@/icon/icon.en-US.md'), + }, + { + title: 'Link 链接', + titleEn: 'Link', + name: 'link', + path: '/mobile-vue/components/link', + component: () => import('@/link/link.md'), + componentEn: () => import('@/link/link.en-US.md'), + }, + ], + }, + { + title: '导航', + titleEn: 'Navigation', + type: 'component', + children: [ + { + title: 'BackTop 返回顶部', + titleEn: 'BackTop', + name: 'back-top', + meta: { docType: 'base' }, + path: '/mobile-vue/components/back-top', + component: () => import('@/back-top/back-top.md'), + componentEn: () => import('@/back-top/back-top.en-US.md'), + }, + { + title: 'Drawer 抽屉', + titleEn: 'Drawer', + name: 'drawer', + path: '/mobile-vue/components/drawer', + component: () => import('@/drawer/drawer.md'), + componentEn: () => import('@/drawer/drawer.en-US.md'), + }, + { + title: 'Indexes 索引', + titleEn: 'Indexes', + name: 'indexes', + path: '/mobile-vue/components/indexes', + component: () => import('@/indexes/indexes.md'), + componentEn: () => import('@/indexes/indexes.en-US.md'), + }, + { + title: 'Navbar 导航条', + titleEn: 'Navbar', + name: 'navbar', + path: '/mobile-vue/components/navbar', + component: () => import('@/navbar/navbar.md'), + componentEn: () => import('@/navbar/navbar.en-US.md'), + }, + { + title: 'SideBar 侧边栏', + titleEn: 'SideBar', + name: 'side-bar', + path: '/mobile-vue/components/side-bar', + component: () => import('@/side-bar/side-bar.md'), + componentEn: () => import('@/side-bar/side-bar.en-US.md'), + }, + { + title: 'Steps 步骤条', + titleEn: 'Steps', + name: 'steps', + path: '/mobile-vue/components/steps', + component: () => import('@/steps/steps.md'), + componentEn: () => import('@/steps/steps.en-US.md'), + }, + { + title: 'TabBar 标签栏', + titleEn: 'TabBar', + name: 'tab-bar', + path: '/mobile-vue/components/tabbar', + component: () => import('@/tab-bar/tab-bar.md'), + componentEn: () => import('@/tab-bar/tab-bar.en-US.md'), + }, + { + title: 'Tabs 选项卡', + titleEn: 'Tabs', + name: 'tabs', + path: '/mobile-vue/components/tabs', + component: () => import('@/tabs/tabs.md'), + componentEn: () => import('@/tabs/tabs.en-US.md'), + }, + ], + }, + { + title: '输入', + titleEn: 'Form', + type: 'component', + children: [ + { + title: 'Form 表单', + titleEn: 'Form', + name: 'form', + path: '/mobile-vue/components/form', + component: () => import('@/form/form.md'), + componentEn: () => import('@/form/form.en-US.md'), + }, + { + title: 'Calendar 日历', + titleEn: 'Calendar', + name: 'calendar', + path: '/mobile-vue/components/calendar', + component: () => import('@/calendar/calendar.md'), + componentEn: () => import('@/calendar/calendar.en-US.md'), + }, + { + title: 'CheckBox 复选框', + titleEn: 'CheckBox', + name: 'checkbox', + path: '/mobile-vue/components/checkbox', + component: () => import('@/checkbox/checkbox.md'), + componentEn: () => import('@/checkbox/checkbox.en-US.md'), + }, + { + title: 'Input 输入框', + titleEn: 'Input', + name: 'input', + path: '/mobile-vue/components/input', + component: () => import('@/input/input.md'), + componentEn: () => import('@/input/input.en-US.md'), + }, + { + title: 'Textarea 多行输入框', + titleEn: 'Textarea', + name: 'textarea', + path: '/mobile-vue/components/textarea', + component: () => import('@/textarea/textarea.md'), + componentEn: () => import('@/textarea/textarea.en-US.md'), + }, + { + title: 'Picker 选择器', + titleEn: 'Picker', + name: 'picker', + path: '/mobile-vue/components/picker', + component: () => import('@/picker/picker.md'), + componentEn: () => import('@/picker/picker.en-US.md'), + }, + { + title: 'DateTimePicker 时间选择器', + titleEn: 'DateTimePicker', + name: 'date-time-picker', + path: '/mobile-vue/components/date-time-picker', + component: () => import('@/date-time-picker/date-time-picker.md'), + componentEn: () => import('@/date-time-picker/date-time-picker.en-US.md'), + }, + { + title: 'Radio 单选框', + titleEn: 'Radio', + name: 'radio', + path: '/mobile-vue/components/radio', + component: () => import('@/radio/radio.md'), + componentEn: () => import('@/radio/radio.en-US.md'), + }, + { + title: 'Rate 评分', + titleEn: 'Rate', + name: 'rate', + path: '/mobile-vue/components/rate', + component: () => import('@/rate/rate.md'), + componentEn: () => import('@/rate/rate.en-US.md'), + }, + { + title: 'Stepper 步进器', + titleEn: 'Stepper', + name: 'stepper', + path: '/mobile-vue/components/stepper', + component: () => import('@/stepper/stepper.md'), + componentEn: () => import('@/stepper/stepper.en-US.md'), + }, + { + title: 'Switch 开关', + titleEn: 'Switch', + name: 'switch', + path: '/mobile-vue/components/switch', + component: () => import('@/switch/switch.md'), + componentEn: () => import('@/switch/switch.en-US.md'), + }, + { + title: 'Search 搜索框', + titleEn: 'Search', + name: 'search', + path: '/mobile-vue/components/search', + component: () => import('@/search/search.md'), + componentEn: () => import('@/search/search.en-US.md'), + }, + { + title: 'Slider 滑动选择器', + titleEn: 'Slider', + name: 'slider', + path: '/mobile-vue/components/slider', + component: () => import('@/slider/slider.md'), + componentEn: () => import('@/slider/slider.en-US.md'), + }, + { + title: 'Upload 上传', + titleEn: 'Upload', + name: 'upload', + path: '/mobile-vue/components/upload', + component: () => import('@/upload/upload.md'), + componentEn: () => import('@/upload/upload.en-US.md'), + }, + { + title: 'Cascader 级联选择器', + titleEn: 'Cascader', + name: 'cascader', + path: '/mobile-vue/components/cascader', + component: () => import('@/cascader/cascader.md'), + componentEn: () => import('@/cascader/cascader.en-US.md'), + }, + ], + }, + { + title: '数据展示', + titleEn: 'Data Display', + type: 'component', + children: [ + { + title: 'Cell 单元格', + titleEn: 'Cell', + name: 'cell', + path: '/mobile-vue/components/cell', + component: () => import('@/cell/cell.md'), + componentEn: () => import('@/cell/cell.en-US.md'), + }, + { + title: 'Grid 宫格', + titleEn: 'Grid', + name: 'grid', + path: '/mobile-vue/components/grid', + component: () => import('@/grid/grid.md'), + componentEn: () => import('@/grid/grid.en-US.md'), + }, + { + title: 'Footer 页脚', + titleEn: 'Footer', + name: 'footer', + meta: { docType: 'data' }, + path: '/mobile-vue/components/footer', + component: () => import('@/footer/footer.md'), + componentEn: () => import('@/footer/footer.en-US.md'), + }, + { + title: 'Image 图片', + titleEn: 'Image', + name: 'image', + path: '/mobile-vue/components/image', + component: () => import('@/image/image.md'), + componentEn: () => import('@/image/image.en-US.md'), + }, + { + title: 'Avatar 头像', + titleEn: 'Avatar', + name: 'avatar', + path: '/mobile-vue/components/avatar', + component: () => import('@/avatar/avatar.md'), + componentEn: () => import('@/avatar/avatar.en-US.md'), + }, + { + title: 'Badge 徽标', + titleEn: 'Badge', + name: 'badge', + path: '/mobile-vue/components/badge', + component: () => import('@/badge/badge.md'), + componentEn: () => import('@/badge/badge.en-US.md'), + }, + { + title: 'CountDown 倒计时', + titleEn: 'CountDown', + name: 'count-down', + path: '/mobile-vue/components/count-down', + component: () => import('@/count-down/count-down.md'), + componentEn: () => import('@/count-down/count-down.en-US.md'), + }, + { + title: 'Empty 空状态', + titleEn: 'Empty', + name: 'empty', + path: '/mobile-vue/components/empty', + component: () => import('@/empty/empty.md'), + componentEn: () => import('@/empty/empty.en-US.md'), + }, + { + title: 'Tag 标签', + titleEn: 'Tag', + name: 'tag', + path: '/mobile-vue/components/tag', + component: () => import('@/tag/tag.md'), + componentEn: () => import('@/tag/tag.en-US.md'), + }, + { + title: 'Collapse 折叠面板', + titleEn: 'Collapse', + name: 'collapse', + path: '/mobile-vue/components/collapse', + component: () => import('@/collapse/collapse.md'), + componentEn: () => import('@/collapse/collapse.en-US.md'), + }, + { + title: 'Sticky 吸顶容器', + titleEn: 'Sticky', + name: 'sticky', + path: '/mobile-vue/components/sticky', + component: () => import('@/sticky/sticky.md'), + componentEn: () => import('@/sticky/sticky.en-US.md'), + }, + { + title: 'Swiper 轮播', + titleEn: 'Swiper', + name: 'swiper', + path: '/mobile-vue/components/swiper', + component: () => import('@/swiper/swiper.md'), + componentEn: () => import('@/swiper/swiper.en-US.md'), + }, + { + title: 'Table 表格', + titleEn: 'Table', + name: 'table', + path: '/mobile-vue/components/table', + component: () => import('@/table/table.md'), + componentEn: () => import('@/table/table.en-US.md'), + }, + { + title: 'ImageViewer 图片预览', + titleEn: 'ImageViewer', + name: 'image-viewer', + path: '/mobile-vue/components/image-viewer', + component: () => import('@/image-viewer/image-viewer.md'), + componentEn: () => import('@/image-viewer/image-viewer.en-US.md'), + }, + { + title: 'Skeleton 骨架屏', + titleEn: 'Skeleton', + name: 'skeleton', + path: '/mobile-vue/components/skeleton', + component: () => import('@/skeleton/skeleton.md'), + componentEn: () => import('@/skeleton/skeleton.en-US.md'), + }, + { + title: 'List 列表', + titleEn: 'List', + name: 'list', + path: '/mobile-vue/components/list', + component: () => import('@/list/list.md'), + componentEn: () => import('@/list/list.en-US.md'), + }, + { + title: 'Result 结果', + titleEn: 'Result', + name: 'result', + path: '/mobile-vue/components/result', + component: () => import('@/result/result.md'), + componentEn: () => import('@/result/result.en-US.md'), + }, + { + title: 'Progress 进度条', + titleEn: 'Progress', + name: 'progress', + path: '/mobile-vue/components/progress', + component: () => import('@/progress/progress.md'), + componentEn: () => import('@/progress/progress.en-US.md'), + }, + ], + }, + { + title: '反馈', + titleEn: 'FeedBack', + type: 'component', // 组件文档 + children: [ + { + title: 'DropdownMenu 下拉菜单', + titleEn: 'DropdownMenu', + name: 'dropdown-menu', + path: '/mobile-vue/components/dropdown-menu', + component: () => import('@/dropdown-menu/dropdown-menu.md'), + componentEn: () => import('@/dropdown-menu/dropdown-menu.en-US.md'), + }, + { + title: 'PullDownRefresh 下拉刷新', + titleEn: 'PullDownRefresh', + name: 'pull-down-refresh', + path: '/mobile-vue/components/pull-down-refresh', + component: () => import('@/pull-down-refresh/pull-down-refresh.md'), + componentEn: () => import('@/pull-down-refresh/pull-down-refresh.en-US.md'), + }, + { + title: 'ActionSheet 动作面板', + titleEn: 'ActionSheet', + name: 'action-sheet', + path: '/mobile-vue/components/actionsheet', + component: () => import('@/action-sheet/action-sheet.md'), + componentEn: () => import('@/action-sheet/action-sheet.en-US.md'), + }, + { + title: 'Toast 轻提示', + titleEn: 'Toast', + name: 'toast', + path: '/mobile-vue/components/toast', + component: () => import('@/toast/toast.md'), + componentEn: () => import('@/toast/toast.en-US.md'), + }, + { + title: 'Message 消息', + titleEn: 'Message', + name: 'message', + path: '/mobile-vue/components/message', + component: () => import('@/message/message.md'), + componentEn: () => import('@/message/message.en-US.md'), + }, + { + title: 'Dialog 对话框', + titleEn: 'Dialog', + name: 'dialog', + path: '/mobile-vue/components/dialog', + component: () => import('@/dialog/dialog.md'), + componentEn: () => import('@/dialog/dialog.en-US.md'), + }, + { + title: 'Popover 弹出气泡', + titleEn: 'Popover', + name: 'popover', + path: '/mobile-vue/components/popover', + component: () => import('@/popover/popover.md'), + componentEn: () => import('@/popover/popover.en-US.md'), + }, + { + title: 'Popup 弹出层', + titleEn: 'Popup', + name: 'popup', + path: '/mobile-vue/components/popup', + component: () => import('@/popup/popup.md'), + componentEn: () => import('@/popup/popup.en-US.md'), + }, + { + title: 'Overlay 遮罩层', + titleEn: 'Overlay', + name: 'overlay', + path: '/mobile-vue/components/overlay', + component: () => import('@/overlay/overlay.md'), + componentEn: () => import('@/overlay/overlay.en-US.md'), + }, + { + title: 'SwipeCell 滑动单元格', + titleEn: 'SwipeCell', + name: 'swipe-cell', + path: '/mobile-vue/components/swipe-cell', + component: () => import('@/swipe-cell/swipe-cell.md'), + componentEn: () => import('@/swipe-cell/swipe-cell.en-US.md'), + }, + { + title: 'NoticeBar 公告栏', + titleEn: 'NoticeBar', + name: 'notice-bar', + path: '/mobile-vue/components/notice-bar', + component: () => import('@/notice-bar/notice-bar.md'), + componentEn: () => import('@/notice-bar/notice-bar.en-US.md'), + }, + { + title: 'Loading 加载中', + titleEn: 'Loading', + name: 'loading', + path: '/mobile-vue/components/loading', + component: () => import('@/loading/loading.md'), + componentEn: () => import('@/loading/loading.en-US.md'), + }, + ], + }, +]; + +const enDocs = docs.map((doc) => { + return { + ...doc, + title: doc.titleEn, + children: doc?.children?.map((child) => { + return { + title: child.titleEn, + name: `${child.name}-en`, + path: `${child.path}-en`, + meta: { lang: 'en' }, + component: child.componentEn || child.component, + }; + }), + }; +}); + +export default { docs, enDocs }; diff --git a/site/docs/getting-started.en-US.md b/site/docs/getting-started.en-US.md new file mode 100644 index 000000000..f4559ccf4 --- /dev/null +++ b/site/docs/getting-started.en-US.md @@ -0,0 +1,168 @@ +--- +title: Vue3 for Mobile +description: TDesign Mobile Vue is a UI component library for Vue 3 and mobile application. +spline: explain +--- + + + +
+ + + + TDesign Mobile Vue is currently in the Beta stage, and it is undergoing rapid iteration, please pay attention to version changes. +
+ +## Installation + +### npm + +```bash +npm i tdesign-mobile-vue +``` + +### unpkg + +```html + + + + +... + +``` + + +The package of tdesign-vue-next provides kinds of bundles, read [the documentation](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) for the detail of differences between bundles. + + +## Usage + +TDesign provides three ways to use components + +### Basic Usage + +Basic usage will register all components in full. If your project uses components on a large scale, feel free to use tdesign-mobile-vue in this way. + +```js +import { createApp } from 'vue'; +import TDesign from 'tdesign-mobile-vue'; +import App from './app.vue'; + +// import global design variables +import 'tdesign-mobile-vue/es/style/index.css'; + +const app = createApp(App); +app.use(TDesign); +``` + +### Import on-demand + +If you have strict requirements for the size of the bundle, you can use tdesign-mobile-vue in this way. + +With the help of building tools such as `Webpack` or `Rollup` that support tree-shaking features, you can achieve the effect of importing on demand. + + +```js +import { createApp } from 'vue'; +import { Button as TButton } from 'tdesign-mobile-vue'; +import App from './app.vue'; + +// import global design variables +import 'tdesign-mobile-vue/es/style/index.css'; + +const app = createApp(App); +app.use(TButton); +``` + +### Import on-demand with Plugin + +You can also use `unplugin-vue-components` and `unplugin-auto-import` to achieve automatic on-demand import. + +```js +import { createApp } from 'vue'; +// import global design variables +import 'tdesign-mobile-vue//es/style/index.css'; + +const app = createApp(App); +``` + +install `unplugin-vue-components` and `unplugin-auto-import` + +```bash +npm install -D unplugin-vue-components unplugin-auto-import +``` + +Then, add the above plugins to the corresponding configuration files of Webpack or Vite. + +#### Vite + +```js +import AutoImport from 'unplugin-auto-import/vite'; +import Components from 'unplugin-vue-components/vite'; +import { TDesignResolver } from 'unplugin-vue-components/resolvers'; +export default { + plugins: [ + // ... + AutoImport({ + resolvers: [TDesignResolver({ + library: 'mobile-vue' + })], + }), + Components({ + resolvers: [TDesignResolver({ + library: 'mobile-vue' + })], + }), + ], +}; +``` + +#### Webpack + +```js +const AutoImport = require('unplugin-auto-import/webpack'); +const Components = require('unplugin-vue-components/webpack'); +const { TDesignResolver } = require('unplugin-vue-components/resolvers'); +module.exports = { + // ... + plugins: [ + AutoImport({ + resolvers: [TDesignResolver({ + library: 'mobile-vue' + })], + }), + Components({ + resolvers: [TDesignResolver({ + library: 'mobile-vue' + })], + }), + ], +}; +``` + +> You can click on this [link](https://github.com/antfu/unplugin-vue-components/blob/main/src/core/resolvers/tdesign.ts#L4) for the configuration supported by `TDesignResolver`. + + + +## Browser Support + +| [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [iOS Safari](http://godban.github.io/browsers-support-badges/)
iOS Safari| [Samsung](http://godban.github.io/browsers-support-badges/)
Samsung | [Opera](http://godban.github.io/browsers-support-badges/)
Opera |[Android Browser]()
Android Browser| +| --------- | --------- | --------- | --------- | --------- |--------- | +| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 | + +Read our [browser compatibility](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility) for more details. + +## FAQ + +Q: Does TDesign have a built-in reset style for unifying the default styles of page elements? + +A: Since version `0.17.0`, tdesign-mobile-vue no longer imports `reset.less`. + +If your project development depends on the `reset` style, you can import it from the `dist` directory. + +```js +import 'tdesign-mobile-vue/dist/reset.css'; +``` diff --git a/site/docs/getting-started.md b/site/docs/getting-started.md index 37d5c8262..287e6f120 100644 --- a/site/docs/getting-started.md +++ b/site/docs/getting-started.md @@ -15,8 +15,6 @@ spline: explain ## 安装 -目前组件库已发布一期组件的测试版本，还在快速迭代，注意留意版本变化 - ### 使用 npm 安装 推荐使用 npm 方式进行开发 @@ -168,4 +166,4 @@ A: `0.25.0` 版本开始我们不再引入 `reset.less`。 ```js import 'tdesign-mobile-vue/dist/reset.css'; -``` \ No newline at end of file +``` diff --git a/site/web/app.vue b/site/web/app.vue index 95335fd29..73ce82c85 100644 --- a/site/web/app.vue +++ b/site/web/app.vue @@ -20,9 +20,12 @@ import packageJson from '../../package.json'; const registryUrl = 'https://mirrors.tencent.com/npm/tdesign-mobile-vue'; const currentVersion = packageJson.version.replace(/\./g, '_'); -const docs = sortDocs(siteConfig.docs); +const { docs, enDocs } = JSON.parse(JSON.stringify(siteConfig).replace(/component:.+/g, '')); -const { docs: routerList } = JSON.parse(JSON.stringify({ docs: docs }).replace(/component:.+/g, '')); +const docsMap = { + zh: sortDocs(docs), + en: sortDocs(enDocs), +}; export default defineComponent({ data() { @@ -43,7 +46,7 @@ export default defineComponent({ mounted() { this.docType = this.$route.meta.docType; this.$refs.tdDocSearch.docsearchInfo = { indexName: 'tdesign_doc_vue_mobile' }; - this.$refs.tdDocAside.routerList = routerList; + this.$refs.tdDocAside.routerList = docsMap[this.$route?.meta?.lang || 'zh']; this.$refs.tdDocAside.onchange = ({ detail }) => { if (this.$route.path === detail) return; this.loaded = false; @@ -63,6 +66,7 @@ export default defineComponent({ watch: { $route(route) { + this.$refs.tdDocAside.routerList = docsMap[route.meta.lang || 'zh']; if (!route.meta.docType) return; this.docType = route.meta.docType; }, diff --git a/site/web/main.ts b/site/web/main.ts index 0dd67826c..16274b29e 100644 --- a/site/web/main.ts +++ b/site/web/main.ts @@ -16,6 +16,10 @@ import 'tdesign-site-components/lib/styles/prism-theme-dark.less'; // import icons webcomponents import 'tdesign-icons-view'; +import { registerLocaleChange } from 'tdesign-site-components'; + +registerLocaleChange(); + const app = createApp(App); app.component('Stackblitz', Stackblitz); diff --git a/site/web/plugin-tdoc/md-to-vue.js b/site/web/plugin-tdoc/md-to-vue.js index 55c3d73fe..43e15682b 100644 --- a/site/web/plugin-tdoc/md-to-vue.js +++ b/site/web/plugin-tdoc/md-to-vue.js @@ -6,12 +6,18 @@ import camelCase from 'camelcase'; import testCoverage from '../test-coverage'; -const defaultTabs = [ +const DEFAULT_TABS = [ { tab: 'demo', name: '示例' }, { tab: 'api', name: 'API' }, { tab: 'design', name: '指南' }, ]; +const DEFAULT_EN_TABS = [ + { tab: 'demo', name: 'DEMO' }, + { tab: 'api', name: 'API' }, + { tab: 'design', name: 'Guideline' }, +]; + export default function mdToVue(options) { const mdSegment = customRender(options); const { demoCodesDefsStr, demoCodeInstallStr } = options; @@ -145,7 +151,7 @@ export default function mdToVue(options) { function customRender({ source, file, md }) { const { content, data } = matter(source); // console.log('data', data); - + const isEn = file.endsWith('en-US.md'); // md top data const pageData = { spline: '', @@ -154,7 +160,7 @@ function customRender({ source, file, md }) { description: '', isComponent: false, tdDocHeader: true, - tdDocTabs: defaultTabs, + tdDocTabs: !isEn ? DEFAULT_TABS : DEFAULT_EN_TABS, apiFlag: /#+\s*API/i, docClass: '', lastUpdated: Math.round(fs.statSync(file).mtimeMs), @@ -162,7 +168,7 @@ function customRender({ source, file, md }) { }; // md filename - const reg = file.match(/src\/([\w-]+)\/([\w-]+)\.md/); + const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/); const componentName = reg && reg[1]; // split md diff --git a/site/web/plugin-tdoc/transforms.js b/site/web/plugin-tdoc/transforms.js index b6a605334..8e68b6330 100644 --- a/site/web/plugin-tdoc/transforms.js +++ b/site/web/plugin-tdoc/transforms.js @@ -8,30 +8,45 @@ let demoCodesImports = {}; export default { before({ source, file }) { const resourceDir = path.dirname(file); - const reg = file.match(/src\/([\w-]+)\/([\w-]+)\.md/); - const name = reg && reg[1]; + const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/); + const fileName = reg && reg[0]; + const componentName = reg && reg[1]; + const localeName = reg && reg[2]; demoCodesImports = {}; // 统一换成 common 文档内容 - if (name && source.includes(':: BASE_DOC ::')) { - const docPath = path.resolve(__dirname, `../../../src/_common/docs/mobile/api_v2/${name}.md`); - if (fs.existsSync(docPath)) { - const baseDoc = fs.readFileSync(docPath, 'utf-8'); - source = source.replace(':: BASE_DOC ::', baseDoc); + if (fileName && source.includes(':: BASE_DOC ::')) { + const localeDocPath = path.resolve(__dirname, `../../../src/_common/docs/mobile/api_v2/${fileName}`); + const defaultDocPath = path.resolve(__dirname, `../../../src/_common/docs/mobile/api_v2/${componentName}.md`); + let baseDoc = ''; + if (fs.existsSync(localeDocPath)) { + // 优先载入语言版本 + baseDoc = fs.readFileSync(localeDocPath, 'utf-8'); + } else if (fs.existsSync(defaultDocPath)) { + // 回退中文默认版本 + baseDoc = fs.readFileSync(defaultDocPath, 'utf-8'); } else { - console.error(`未找到 ${docPath} 文件`); + console.error(`未找到 ${defaultDocPath} 文件`); } + + source = source.replace(':: BASE_DOC ::', baseDoc); } // 替换成对应 demo 文件 source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => { - const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`); - if (!fs.existsSync(demoPath)) { - console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 demos/${demoFileName}.vue 示例!`); + const defaultDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`); + const localeDemoPath = path.resolve(resourceDir, `../_example/${demoFileName}.${localeName}.vue`); + // const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`); + // localeDemo 优先级最高 + if (fs.existsSync(localeDemoPath)) + return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`; + + if (!fs.existsSync(defaultDemoPath)) { + console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`); return '\n

DEMO (🚧建设中）...

'; } - return `\n::: demo demos/${demoFileName} ${name}\n:::\n`; + return `\n::: demo demos/${demoFileName} ${componentName}\n:::\n`; }); source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => { diff --git a/site/web/router.ts b/site/web/router.ts index f1d3bdf21..223838f16 100644 --- a/site/web/router.ts +++ b/site/web/router.ts @@ -1,11 +1,14 @@ import { RouteRecordRaw, createRouter, createWebHistory, RouterOptions } from 'vue-router'; -import docsConfig from '../docs.config'; +import config from '../docs.config'; import { sortDocs } from './utils'; -const docs = sortDocs(docsConfig.docs); +const docs = sortDocs(config.docs); +const enDocs = sortDocs(config.enDocs); function getDocsRoutes(docs: any[], type: string): RouteRecordRaw[] { let docsRoutes: Array = []; + let docRoute; + docs.forEach((item) => { const docType = item.type || type; if (docType === type) { @@ -13,17 +16,14 @@ function getDocsRoutes(docs: any[], type: string): RouteRecordRaw[] { if (children) { docsRoutes = docsRoutes.concat(getDocsRoutes(children, docType)); } else { - docsRoutes.push({ - path: item.path, - name: item.name, - meta: item.meta || {}, - component: item.component, - }); + docRoute = { ...item }; + docsRoutes.push(docRoute); } } }); return docsRoutes; } + const routes: Array = [ { path: '/', @@ -35,6 +35,8 @@ const routes: Array = [ }, ...getDocsRoutes(docs, 'document'), ...getDocsRoutes(docs, 'component'), + ...getDocsRoutes(enDocs, 'document'), + ...getDocsRoutes(enDocs, 'component'), ]; const routerConfig: RouterOptions = { diff --git a/src/_common b/src/_common index 6c1dabc06..f15fedd59 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 6c1dabc067c6902c8583581c0ab3ab4f6897632c +Subproject commit f15fedd590f2beaa9edcfe9f26d727250413ba36 diff --git a/src/back-top/back-top.en-US.md b/src/back-top/back-top.en-US.md new file mode 100644 index 000000000..98a9c262a --- /dev/null +++ b/src/back-top/back-top.en-US.md @@ -0,0 +1,19 @@ +:: BASE_DOC :: + +## API +### BackTop Props + +name | type | default | description | required +-- | -- | -- | -- | -- +fixed | Boolean | true | \- | N +icon | Slot / Function / Boolean | true | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +target | Function | - | Typescript：`() => HTMLElement` | N +text | String | '' | \- | N +theme | String | round | options：round/half-round/round-dark/half-round-dark | N +onToTop | Function | | Typescript：`() => void`
| N + +### BackTop Events + +name | params | description +-- | -- | -- +to-top | \- | \- diff --git a/src/back-top/back-top.md b/src/back-top/back-top.md index 795d79354..8cc6f4085 100644 --- a/src/back-top/back-top.md +++ b/src/back-top/back-top.md @@ -16,4 +16,4 @@ onToTop | Function | | TS 类型：`() => void`
点击触发 | N 名称 | 参数 | 描述 -- | -- | -- -to-top | - | 点击触发 +to-top | \- | 点击触发 diff --git a/src/date-time-picker/date-time-picker.en-US.md b/src/date-time-picker/date-time-picker.en-US.md new file mode 100644 index 000000000..1bc2362ac --- /dev/null +++ b/src/date-time-picker/date-time-picker.en-US.md @@ -0,0 +1,32 @@ +:: BASE_DOC :: + +## API + +### DateTimePicker Props + +name | type | default | description | required +-- | -- | -- | -- | -- +cancelBtn | String | 取消 | \- | N +confirmBtn | String | - | \- | N +end | String / Number | - | \- | N +format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N +mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues | Array ` `type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N +renderLabel | Function | - | Typescript：`(type: string, value: number) => string` | N +showWeek | Boolean | false | \- | N +start | String / Number | - | \- | N +title | String | - | title of picker | N +value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N +onCancel | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N +onChange | Function | | Typescript：`(value: DateValue) => void`
| N +onConfirm | Function | | Typescript：`(value: DateValue) => void`
| N +onPick | Function | | Typescript：`(value: DateValue) => void`
| N + +### DateTimePicker Events + +name | params | description +-- | -- | -- +cancel | `(context: { e: MouseEvent })` | \- +change | `(value: DateValue)` | \- +confirm | `(value: DateValue)` | \- +pick | `(value: DateValue)` | \- diff --git a/src/fab/fab.en-US.md b/src/fab/fab.en-US.md new file mode 100644 index 000000000..e14f70d46 --- /dev/null +++ b/src/fab/fab.en-US.md @@ -0,0 +1,19 @@ +:: BASE_DOC :: + +## API + +### Fab Props + +name | type | default | description | required +-- | -- | -- | -- | -- +buttonProps | Object | - | \- | N +icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N +style | String | right: 16px; bottom: 32px; | \- | N +text | String | - | \- | N +onClick | Function | | Typescript：`(context: {e: MouseEvent}) => void`
| N + +### Fab Events + +name | params | description +-- | -- | -- +click | `(context: {e: MouseEvent})` | \- diff --git a/src/fab/fab.md b/src/fab/fab.md index 0d9d87272..0bf299aee 100644 --- a/src/fab/fab.md +++ b/src/fab/fab.md @@ -9,10 +9,10 @@ buttonProps | Object | - | 透传至 Button 组件 | N icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置 | N text | String | - | 文本内容 | N -onClick | Function | | TS 类型：`({e: MouseEvent}) => void`
悬浮按钮点击事件 | N +onClick | Function | | TS 类型：`(context: {e: MouseEvent}) => void`
悬浮按钮点击事件 | N ### Fab Events 名称 | 参数 | 描述 -- | -- | -- -click | `({e: MouseEvent})` | 悬浮按钮点击事件 +click | `(context: {e: MouseEvent})` | 悬浮按钮点击事件 diff --git a/src/fab/type.ts b/src/fab/type.ts index 3dda0b165..17971c533 100644 --- a/src/fab/type.ts +++ b/src/fab/type.ts @@ -28,5 +28,5 @@ export interface TdFabProps { /** * 悬浮按钮点击事件 */ - onClick?: ({ e }: { e: MouseEvent }) => void; + onClick?: (context: { e: MouseEvent }) => void; } diff --git a/src/icon/icon.en-US.md b/src/icon/icon.en-US.md index 337c91789..228914954 100644 --- a/src/icon/icon.en-US.md +++ b/src/icon/icon.en-US.md @@ -1,5 +1,58 @@ :: BASE_DOC :: +### Install tdesign-icons-vue-next + +Icons are published and managed as a separate npm package. If you want to use it directly in your project, please install `tdesign-icons-vue-next`. At the same time, `tdesign-vue-next` also includes icons and supports direct use through `t-icon`. +### Full import + +The icon size supports multiple units, such as 'small', 'medium', 'large', '35px', '3em', etc. +The icon color is controlled by CSS, for example, using style="color: red" or style="fill: red". +Click on the 「All Icons」 navigation on the right to view all icons in the component library. + +{{ base }} + +### Import on-demand + +SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand. + +{{ single }} + +### Advanced usage of SVG + +New svg icons can be added by passing in the URL. + +The component will import default svg icons. If you want to disable the loading of default svg icons, set `loadDefaultIcons` to `false`. + +{{ enhanced }} + +### Iconfont + +{{ iconfont }} + +### Advanced usage of iconfont + +New iconfont icons can be added by passing in the URL. + +The component will import default iconfont icons. If you want to disable the loading of default iconfont icons, set `loadDefaultIcons` to `false`. + + +{{ iconfont-enhanced }} + + +### FAQ + +#### How to get all the names of icons？ + +You can get all the name of icon by import manifest from the bundle `import { manifest } from 'tdesign-icons-vue-next'` + +#### the usage of full import needs network. What if my project is in a no-network scenario? + +if your project is in a no-network scenario, please use on-demand loading of icons. For example,`` should be changed to `` +### All Icons + + + + ## API ### IconSVG Props diff --git a/src/sticky/sticky.en-US.md b/src/sticky/sticky.en-US.md new file mode 100644 index 000000000..86c1cc3d5 --- /dev/null +++ b/src/sticky/sticky.en-US.md @@ -0,0 +1,19 @@ +:: BASE_DOC :: + +## API + +### Sticky Props + +name | type | default | description | required +-- | -- | -- | -- | -- +container | Object | - | | N +disabled | Boolean | false | \- | N +offsetTop | String / Number | 0 | \- | N +zIndex | Number | 99 | \- | N +onScroll | Function | | Typescript：`(context: { scrollTop: number, isFixed: boolean }) => void`
Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N + +### Sticky Events + +name | params | description +-- | -- | -- +scroll | `(context: { scrollTop: number, isFixed: boolean })` | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)