diff --git a/content/feedback/banner/index-en-US.md b/content/feedback/banner/index-en-US.md index 912b6a51c7..563e5c15c2 100644 --- a/content/feedback/banner/index-en-US.md +++ b/content/feedback/banner/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 78 +order: 79 category: Feedback title: Banner subTitle: Banner diff --git a/content/feedback/banner/index.md b/content/feedback/banner/index.md index 056bd9701c..8fbc037054 100644 --- a/content/feedback/banner/index.md +++ b/content/feedback/banner/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 78 +order: 79 category: 反馈类 title: Banner 通知横幅 icon: doc-banner diff --git a/content/feedback/notification/index-en-US.md b/content/feedback/notification/index-en-US.md index 2c374a426f..0efad3cece 100644 --- a/content/feedback/notification/index-en-US.md +++ b/content/feedback/notification/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 79 +order: 80 category: Feedback title: Notification subTitle: Notification diff --git a/content/feedback/notification/index.md b/content/feedback/notification/index.md index df98a79b77..206b734972 100644 --- a/content/feedback/notification/index.md +++ b/content/feedback/notification/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 79 +order: 80 category: 反馈类 title: Notification 通知 icon: doc-notification diff --git a/content/feedback/popconfirm/index-en-US.md b/content/feedback/popconfirm/index-en-US.md index 4403cae742..7f2f92ffd4 100644 --- a/content/feedback/popconfirm/index-en-US.md +++ b/content/feedback/popconfirm/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 80 +order: 81 category: Feedback title: Popconfirm subTitle: Popconfirm diff --git a/content/feedback/popconfirm/index.md b/content/feedback/popconfirm/index.md index 2da9849deb..1c71244065 100644 --- a/content/feedback/popconfirm/index.md +++ b/content/feedback/popconfirm/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 80 +order: 81 category: 反馈类 title: Popconfirm 气泡确认框 icon: doc-popconfirm diff --git a/content/feedback/progress/index-en-US.md b/content/feedback/progress/index-en-US.md index 70b15301e8..a8bbc569e0 100644 --- a/content/feedback/progress/index-en-US.md +++ b/content/feedback/progress/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 81 +order: 82 category: Feedback title: Progress subTitle: Progress diff --git a/content/feedback/progress/index.md b/content/feedback/progress/index.md index cf3d5bbd94..f56010ccb6 100644 --- a/content/feedback/progress/index.md +++ b/content/feedback/progress/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 81 +order: 82 category: 反馈类 title: Progress 进度条 icon: doc-progress diff --git a/content/feedback/skeleton/index-en-US.md b/content/feedback/skeleton/index-en-US.md index b1ba8c9a6c..15d06a0743 100644 --- a/content/feedback/skeleton/index-en-US.md +++ b/content/feedback/skeleton/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 82 +order: 83 category: Feedback title: Skeleton subTitle: Skeleton diff --git a/content/feedback/skeleton/index.md b/content/feedback/skeleton/index.md index 020d4299ed..50eca18b1a 100644 --- a/content/feedback/skeleton/index.md +++ b/content/feedback/skeleton/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 82 +order: 83 category: 反馈类 title: Skeleton 骨架屏 icon: doc-skeleton diff --git a/content/feedback/spin/index-en-US.md b/content/feedback/spin/index-en-US.md index 045a00e8b6..cd6cea267e 100644 --- a/content/feedback/spin/index-en-US.md +++ b/content/feedback/spin/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 83 +order: 84 category: Feedback title: Spin subTitle: Spin diff --git a/content/feedback/spin/index.md b/content/feedback/spin/index.md index 76b4260eb6..4ff8a25801 100644 --- a/content/feedback/spin/index.md +++ b/content/feedback/spin/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 83 +order: 84 category: 反馈类 title: Spin 加载器 icon: doc-spin diff --git a/content/feedback/toast/index-en-US.md b/content/feedback/toast/index-en-US.md index de9370ce5b..fcdaa205c2 100644 --- a/content/feedback/toast/index-en-US.md +++ b/content/feedback/toast/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 84 +order: 85 category: Feedback title: Toast subTitle: Toast diff --git a/content/feedback/toast/index.md b/content/feedback/toast/index.md index 6a841c37c0..62b784a717 100644 --- a/content/feedback/toast/index.md +++ b/content/feedback/toast/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 84 +order: 85 category: 反馈类 title: Toast 提示 icon: doc-toast diff --git a/content/input/autocomplete/index-en-US.md b/content/input/autocomplete/index-en-US.md index a44a2497f4..b38f86efdc 100644 --- a/content/input/autocomplete/index-en-US.md +++ b/content/input/autocomplete/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 28 +order: 29 category: Input title: AutoComplete icon: doc-autocomplete diff --git a/content/input/autocomplete/index.md b/content/input/autocomplete/index.md index b29ffd3540..0d385139a4 100644 --- a/content/input/autocomplete/index.md +++ b/content/input/autocomplete/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 28 +order: 29 category: 输入类 title: AutoComplete 自动完成 icon: doc-autocomplete diff --git a/content/input/cascader/index-en-US.md b/content/input/cascader/index-en-US.md index 640bfdca32..1fbbb7a661 100644 --- a/content/input/cascader/index-en-US.md +++ b/content/input/cascader/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 29 +order: 30 category: Input title: Cascader subTitle: Cascade diff --git a/content/input/cascader/index.md b/content/input/cascader/index.md index 6f256f83d3..b8ada4f534 100644 --- a/content/input/cascader/index.md +++ b/content/input/cascader/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 29 +order: 30 category: 输入类 title: Cascader 级联选择 icon: doc-cascader diff --git a/content/input/checkbox/index-en-US.md b/content/input/checkbox/index-en-US.md index bbb0785646..d2da67e070 100644 --- a/content/input/checkbox/index-en-US.md +++ b/content/input/checkbox/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 30 +order: 31 category: Input title: Checkbox subTitle: Checkbox diff --git a/content/input/checkbox/index.md b/content/input/checkbox/index.md index 6a0d35fc5d..fc95512fba 100644 --- a/content/input/checkbox/index.md +++ b/content/input/checkbox/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 30 +order: 31 category: 输入类 title: Checkbox 复选框 icon: doc-checkbox diff --git a/content/input/colorpicker/index-en-US.md b/content/input/colorpicker/index-en-US.md index 47fbda212b..f4240b17e1 100644 --- a/content/input/colorpicker/index-en-US.md +++ b/content/input/colorpicker/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 31 +order: 32 category: Input title: ColorPicker icon: doc-colorPlatteNew diff --git a/content/input/colorpicker/index.md b/content/input/colorpicker/index.md index be382beb46..f296b8383f 100644 --- a/content/input/colorpicker/index.md +++ b/content/input/colorpicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 31 +order: 32 category: 输入类 title: ColorPicker 颜色选择器 icon: doc-colorPlatteNew diff --git a/content/input/datepicker/index-en-US.md b/content/input/datepicker/index-en-US.md index bb3415565f..780237e1f1 100644 --- a/content/input/datepicker/index-en-US.md +++ b/content/input/datepicker/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 32 +order: 33 category: Input title: DatePicker subTitle: Date Selector diff --git a/content/input/datepicker/index.md b/content/input/datepicker/index.md index 5d1e618884..431d1d3015 100644 --- a/content/input/datepicker/index.md +++ b/content/input/datepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 32 +order: 33 category: 输入类 title: DatePicker 日期选择器 icon: doc-datepicker diff --git a/content/input/form/index-en-US.md b/content/input/form/index-en-US.md index daacc48ff0..82c1a771ff 100644 --- a/content/input/form/index-en-US.md +++ b/content/input/form/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 33 +order: 34 category: Input title: Form subTitle: Form diff --git a/content/input/form/index.md b/content/input/form/index.md index f00cb22090..5f07fa4222 100644 --- a/content/input/form/index.md +++ b/content/input/form/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 33 +order: 34 category: 输入类 title: Form 表单 icon: doc-form diff --git a/content/input/input/index-en-US.md b/content/input/input/index-en-US.md index 05fa525ff4..621d047dab 100644 --- a/content/input/input/index-en-US.md +++ b/content/input/input/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 34 +order: 35 category: Input title: Input subTitle: Input diff --git a/content/input/input/index.md b/content/input/input/index.md index 2740cc783a..ebba3a4e31 100644 --- a/content/input/input/index.md +++ b/content/input/input/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 34 +order: 35 category: 输入类 title: Input 输入框 icon: doc-input diff --git a/content/input/inputnumber/index-en-US.md b/content/input/inputnumber/index-en-US.md index a43e6e1c82..374aa5c6d6 100644 --- a/content/input/inputnumber/index-en-US.md +++ b/content/input/inputnumber/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 35 +order: 36 category: Input title: InputNumber subTitle: InputNumber diff --git a/content/input/inputnumber/index.md b/content/input/inputnumber/index.md index 5f074a5e33..f5c7f105c2 100644 --- a/content/input/inputnumber/index.md +++ b/content/input/inputnumber/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 35 +order: 36 category: 输入类 title: InputNumber 数字输入框 icon: doc-inputnumber diff --git a/content/input/pincode/index-en-US.md b/content/input/pincode/index-en-US.md index 2f09f1420e..3058e4a0e3 100644 --- a/content/input/pincode/index-en-US.md +++ b/content/input/pincode/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 36 +order: 37 category: Input title: PinCode icon: doc-pincode diff --git a/content/input/pincode/index.md b/content/input/pincode/index.md index c4c7e94ad4..b645958e59 100644 --- a/content/input/pincode/index.md +++ b/content/input/pincode/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 36 +order: 37 category: 输入类 title: PinCode 验证码输入 icon: doc-pincode diff --git a/content/input/radio/index-en-US.md b/content/input/radio/index-en-US.md index b9222bd839..8999ec9060 100644 --- a/content/input/radio/index-en-US.md +++ b/content/input/radio/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 37 +order: 38 category: Input title: Radio subTitle: Radio diff --git a/content/input/radio/index.md b/content/input/radio/index.md index 2bcac82a1f..2f85e5eb89 100644 --- a/content/input/radio/index.md +++ b/content/input/radio/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 37 +order: 38 category: 输入类 title: Radio 单选框 icon: doc-radio diff --git a/content/input/rating/index-en-US.md b/content/input/rating/index-en-US.md index ea4a3b99c9..473f41c6ca 100644 --- a/content/input/rating/index-en-US.md +++ b/content/input/rating/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 38 +order: 39 category: Input title: Rating subTitle: Rating diff --git a/content/input/rating/index.md b/content/input/rating/index.md index ff6d0de567..228cdb8b29 100644 --- a/content/input/rating/index.md +++ b/content/input/rating/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 38 +order: 39 category: 输入类 title: Rating 评分 icon: doc-rating diff --git a/content/input/select/index-en-US.md b/content/input/select/index-en-US.md index 91223cf4ee..028d02ff92 100644 --- a/content/input/select/index-en-US.md +++ b/content/input/select/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 39 +order: 40 category: Input title: Select subTitle: Select diff --git a/content/input/select/index.md b/content/input/select/index.md index 79b32d9e80..3bc23a455d 100644 --- a/content/input/select/index.md +++ b/content/input/select/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 39 +order: 40 category: 输入类 title: Select 选择器 icon: doc-select diff --git a/content/input/slider/index-en-US.md b/content/input/slider/index-en-US.md index 83b827c7e6..12fc231c19 100644 --- a/content/input/slider/index-en-US.md +++ b/content/input/slider/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 40 +order: 41 category: Input title: Slider subTitle: Slider diff --git a/content/input/slider/index.md b/content/input/slider/index.md index 05c9507484..c5e8a3a8a1 100644 --- a/content/input/slider/index.md +++ b/content/input/slider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 40 +order: 41 category: 输入类 title: Slider 滑动选择器 icon: doc-slider diff --git a/content/input/switch/index-en-US.md b/content/input/switch/index-en-US.md index 220ffae66e..4fc822cdaf 100644 --- a/content/input/switch/index-en-US.md +++ b/content/input/switch/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 41 +order: 42 category: Input title: Switch subTitle: Switch diff --git a/content/input/switch/index.md b/content/input/switch/index.md index 7cffa24aa9..8636ce1a79 100644 --- a/content/input/switch/index.md +++ b/content/input/switch/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 41 +order: 42 category: 输入类 title: Switch 开关 icon: doc-switch diff --git a/content/input/taginput/index-en-US.md b/content/input/taginput/index-en-US.md index ec35febdad..593b272699 100644 --- a/content/input/taginput/index-en-US.md +++ b/content/input/taginput/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 42 +order: 43 category: Input title: TagInput subTitle: TagInput diff --git a/content/input/taginput/index.md b/content/input/taginput/index.md index c456b26417..d13f668eeb 100644 --- a/content/input/taginput/index.md +++ b/content/input/taginput/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 42 +order: 43 category: 输入类 title: TagInput 标签输入框 icon: doc-tagInput diff --git a/content/input/timepicker/index-en-US.md b/content/input/timepicker/index-en-US.md index d71f397373..012ba4dba1 100644 --- a/content/input/timepicker/index-en-US.md +++ b/content/input/timepicker/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 43 +order: 44 category: Input title: TimePicker subTitle: TimePicker diff --git a/content/input/timepicker/index.md b/content/input/timepicker/index.md index 3ab6c2823d..ddeaad31da 100644 --- a/content/input/timepicker/index.md +++ b/content/input/timepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 43 +order: 44 category: 输入类 title: TimePicker 时间选择器 icon: doc-timepicker diff --git a/content/input/transfer/index-en-US.md b/content/input/transfer/index-en-US.md index df4161d37e..6e2106c572 100644 --- a/content/input/transfer/index-en-US.md +++ b/content/input/transfer/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 44 +order: 45 category: Input title: Transfer icon: doc-transfer diff --git a/content/input/transfer/index.md b/content/input/transfer/index.md index b56f19a08f..fcf49606cf 100644 --- a/content/input/transfer/index.md +++ b/content/input/transfer/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 44 +order: 45 category: 输入类 title: Transfer 穿梭框 icon: doc-transfer diff --git a/content/input/treeselect/index-en-US.md b/content/input/treeselect/index-en-US.md index 23645e95e6..0c900b7054 100644 --- a/content/input/treeselect/index-en-US.md +++ b/content/input/treeselect/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 45 +order: 46 category: Input title: TreeSelect subTitle: TreeSelect diff --git a/content/input/treeselect/index.md b/content/input/treeselect/index.md index 1909cd15cf..4bcf7e7b34 100644 --- a/content/input/treeselect/index.md +++ b/content/input/treeselect/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 45 +order: 46 category: 输入类 title: TreeSelect 树选择器 icon: doc-treeselect diff --git a/content/input/upload/index-en-US.md b/content/input/upload/index-en-US.md index 4952ef56c9..be8df92243 100644 --- a/content/input/upload/index-en-US.md +++ b/content/input/upload/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 46 +order: 47 category: Input title: Upload icon: doc-upload diff --git a/content/input/upload/index.md b/content/input/upload/index.md index b56c343961..8aeddd2da1 100644 --- a/content/input/upload/index.md +++ b/content/input/upload/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 46 +order: 47 category: 输入类 title: Upload 上传 icon: doc-upload diff --git a/content/navigation/anchor/index-en-US.md b/content/navigation/anchor/index-en-US.md index 4e6ef5851c..e4ade621ef 100644 --- a/content/navigation/anchor/index-en-US.md +++ b/content/navigation/anchor/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 47 +order: 48 category: Navigation title: Anchor subTitle: Anchor diff --git a/content/navigation/anchor/index.md b/content/navigation/anchor/index.md index eaf2d2fbe6..06984f0bc3 100644 --- a/content/navigation/anchor/index.md +++ b/content/navigation/anchor/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 47 +order: 48 category: 导航类 title: Anchor 锚点 icon: doc-anchor diff --git a/content/navigation/backtop/index-en-US.md b/content/navigation/backtop/index-en-US.md index 10fd0c2a0c..10561db189 100644 --- a/content/navigation/backtop/index-en-US.md +++ b/content/navigation/backtop/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 48 +order: 49 category: Navigation title: BackTop subTitle: BackTop diff --git a/content/navigation/backtop/index.md b/content/navigation/backtop/index.md index 1e1d3c9945..4a2d0ec310 100644 --- a/content/navigation/backtop/index.md +++ b/content/navigation/backtop/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 48 +order: 49 category: 导航类 title: BackTop 回到顶部 icon: doc-backtop diff --git a/content/navigation/breadcrumb/index-en-US.md b/content/navigation/breadcrumb/index-en-US.md index 7a5ae22a99..63ab070c7e 100644 --- a/content/navigation/breadcrumb/index-en-US.md +++ b/content/navigation/breadcrumb/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 49 +order: 50 category: Navigation title: Breadcrumb subTitle: Breadcrumb diff --git a/content/navigation/breadcrumb/index.md b/content/navigation/breadcrumb/index.md index 0b15fa5d1d..50b2dee6c0 100644 --- a/content/navigation/breadcrumb/index.md +++ b/content/navigation/breadcrumb/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 49 +order: 50 category: 导航类 title: Breadcrumb 面包屑 icon: doc-breadcrumb diff --git a/content/navigation/navigation/index-en-US.md b/content/navigation/navigation/index-en-US.md index 666181d949..2c8e8b35ba 100644 --- a/content/navigation/navigation/index-en-US.md +++ b/content/navigation/navigation/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 50 +order: 51 category: Navigation title: Navigation subTitle: Navigation diff --git a/content/navigation/navigation/index.md b/content/navigation/navigation/index.md index 155683d05e..1172a1f0db 100644 --- a/content/navigation/navigation/index.md +++ b/content/navigation/navigation/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 50 +order: 51 category: 导航类 title: Navigation 导航 icon: doc-navigation diff --git a/content/navigation/pagination/index-en-US.md b/content/navigation/pagination/index-en-US.md index 4b84008e3e..a0364c51ac 100644 --- a/content/navigation/pagination/index-en-US.md +++ b/content/navigation/pagination/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 51 +order: 52 category: Navigation title: Pagination subTitle: Pagination diff --git a/content/navigation/pagination/index.md b/content/navigation/pagination/index.md index dcaf7ad968..20c47919e0 100644 --- a/content/navigation/pagination/index.md +++ b/content/navigation/pagination/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 51 +order: 52 category: 导航类 title: Pagination 翻页器 icon: doc-pagination diff --git a/content/navigation/steps/index-en-US.md b/content/navigation/steps/index-en-US.md index f897a67ba9..3c5b576f0b 100644 --- a/content/navigation/steps/index-en-US.md +++ b/content/navigation/steps/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 52 +order: 53 category: Navigation title: Steps subTitle: Steps diff --git a/content/navigation/steps/index.md b/content/navigation/steps/index.md index 376a9fce81..8930b57430 100644 --- a/content/navigation/steps/index.md +++ b/content/navigation/steps/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 52 +order: 53 category: 导航类 title: Steps 步骤 icon: doc-steps diff --git a/content/navigation/tabs/index-en-US.md b/content/navigation/tabs/index-en-US.md index d3571ec925..80728ea7fa 100644 --- a/content/navigation/tabs/index-en-US.md +++ b/content/navigation/tabs/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 53 +order: 54 category: Navigation title: Tabs subTitle: Tabs diff --git a/content/navigation/tabs/index.md b/content/navigation/tabs/index.md index bdf13b88db..9e329c2002 100644 --- a/content/navigation/tabs/index.md +++ b/content/navigation/tabs/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 53 +order: 54 category: 导航类 title: Tabs 标签栏 icon: doc-tabs diff --git a/content/navigation/tree/index-en-US.md b/content/navigation/tree/index-en-US.md index 6d7e025ff3..208e033e19 100644 --- a/content/navigation/tree/index-en-US.md +++ b/content/navigation/tree/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 54 +order: 55 category: Navigation title: Tree subTitle: Tree diff --git a/content/navigation/tree/index.md b/content/navigation/tree/index.md index d92196ecf1..d046770e63 100644 --- a/content/navigation/tree/index.md +++ b/content/navigation/tree/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 54 +order: 55 category: 导航类 title: Tree 树形控件 icon: doc-tree diff --git a/content/order.js b/content/order.js index 1063b4942b..924a77b38b 100644 --- a/content/order.js +++ b/content/order.js @@ -26,6 +26,7 @@ const order = [ "markdownrender", 'hotkeys', "lottie", + "dragMove", 'autocomplete', 'cascader', 'checkbox', diff --git a/content/other/configprovider/index-en-US.md b/content/other/configprovider/index-en-US.md index 51027369e8..caac38cbbb 100644 --- a/content/other/configprovider/index-en-US.md +++ b/content/other/configprovider/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 85 +order: 86 category: Other title: ConfigProvider icon: doc-configprovider diff --git a/content/other/configprovider/index.md b/content/other/configprovider/index.md index efbe7b7b84..71277ea5f5 100644 --- a/content/other/configprovider/index.md +++ b/content/other/configprovider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 85 +order: 86 category: 其他 title: ConfigProvider 全局配置 icon: doc-configprovider diff --git a/content/other/locale/index-en-US.md b/content/other/locale/index-en-US.md index 652439d65d..f887d131e0 100644 --- a/content/other/locale/index-en-US.md +++ b/content/other/locale/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 86 +order: 87 category: Other title: LocaleProvider subTitle: LocaleProvider diff --git a/content/other/locale/index.md b/content/other/locale/index.md index 7c67194ca1..2edda95516 100644 --- a/content/other/locale/index.md +++ b/content/other/locale/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 86 +order: 87 category: 其他 title: LocaleProvider 多语言 icon: doc-i18n diff --git a/content/plus/dragMove/index-en-US.md b/content/plus/dragMove/index-en-US.md new file mode 100644 index 0000000000..092b94de86 --- /dev/null +++ b/content/plus/dragMove/index-en-US.md @@ -0,0 +1,236 @@ +--- +localeCode: en-US +order: 28 +category: Plus +title: DragMove +icon: doc-configprovider +dir: column +brief: Set elements to change their position by dragging +showNew: true +--- + +## When to use + +It is used to set the element that can be dragged to change its position. It supports limiting the drag range and customizing the elements that trigger dragging. + +## Demos + +### How to introduce + +DragMove supported from v2.71.0. + +```jsx +import { DragMove } from '@douyinfe/semi-ui'; +``` + +### Basic usage + +Elements wrapped by `DragMove` will be able to change their position by dragging. + +***Notice*** + +1. DragMove will set the draggable element to absolute positioning +2. DragMove needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element. The following types of children are supported: + 1. Class Component, it is not mandatory to bind ref, but you need to ensure that props can be transparently transmitted to the real DOM node + 2. Use the functional component wrapped by forwardRef to transparently transmit props and ref to the real DOM node in children + 3. Real DOM nodes, such as span, div, p... + +```jsx live=true +import React, { useRef, useEffect } from 'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo() { + return ( + +
Drag me
+ + ); +} + +``` + +### Limit drag range + +Passing in `constrainer`, this function returns the elements that limit the draggable range. + +***Note: The elements returned by the constrainer need to be positioned relative*** + +```jsx live=true +import React, { useRef, useEffect } from 'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo() { + const containerRef = React.useRef(); + + return ( +
+ Constrainer + containerRef.current} + > +
Drag me
+ +
+ ) +} +``` + +### Customize elements that trigger dragging + +Passing in `handler`, this function returns the element that triggered the drag. If not set, you can click anywhere to drag; if set, only the part of the element returned by the handler can be dragged. + +```jsx live=true +import React, { useRef, useEffect } from'react'; +import { IconTransparentStroked } from '@douyinfe/semi-icons'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo(){ + const handlerRef = React.useRef(); + const containerRef = React.useRef(); + + return ( +
+ Constrainer + handlerRef.current} + constrainer={() => containerRef.current} + > +
+
+
+ +
+ ) +} +``` + +### Customize position processing after dragging + +You can customize the position processing after dragging through `customMove`. After this parameter is set, the DragMove component will only return the calculated position through the parameters without setting it. The user can set the new position as needed. + +```jsx live=true +import React, { useRef, useEffect } from'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function CustomMove() { + const containerRef = React.useRef(); + const elementRef = React.useRef(); + const startPoint = React.useRef(); + + const customMove = useCallback((element, top, left) => { + if (left + 100 > containerRef.current.offsetWidth) { + element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px` + element.style.left = 'auto'; + } else { + element.style.left = left + 'px'; + } + element.style.top = top + 'px'; + }, []) + + const onMouseDown = useCallback((e) => { + startPoint.current = { + x: e.clientX, + y: e.clientY, + } + }, []); + + const onMouseUp = useCallback((e) => { + if (startPoint.current) { + const { x, y } = startPoint.current; + if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) { + if (elementRef.current.style.width === '50px') { + elementRef.current.style.width = '100px'; + } else { + elementRef.current.style.width = '50px'; + } + } + } + startPoint.current = null; + }, []); + + return ( + <> + Click on the blue color block to change the width. The blue color block will not exceed the range limit before and after the change. +

+
+ Constrainer + containerRef.current} + customMove={customMove} + > +
Drag me
+ +
+ + ) +} + +``` + + +### API + +| Property | Description | Type | Default value | +| --- | --- | --- | ----- | +| allowInputDrag | Whether to allow dragging when clicking on native input/textarea | boolean | false | +| allowMove | Determine whether dragging is allowed when clicking/touching. | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - | +| constrainer | Returns the element that limits the draggable range. | () => ReactNode \| 'parent' | - | +| customMove | Customize position processing after dragging| (element: ReactNode, top: number, left: number) => void | -| +| handler | Returns the element that triggers dragging. | () => ReactNode | - | +| onMouseDown | Callback when mouse is pressed | (e: MouseEvent) => void | - | +| onMouseMove | Callback when mouse moves | (e: MouseEvent) => void | - | +| onMouseUp | Callback when mouse is raised | (e: MouseEvent) => void | - | +| onTouchCancel | Callback when touch cancels | (e: TouchEvent) => void | - | +| onTouchEnd | callback when touch ends | (e: TouchEvent) => void | - | +| onTouchMove | Callback when touch moves | (e: TouchEvent) => void | - | +| onTouchStart | Callback when touch starts | (e: TouchEvent) => void | - | diff --git a/content/plus/dragMove/index.md b/content/plus/dragMove/index.md new file mode 100644 index 0000000000..4222aebf5f --- /dev/null +++ b/content/plus/dragMove/index.md @@ -0,0 +1,237 @@ +--- +localeCode: zh-CN +order: 28 +category: Plus +title: DragMove 拖拽移动 +icon: doc-configprovider +dir: column +brief: 可通过拖拽改变位置 +showNew: true +--- + +## 使用场景 + +用于设置元素可被拖动改变位置，支持限制拖拽范围，支持自定义触发拖动的元素。 + +## 代码演示 + +### 如何引入 + +DragMove 从 v2.71.0 开始支持 + +```jsx +import { DragMove } from '@douyinfe/semi-ui'; +``` + +### 基本用法 + +被 `DragMove` 包裹的元素将能够通过拖拽改变位置。 + +***注意*** + +1. DragMove 会将可拖拽的元素设置为 absolute 定位 +2. DragMove 需要将 DOM 事件监听器应用到 children 中，如果子元素是自定义的组件，你需要确保它能将属性传递至底层的 DOM 元素。支持以下类型的 children： + 1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上 + 2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上 + 3. 真实 DOM 节点, 如 span，div，p... + +```jsx live=true +import React, { useRef, useEffect } from 'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo() { + return ( + +
Drag me
+ + ); +} + +``` + +### 限制拖动范围 + +传入 `constrainer`, 该函数返回限制可拖拽范围的元素。 + +***注意：constrainer 设置的元素需要为 relative 定位*** + +```jsx live=true +import React, { useRef, useEffect } from 'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo() { + const containerRef = React.useRef(); + + return ( +
+ Constrainer + containerRef.current} + > +
Drag me
+ +
+ ) +} +``` + +### 自定义触发拖动的元素 + +可通过 `handler` 自定义触发拖动的元素。如果不设置, 则点击任意位置均可拖动；如果设置，则仅点击 handler 部分可拖动。 + +```jsx live=true +import React, { useRef, useEffect } from'react'; +import { IconTransparentStroked } from '@douyinfe/semi-icons'; +import { DragMove } from '@douyinfe/semi-ui'; + +function Demo(){ + const handlerRef = React.useRef(); + const containerRef = React.useRef(); + + return ( +
+ Constrainer + handlerRef.current} + constrainer={() => containerRef.current} + > +
+
+
+ +
+ ) +} +``` + +### 自定义拖动后的位置处理 + +可通过 `customMove` 自定义拖动后的位置处理，该参数设置后，DragMove 组件内部将仅通过参数返回计算后的位置，不做设置，用户按需自行设置新位置。 + +```jsx live=true +import React, { useRef, useEffect } from'react'; +import { DragMove } from '@douyinfe/semi-ui'; + +function CustomMove() { + const containerRef = React.useRef(); + const elementRef = React.useRef(); + const startPoint = React.useRef(); + + const customMove = useCallback((element, top, left) => { + if (left + 100 > containerRef.current.offsetWidth) { + element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px` + element.style.left = 'auto'; + } else { + element.style.left = left + 'px'; + } + element.style.top = top + 'px'; + }, []) + + const onMouseDown = useCallback((e) => { + startPoint.current = { + x: e.clientX, + y: e.clientY, + } + }, []); + + const onMouseUp = useCallback((e) => { + if (startPoint.current) { + const { x, y } = startPoint.current; + if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) { + if (elementRef.current.style.width === '60px') { + elementRef.current.style.width = '100px'; + } else { + elementRef.current.style.width = '60px'; + } + } + } + startPoint.current = null; + }, []); + + return ( + <> + 蓝色色块点击可改变宽度，改变前后蓝色色块均不会超出范围限制 +

+
+ Constrainer + containerRef.current} + customMove={customMove} + > +
Drag me
+ +
+ + ) +} + +``` + + + +### API + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | ----- | +| allowInputDrag | 点击原生 input/textarea 时是否允许拖动 | boolean | false | +| allowMove | 点击/触摸时是否允许拖动的判断函数 | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - | +| constrainer | 返回限制可拖拽的范围的元素 | () => ReactNode | - | +| customMove | 自定义拖动后的位置处理| (element: ReactNode, top: number, left: number) => void | -| +| handler | 返回触发拖动的元素 | () => ReactNode | - | +| onMouseDown | 鼠标按下时的回调 | (e: MouseEvent) => void | - | +| onMouseMove | 鼠标移动时的回调 | (e: MouseEvent) => void | - | +| onMouseUp | 鼠标抬起时的回调 | (e: MouseEvent) => void | - | +| onTouchCancel | 触摸取消时的回调 | (e: TouchEvent) => void | - | +| onTouchEnd | 触摸结束时的回调 | (e: TouchEvent) => void | - | +| onTouchMove | 触摸移动时的回调 | (e: TouchEvent) => void | - | +| onTouchStart | 触摸开始时的回调 | (e: TouchEvent) => void | - | diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index 28fc9488b1..7e12500e2d 100644 --- a/content/show/avatar/index-en-US.md +++ b/content/show/avatar/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 55 +order: 56 category: Show title: Avatar subTitle: avatar diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index 8fc6713093..93c604eaff 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 55 +order: 56 category: 展示类 title: Avatar 头像 icon: doc-avatar diff --git a/content/show/badge/index-en-US.md b/content/show/badge/index-en-US.md index db54f67791..65f91c39b2 100644 --- a/content/show/badge/index-en-US.md +++ b/content/show/badge/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 56 +order: 57 category: Show title: Badge subTitle: Badge diff --git a/content/show/badge/index.md b/content/show/badge/index.md index c648b710fe..5b9220b102 100644 --- a/content/show/badge/index.md +++ b/content/show/badge/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 56 +order: 57 category: 展示类 title: Badge 徽章 icon: doc-badge diff --git a/content/show/calendar/index-en-US.md b/content/show/calendar/index-en-US.md index e3389a89f6..436df963a5 100644 --- a/content/show/calendar/index-en-US.md +++ b/content/show/calendar/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 57 +order: 58 category: Show title: Calendar subTitle: Calendar diff --git a/content/show/calendar/index.md b/content/show/calendar/index.md index 392b67f751..c3c9ee2e76 100644 --- a/content/show/calendar/index.md +++ b/content/show/calendar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 57 +order: 58 category: 展示类 title: Calendar 日历 icon: doc-calendar diff --git a/content/show/card/index-en-US.md b/content/show/card/index-en-US.md index e98c318b98..9358fac4b9 100644 --- a/content/show/card/index-en-US.md +++ b/content/show/card/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 58 +order: 59 category: Show title: Card subTitle: Card diff --git a/content/show/card/index.md b/content/show/card/index.md index 5bba9ee00f..f63216e2ce 100644 --- a/content/show/card/index.md +++ b/content/show/card/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 58 +order: 59 category: 展示类 title: Card 卡片 subTitle: 卡片 diff --git a/content/show/carousel/index-en-US.md b/content/show/carousel/index-en-US.md index c846f79337..887ad2b00d 100644 --- a/content/show/carousel/index-en-US.md +++ b/content/show/carousel/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 59 +order: 60 category: Show title: Carousel subTitle: Carousel diff --git a/content/show/carousel/index.md b/content/show/carousel/index.md index e0910860b1..656d04b7ce 100644 --- a/content/show/carousel/index.md +++ b/content/show/carousel/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 59 +order: 60 category: 展示类 title: Carousel 轮播图 icon: doc-carousel diff --git a/content/show/chart/index-en-US.md b/content/show/chart/index-en-US.md index ec862931ae..9619c4f946 100644 --- a/content/show/chart/index-en-US.md +++ b/content/show/chart/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 77 +order: 78 category: Show title: Data Visualization icon: doc-vchart diff --git a/content/show/chart/index.md b/content/show/chart/index.md index 7f32d7c9fe..653139efad 100644 --- a/content/show/chart/index.md +++ b/content/show/chart/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 77 +order: 78 category: 展示类 title: Data Visualization 数据可视化 icon: doc-vchart diff --git a/content/show/collapse/index-en-US.md b/content/show/collapse/index-en-US.md index ab5ca34c05..17d014026d 100644 --- a/content/show/collapse/index-en-US.md +++ b/content/show/collapse/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 60 +order: 61 category: Show title: Collapse subTitle: Collapse diff --git a/content/show/collapse/index.md b/content/show/collapse/index.md index 81b3765248..f779f8f4a1 100644 --- a/content/show/collapse/index.md +++ b/content/show/collapse/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 60 +order: 61 category: 展示类 title: Collapse 折叠面板 icon: doc-accordion diff --git a/content/show/collapsible/index-en-US.md b/content/show/collapsible/index-en-US.md index a186a5fbf0..6b5e7497ec 100644 --- a/content/show/collapsible/index-en-US.md +++ b/content/show/collapsible/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 61 +order: 62 category: Show title: Collapsible subTitle: Collapsible diff --git a/content/show/collapsible/index.md b/content/show/collapsible/index.md index cb0956290e..96702c3e9a 100644 --- a/content/show/collapsible/index.md +++ b/content/show/collapsible/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 61 +order: 62 category: 展示类 title: Collapsible 折叠 icon: doc-collapsible diff --git a/content/show/descriptions/index-en-US.md b/content/show/descriptions/index-en-US.md index a66d2be3fc..1acf928601 100644 --- a/content/show/descriptions/index-en-US.md +++ b/content/show/descriptions/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 62 +order: 63 category: Show title: Description subTitle: Descriptions diff --git a/content/show/descriptions/index.md b/content/show/descriptions/index.md index f5ed9d9511..3612e24a48 100644 --- a/content/show/descriptions/index.md +++ b/content/show/descriptions/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 62 +order: 63 category: 展示类 title: Descriptions 描述列表 icon: doc-descriptions diff --git a/content/show/dropdown/index-en-US.md b/content/show/dropdown/index-en-US.md index 12b9939b07..428f647ba9 100644 --- a/content/show/dropdown/index-en-US.md +++ b/content/show/dropdown/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 63 +order: 64 category: Show title: Dropdown subTitle: Dropdown diff --git a/content/show/dropdown/index.md b/content/show/dropdown/index.md index cd667d99f9..520d5104d0 100644 --- a/content/show/dropdown/index.md +++ b/content/show/dropdown/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 63 +order: 64 category: 展示类 title: Dropdown 下拉框 icon: doc-dropdown diff --git a/content/show/empty/index-en-US.md b/content/show/empty/index-en-US.md index bbb64abe49..e3a49ccab3 100644 --- a/content/show/empty/index-en-US.md +++ b/content/show/empty/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 64 +order: 65 category: Show title: Empty subTitle: Empty diff --git a/content/show/empty/index.md b/content/show/empty/index.md index fcda8a3845..633fe8ce46 100644 --- a/content/show/empty/index.md +++ b/content/show/empty/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 64 +order: 65 category: 展示类 title: Empty 空状态 icon: doc-empty diff --git a/content/show/highlight/index-en-US.md b/content/show/highlight/index-en-US.md index 4a8878d813..1d341cfa5f 100644 --- a/content/show/highlight/index-en-US.md +++ b/content/show/highlight/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 65 +order: 66 category: Show title: Highlight icon: doc-highlight diff --git a/content/show/highlight/index.md b/content/show/highlight/index.md index 9ee35a65cb..4df0096aeb 100644 --- a/content/show/highlight/index.md +++ b/content/show/highlight/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 65 +order: 66 category: 展示类 title: Highlight 高亮文本 icon: doc-highlight diff --git a/content/show/image/index-en-US.md b/content/show/image/index-en-US.md index 25339611a9..4f846f0032 100644 --- a/content/show/image/index-en-US.md +++ b/content/show/image/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 66 +order: 67 category: Show title: Image icon: doc-image diff --git a/content/show/image/index.md b/content/show/image/index.md index c294032956..7de09e3438 100644 --- a/content/show/image/index.md +++ b/content/show/image/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 66 +order: 67 category: 展示类 title: Image 图片 icon: doc-image diff --git a/content/show/list/index-en-US.md b/content/show/list/index-en-US.md index eaade98c69..4b5f79cd9e 100644 --- a/content/show/list/index-en-US.md +++ b/content/show/list/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 67 +order: 68 category: Show title: List subTitle: List diff --git a/content/show/list/index.md b/content/show/list/index.md index 8bb1ba3a56..02a93f0c81 100644 --- a/content/show/list/index.md +++ b/content/show/list/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 67 +order: 68 category: 展示类 title: List 列表 icon: doc-list diff --git a/content/show/modal/index-en-US.md b/content/show/modal/index-en-US.md index 3917fe70f4..cdcbf27b02 100644 --- a/content/show/modal/index-en-US.md +++ b/content/show/modal/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 68 +order: 69 category: Show title: Modal subTitle: Modal diff --git a/content/show/modal/index.md b/content/show/modal/index.md index f8ab824168..91cda8ed06 100644 --- a/content/show/modal/index.md +++ b/content/show/modal/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 68 +order: 69 category: 展示类 title: Modal 模态对话框 icon: doc-modal diff --git a/content/show/overflowlist/index-en-US.md b/content/show/overflowlist/index-en-US.md index f3d71dfb94..699cb28b93 100644 --- a/content/show/overflowlist/index-en-US.md +++ b/content/show/overflowlist/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 69 +order: 70 category: Show title: OverflowList subTitle: OverflowList diff --git a/content/show/overflowlist/index.md b/content/show/overflowlist/index.md index 773b4421ab..c449c3f75b 100644 --- a/content/show/overflowlist/index.md +++ b/content/show/overflowlist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 69 +order: 70 category: 展示类 title: OverflowList 折叠列表 icon: doc-overflowList diff --git a/content/show/popover/index-en-US.md b/content/show/popover/index-en-US.md index 7f19156a6a..0f2ac631ad 100644 --- a/content/show/popover/index-en-US.md +++ b/content/show/popover/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 70 +order: 71 category: Show title: Popover subTitle: Popover diff --git a/content/show/popover/index.md b/content/show/popover/index.md index b2e640a7b5..c575b99837 100644 --- a/content/show/popover/index.md +++ b/content/show/popover/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 70 +order: 71 category: 展示类 title: Popover 气泡卡片 icon: doc-popover diff --git a/content/show/scrolllist/index-en-US.md b/content/show/scrolllist/index-en-US.md index 897e533fa1..2d7d3b3ba8 100644 --- a/content/show/scrolllist/index-en-US.md +++ b/content/show/scrolllist/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 71 +order: 72 category: Show title: ScrollList subTitle: ScrollList diff --git a/content/show/scrolllist/index.md b/content/show/scrolllist/index.md index 9a43aa134a..a74bc54269 100644 --- a/content/show/scrolllist/index.md +++ b/content/show/scrolllist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 71 +order: 72 category: 展示类 title: ScrollList 滚动列表 icon: doc-scrolllist diff --git a/content/show/sidesheet/index-en-US.md b/content/show/sidesheet/index-en-US.md index 60c5d5cbca..334c71f349 100644 --- a/content/show/sidesheet/index-en-US.md +++ b/content/show/sidesheet/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 72 +order: 73 category: Show title: SideSheet subTitle: SideSheet diff --git a/content/show/sidesheet/index.md b/content/show/sidesheet/index.md index 9c962a9878..4bff453bb4 100644 --- a/content/show/sidesheet/index.md +++ b/content/show/sidesheet/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 72 +order: 73 category: 展示类 title: SideSheet 滑动侧边栏 icon: doc-sidesheet diff --git a/content/show/table/index-en-US.md b/content/show/table/index-en-US.md index 80aff27fef..8caa1057c0 100644 --- a/content/show/table/index-en-US.md +++ b/content/show/table/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 73 +order: 74 category: Show title: Table subTitle: Table diff --git a/content/show/table/index.md b/content/show/table/index.md index 0a4afb0ca0..6ed2f02b81 100644 --- a/content/show/table/index.md +++ b/content/show/table/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 73 +order: 74 category: 展示类 title: Table 表格 icon: doc-table diff --git a/content/show/tag/index-en-US.md b/content/show/tag/index-en-US.md index c316c1f613..bd22dcd2e3 100644 --- a/content/show/tag/index-en-US.md +++ b/content/show/tag/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 74 +order: 75 category: Show title: Tag subTitle: Tag diff --git a/content/show/tag/index.md b/content/show/tag/index.md index 477c7b0902..8f12709180 100644 --- a/content/show/tag/index.md +++ b/content/show/tag/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 74 +order: 75 category: 展示类 title: Tag 标签 icon: doc-tag diff --git a/content/show/timeline/index-en-US.md b/content/show/timeline/index-en-US.md index c317c4a3cf..922564d543 100644 --- a/content/show/timeline/index-en-US.md +++ b/content/show/timeline/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 75 +order: 76 category: Show title: Timeline subTitle: Timeline diff --git a/content/show/timeline/index.md b/content/show/timeline/index.md index 9ae8257a02..3f75a7d050 100644 --- a/content/show/timeline/index.md +++ b/content/show/timeline/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 75 +order: 76 category: 展示类 title: Timeline 时间轴 icon: doc-timeline diff --git a/content/show/tooltip/index-en-US.md b/content/show/tooltip/index-en-US.md index 3458e252d4..fc02f25b03 100644 --- a/content/show/tooltip/index-en-US.md +++ b/content/show/tooltip/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 76 +order: 77 category: Show title: Tooltip subTitle: Tooltip diff --git a/content/show/tooltip/index.md b/content/show/tooltip/index.md index 8311e9f9fb..8271939e85 100644 --- a/content/show/tooltip/index.md +++ b/content/show/tooltip/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 76 +order: 77 category: 展示类 title: Tooltip 工具提示 icon: doc-tooltip diff --git a/packages/semi-foundation/dragMove/foundation.ts b/packages/semi-foundation/dragMove/foundation.ts new file mode 100644 index 0000000000..d3cfe4dbc9 --- /dev/null +++ b/packages/semi-foundation/dragMove/foundation.ts @@ -0,0 +1,194 @@ +import BaseFoundation, { DefaultAdapter } from '../base/foundation'; + +export function clampValueInRange(value: number, min: number, max: number) { + return Math.min(Math.max(value, min), max); +} + +export interface DragMoveAdapter

, S = Record> extends DefaultAdapter { + getDragElement: () => HTMLElement; + getConstrainer: () => HTMLElement | null; + getHandler: () => HTMLElement; + notifyMouseDown?: (e: MouseEvent) => void; + notifyMouseMove?: (e: MouseEvent) => void; + notifyMouseUp?: (e: MouseEvent) => void; + notifyTouchStart?: (e: TouchEvent) => void; + notifyTouchMove?: (e: TouchEvent) => void; + notifyTouchEnd?: (e: TouchEvent) => void; + notifyTouchCancel?: (e: TouchEvent) => void +} + +export default class DragMoveFoundation

, S = Record> extends BaseFoundation, P, S> { + element: HTMLElement; + xMax: number; + xMin: number; + yMax: number; + yMin: number; + startOffsetX: number; + startOffsetY: number; + + get constrainer() { + return this._adapter.getConstrainer(); + } + + get handler() { + return this._adapter.getHandler(); + } + + constructor(adapter: DragMoveAdapter) { + super({ ...adapter }); + } + + init() { + const element = this._adapter.getDragElement(); + if (!element) { + throw new Error('drag element must be a valid element'); + } + this.element = element; + this.element.style.position = 'absolute'; + this.handler.style.cursor = 'move'; + } + + destroy() { + this._unRegisterEvent(); + } + + _registerDocMouseEvent = () => { + document.addEventListener('mousemove', this._onMouseMove); + document.addEventListener('mouseup', this._onMouseUp); + } + + _unRegisterDocMouseEvent = () => { + document.removeEventListener('mousemove', this._onMouseMove); + document.removeEventListener('mouseup', this._onMouseUp); + } + + _registerDocTouchEvent = () => { + document.addEventListener('touchend', this._onTouchEnd); + document.addEventListener('touchmove', this._onTouchMove); + document.addEventListener('touchcancel', this._onTouchCancel); + } + + _unRegisterDocTouchEvent = () => { + document.removeEventListener('touchend', this._onTouchEnd); + document.removeEventListener('touchmove', this._onTouchMove); + document.removeEventListener('touchcancel', this._onTouchCancel); + } + + _unRegisterEvent() { + this._unRegisterDocMouseEvent(); + + this._unRegisterDocTouchEvent(); + } + + _calcMoveRange() { + // Calculate the range within which an element can move + if (this.constrainer) { + let node = this.element.offsetParent as HTMLElement; + let startX = 0; + let startY = 0; + while (node !== this.constrainer && node !== null) { + startX -= node.offsetLeft; + startY -= node.offsetTop; + node = node.offsetParent as any; + } + this.xMin = startX; + this.xMax = startX + this.constrainer.offsetWidth - this.element.offsetWidth; + this.yMin = startY; + this.yMax = startY + this.constrainer.offsetHeight - this.element.offsetHeight; + } + } + + _allowMove(e: MouseEvent | TouchEvent) { + const { allowMove, allowInputDrag } = this.getProps(); + // When the clicked object is an input or textarea, clicking should be allowed but dragging should not be allowed. + if (!allowInputDrag) { + let target = (e.target as HTMLElement).tagName.toLowerCase(); + if (target === 'input' || target === 'textarea') { + return; + } + } + if (allowMove) { + return allowMove(e, this.element); + } + return true; + } + + _calcOffset = (e: Touch | MouseEvent) => { + this.startOffsetX = e.clientX - this.element.offsetLeft; + this.startOffsetY = e.clientY - this.element.offsetTop; + } + + _preventDefault = (e: MouseEvent | TouchEvent) => { + // prevent default behavior, avoid other element(like img, text) be selected + e.preventDefault(); + } + + onMouseDown = (e: MouseEvent) => { + this._calcMoveRange(); + this._adapter.notifyMouseDown(e); + if (!this._allowMove(e)) { + return; + } + this._registerDocMouseEvent(); + // store origin offset + this._calcOffset(e); + this._preventDefault(e); + } + + onTouchStart = (e: TouchEvent) => { + this._calcMoveRange(); + this._adapter.notifyTouchStart(e); + if (!this._allowMove(e)) { + return; + } + this._registerDocTouchEvent(); + const touch = e.targetTouches[0]; + this._calcOffset(touch); + this._preventDefault(e); + } + + _changePos = (e: Touch | MouseEvent) => { + const { customMove } = this.getProps(); + let newLeft = e.clientX - this.startOffsetX; + let newTop = e.clientY - this.startOffsetY; + if (this.constrainer) { + newLeft = clampValueInRange(newLeft, this.xMin, this.xMax); + newTop = clampValueInRange(newTop, this.yMin, this.yMax); + } + + requestAnimationFrame(() => { + if (customMove) { + customMove(this.element, newTop, newLeft); + return; + } + this.element.style.top = newTop + 'px'; + this.element.style.left = newLeft + 'px'; + }); + } + + _onMouseMove = (e: MouseEvent) => { + this._adapter.notifyMouseMove(e); + this._changePos(e); + } + + _onTouchMove = (e: TouchEvent) => { + this._adapter.notifyTouchMove(e); + const touch = e.targetTouches[0]; + this._changePos(touch); + } + + _onMouseUp = (e: MouseEvent) => { + this._adapter.notifyMouseUp(e); + this._unRegisterDocMouseEvent(); + } + + _onTouchEnd = (e: TouchEvent) => { + this._adapter.notifyTouchEnd(e); + this._unRegisterDocTouchEvent(); + } + + _onTouchCancel = (e: TouchEvent) => { + this._adapter.notifyTouchCancel(e); + this._unRegisterDocTouchEvent(); + } +} diff --git a/packages/semi-ui/dragMove/_story/dragMove.stories.jsx b/packages/semi-ui/dragMove/_story/dragMove.stories.jsx new file mode 100644 index 0000000000..5cf2a90a1f --- /dev/null +++ b/packages/semi-ui/dragMove/_story/dragMove.stories.jsx @@ -0,0 +1,302 @@ +import React, { useEffect, useCallback } from 'react'; +import { IconTransparentStroked } from '@douyinfe/semi-icons'; +import DragMove from '../index'; +import { Button } from '@douyinfe/semi-ui'; + +export default { + title: 'DragMove', + parameters: { + chromatic: { disableSnapshot: true }, + } +} + +export const Default = () => { + + return ( + <> +

+ +
Drag me
+ + +
+ + ) +} + +export const Callback = () => { + + const onMouseMove = useCallback((e) => { + console.log('onMouseMove', e); + }, []); + + const onMouseDown = useCallback((e) => { + console.log('onMouseDown', e); + }, []); + + const onMouseUp = useCallback((e) => { + console.log('onMouseUp', e); + }) + + return ( +
+ +
Drag me
+ +
+ ) +} + +export const Constrain = () => { + const containerRef = React.useRef(); + + return ( +
+ constrainer + { + return containerRef.current; + }} + > +
Drag me
+ +
+ ) +} + + +export const Handler = () => { + const handlerRef = React.useRef(); + const containerRef = React.useRef(); + + return ( +
+ constrainer + handlerRef.current} + constrainer={() => containerRef.current} + > +
+
+
+ +
+ ) +} + +export const MultipleLayer = () => { + const constrainRef = React.useRef(); + + return ( + <> +
+ Constrain node, relative position +
+ Relative position + constrainRef.current}> +
Drag me
+ +
+
+ + ); +} + +export const MultipleLayer2 = () => { + const constrainRef = React.useRef(); + + return ( + <> +
+ Constrain node, relative position +
+ Absolute position + constrainRef.current}> +
Drag me
+ +
+
+ + ); +} + +export const HasInput = () => { + return ( + <> +
+ +
Drag me + +
+ +
+ + ) +} + +export const CustomMove = () => { + const containerRef = React.useRef(); + const elementRef = React.useRef(); + const startPoint = React.useRef(); + + const customMove = useCallback((element, top, left) => { + // 此处可以做一些其他的效果，比如设置 bottom/right 而不是设置 top，left + if (left + 100 > containerRef.current.offsetWidth) { + element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px` + element.style.left = 'auto'; + } else { + element.style.left = left + 'px'; + } + element.style.top = top + 'px'; + }, []) + + const onMouseDown = useCallback((e) => { + startPoint.current = { + x: e.clientX, + y: e.clientY, + } + }, []); + + const onMouseUp = useCallback((e) => { + if (startPoint.current) { + const { x, y } = startPoint.current; + if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) { + if (elementRef.current.style.width === '60px') { + elementRef.current.style.width = '100px'; + } else { + elementRef.current.style.width = '60px'; + } + } + } + startPoint.current = null; + }, []); + + return ( + <> + 蓝色色块可点击改变宽度，100px/50px +
+ 使用 customMove 自定义位置，保证在 container 边缘时候，改变宽度前后, 蓝色色块不会超出 container +
+ constrainer + containerRef.current} + customMove={customMove} + > +
Drag me
+ +
+ + ) +} + +export const SemiComponent = () => { + const ref = React.useRef(); + return ( + + + + ); +} \ No newline at end of file diff --git a/packages/semi-ui/dragMove/_story/dragMove.stories.tsx b/packages/semi-ui/dragMove/_story/dragMove.stories.tsx new file mode 100644 index 0000000000..a3e366311f --- /dev/null +++ b/packages/semi-ui/dragMove/_story/dragMove.stories.tsx @@ -0,0 +1,29 @@ +import React, { useEffect} from 'react'; +import { storiesOf } from '@storybook/react'; +import DragMove from '../index'; + +export const Demo = () => { + const handlerRef = React.useRef(); + + return ( + +
+
Drag me
+
+ + ) +} + +const stories = storiesOf('DragMove', module); + +stories.add('DragMove', () => ); diff --git a/packages/semi-ui/dragMove/index.ts b/packages/semi-ui/dragMove/index.ts new file mode 100644 index 0000000000..10a3a5f499 --- /dev/null +++ b/packages/semi-ui/dragMove/index.ts @@ -0,0 +1,151 @@ +import DragMoveFoundation, { DragMoveAdapter } from '@douyinfe/semi-foundation/dragMove/foundation'; +import BaseComponent from '../_base/baseComponent'; +import { ReactNode } from 'react'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { isHTMLElement } from '../_base/reactUtils'; +import ReactDOM from 'react-dom'; + +export interface DragMoveProps { + // The element that triggers the drag event，default is element + handler?: () => ReactNode; + // The element that constrains the movement range, This element requires relative positioning + constrainer?: () => ReactNode | 'parent'; + children?: ReactNode | undefined | any; + onMouseDown?: (e: MouseEvent) => void; + onMouseMove?: (e: MouseEvent) => void; + onMouseUp?: (e: MouseEvent) => void; + onTouchStart?: (e: TouchEvent) => void; + onTouchMove?: (e: TouchEvent) => void; + onTouchEnd?: (e: TouchEvent) => void; + onTouchCancel?: (e: TouchEvent) => void; + // Determine whether dragging is triggered when the mouse is pressed. + // Return true to trigger dragging. Return false to not trigger dragging. + allowMove?: (e: MouseEvent | TouchEvent, element: HTMLElement) => boolean; + // customize move behavior + customMove?: (e: HTMLElement, top: number, left: number) => void +} + +export default class DragMove extends BaseComponent { + + static propTypes = { + children: PropTypes.node, + handler: PropTypes.func, + allowInputDrag: PropTypes.bool, + constrainNode: PropTypes.func, + onMouseDown: PropTypes.func, + onMouseMove: PropTypes.func, + onMouseUp: PropTypes.func, + onTouchStart: PropTypes.func, + onTouchMove: PropTypes.func, + onTouchEnd: PropTypes.func, + onTouchCancel: PropTypes.func, + } + + static __SemiComponentName__ = "DragMove"; + + static defaultProps = { + allowInputDrag: false, + }; + + constructor(props: DragMoveProps) { + super(props); + this.elementRef = React.createRef(); + this.foundation = new DragMoveFoundation(this.adapter); + } + + elementRef: React.RefObject; + foundation: DragMoveFoundation; + + get adapter(): DragMoveAdapter { + return { + ...super.adapter, + getDragElement: () => { + let elementDom = this.elementRef.current; + if (!isHTMLElement(elementDom)) { + elementDom = ReactDOM.findDOMNode(elementDom as React.ReactInstance); + } + return elementDom as HTMLElement; + }, + getConstrainer: () => { + const { constrainer } = this.props; + if (typeof constrainer === 'string' && constrainer === 'parent') { + return (this.elementRef.current as HTMLElement)?.parentNode as HTMLElement; + } else if (typeof constrainer === 'function') { + return constrainer() as any; + } else { + return null; + } + }, + getHandler: () => { + const { handler } = this.props; + if (typeof handler === 'function') { + return handler() as any; + } else { + return this.adapter.getDragElement() as HTMLElement; + } + }, + notifyMouseDown: (e: MouseEvent) => { + this.props.onMouseDown && this.props.onMouseDown(e); + }, + notifyMouseMove: (e: MouseEvent) => { + this.props.onMouseMove && this.props.onMouseMove(e); + }, + notifyMouseUp: (e: MouseEvent) => { + this.props.onMouseUp && this.props.onMouseUp(e); + }, + notifyTouchStart: (e: TouchEvent) => { + this.props.onTouchStart && this.props.onTouchStart(e); + }, + notifyTouchMove: (e: TouchEvent) => { + this.props.onTouchMove && this.props.onTouchMove(e); + }, + notifyTouchEnd: (e: TouchEvent) => { + this.props.onTouchEnd && this.props.onTouchEnd(e); + }, + notifyTouchCancel: (e: TouchEvent) => { + this.props.onTouchCancel && this.props.onTouchCancel(e); + }, + }; + } + + componentDidMount(): void { + this.foundation.init(); + } + + componentWillUnmount(): void { + this.foundation.destroy(); + } + + render() { + const { children } = this.props; + const newChildren = React.cloneElement(children, { + ref: (node: React.ReactNode) => { + (this.elementRef as any).current = node; + // Call the original ref, if any + const { ref } = children as any; + if (typeof ref === 'function') { + ref(node); + } else if (ref && typeof ref === 'object') { + ref.current = node; + } + }, + onMouseDown: (e: MouseEvent) => { + this.foundation.onMouseDown(e); + const { onMouseDown } = children.props; + if (typeof onMouseDown === 'function') { + onMouseDown(e); + } + }, + onTouchStart: (e: TouchEvent) => { + this.foundation.onTouchStart(e); + const { onMouseMove } = children.props; + if (typeof onMouseMove === 'function') { + onMouseMove(e); + } + }, + }); + return newChildren; + } +} + \ No newline at end of file diff --git a/packages/semi-ui/index.ts b/packages/semi-ui/index.ts index 83e3384b36..bc205a6fda 100644 --- a/packages/semi-ui/index.ts +++ b/packages/semi-ui/index.ts @@ -122,3 +122,5 @@ export { ResizeHandler, ResizeGroup } from './resizable'; + +export { default as DragMove } from './dragMove';