From 582d96491b3eec0fe4aae26b2b64e6bbe42c17de Mon Sep 17 00:00:00 2001 From: "point.halo" Date: Mon, 4 Nov 2024 15:43:23 +0800 Subject: [PATCH] docs: add new tag for new component --- content/basic/button/index-en-US.md | 2 +- content/basic/button/index.md | 2 +- content/basic/divider/index-en-US.md | 2 +- content/basic/divider/index.md | 2 +- content/basic/grid/index-en-US.md | 2 +- content/basic/grid/index.md | 2 +- content/basic/icon/index-en-US.md | 2 +- content/basic/icon/index.md | 2 +- content/basic/layout/index-en-US.md | 2 +- content/basic/layout/index.md | 2 +- .../{show => basic}/resizable/index-en-US.md | 7 +- content/basic/resizable/index.md | 760 ++++++++++++++++++ content/basic/space/index-en-US.md | 2 +- content/basic/space/index.md | 2 +- content/basic/tokens/index-en-US.md | 2 +- content/basic/tokens/index.md | 6 +- content/basic/typography/index-en-US.md | 2 +- content/basic/typography/index.md | 2 +- content/feedback/banner/index-en-US.md | 2 +- content/feedback/banner/index.md | 2 +- content/feedback/notification/index-en-US.md | 2 +- content/feedback/notification/index.md | 2 +- content/feedback/popconfirm/index-en-US.md | 2 +- content/feedback/popconfirm/index.md | 2 +- content/feedback/progress/index-en-US.md | 2 +- content/feedback/progress/index.md | 2 +- content/feedback/skeleton/index-en-US.md | 2 +- content/feedback/skeleton/index.md | 2 +- content/feedback/spin/index-en-US.md | 2 +- content/feedback/spin/index.md | 2 +- content/feedback/toast/index-en-US.md | 2 +- content/feedback/toast/index.md | 2 +- content/input/autocomplete/index-en-US.md | 2 +- content/input/autocomplete/index.md | 2 +- content/input/cascader/index-en-US.md | 2 +- content/input/cascader/index.md | 2 +- content/input/checkbox/index-en-US.md | 2 +- content/input/checkbox/index.md | 2 +- content/input/colorpicker/index-en-US.md | 2 +- content/input/colorpicker/index.md | 2 +- content/input/datepicker/index-en-US.md | 2 +- content/input/datepicker/index.md | 2 +- content/input/form/index-en-US.md | 2 +- content/input/form/index.md | 2 +- content/input/hotkeys/index.md | 246 ------ content/input/input/index-en-US.md | 2 +- content/input/input/index.md | 2 +- content/input/inputnumber/index-en-US.md | 2 +- content/input/inputnumber/index.md | 2 +- content/input/pincode/index-en-US.md | 3 +- content/input/pincode/index.md | 3 +- content/input/radio/index-en-US.md | 2 +- content/input/radio/index.md | 2 +- content/input/rating/index-en-US.md | 2 +- content/input/rating/index.md | 2 +- content/input/select/index-en-US.md | 2 +- content/input/select/index.md | 2 +- content/input/slider/index-en-US.md | 2 +- content/input/slider/index.md | 2 +- content/input/switch/index-en-US.md | 2 +- content/input/switch/index.md | 2 +- content/input/taginput/index-en-US.md | 2 +- content/input/taginput/index.md | 2 +- content/input/timepicker/index-en-US.md | 2 +- content/input/timepicker/index.md | 2 +- content/input/transfer/index-en-US.md | 2 +- content/input/transfer/index.md | 2 +- content/input/treeselect/index-en-US.md | 2 +- content/input/treeselect/index.md | 2 +- content/input/upload/index-en-US.md | 2 +- content/input/upload/index.md | 2 +- content/navigation/anchor/index-en-US.md | 2 +- content/navigation/anchor/index.md | 2 +- content/navigation/backtop/index-en-US.md | 2 +- content/navigation/backtop/index.md | 2 +- content/navigation/breadcrumb/index-en-US.md | 2 +- content/navigation/breadcrumb/index.md | 2 +- content/navigation/navigation/index-en-US.md | 2 +- content/navigation/navigation/index.md | 2 +- content/navigation/pagination/index-en-US.md | 2 +- content/navigation/pagination/index.md | 2 +- content/navigation/steps/index-en-US.md | 2 +- content/navigation/steps/index.md | 2 +- content/navigation/tabs/index-en-US.md | 2 +- content/navigation/tabs/index.md | 2 +- content/navigation/tree/index-en-US.md | 2 +- content/navigation/tree/index.md | 2 +- content/order.js | 19 +- content/other/configprovider/index-en-US.md | 2 +- content/other/configprovider/index.md | 2 +- content/other/locale/index-en-US.md | 2 +- content/other/locale/index.md | 2 +- content/plus/chat/index-en-US.md | 5 +- content/plus/chat/index.md | 3 +- content/plus/codehighlight/index-en-US.md | 7 +- content/plus/codehighlight/index.md | 25 +- .../{input => plus}/hotkeys/index-en-US.md | 8 +- content/plus/hotkeys/index.md | 250 ++++++ content/plus/lottie/index-en-US.md | 13 +- content/plus/lottie/index.md | 12 +- content/plus/markdownrender/index-en-US.md | 5 +- content/plus/markdownrender/index.md | 3 +- content/show/avatar/index-en-US.md | 2 +- content/show/avatar/index.md | 2 +- content/show/badge/index-en-US.md | 2 +- content/show/badge/index.md | 2 +- content/show/calendar/index-en-US.md | 2 +- content/show/calendar/index.md | 2 +- content/show/card/index-en-US.md | 2 +- content/show/card/index.md | 2 +- content/show/carousel/index-en-US.md | 2 +- content/show/carousel/index.md | 2 +- content/show/chart/index-en-US.md | 2 +- content/show/chart/index.md | 2 +- content/show/collapse/index-en-US.md | 2 +- content/show/collapse/index.md | 2 +- content/show/collapsible/index-en-US.md | 2 +- content/show/collapsible/index.md | 2 +- content/show/descriptions/index-en-US.md | 2 +- content/show/descriptions/index.md | 2 +- content/show/dropdown/index-en-US.md | 2 +- content/show/dropdown/index.md | 2 +- content/show/empty/index-en-US.md | 2 +- content/show/empty/index.md | 2 +- content/show/highlight/index-en-US.md | 2 +- content/show/highlight/index.md | 2 +- content/show/image/index-en-US.md | 2 +- content/show/image/index.md | 2 +- content/show/list/index-en-US.md | 2 +- content/show/list/index.md | 2 +- content/show/modal/index-en-US.md | 2 +- content/show/modal/index.md | 2 +- content/show/overflowlist/index-en-US.md | 2 +- content/show/overflowlist/index.md | 2 +- content/show/popover/index-en-US.md | 2 +- content/show/popover/index.md | 2 +- content/show/resizable/index.md | 735 ----------------- content/show/scrolllist/index-en-US.md | 2 +- content/show/scrolllist/index.md | 2 +- content/show/sidesheet/index-en-US.md | 2 +- content/show/sidesheet/index.md | 2 +- content/show/table/index-en-US.md | 2 +- content/show/table/index.md | 2 +- content/show/tag/index-en-US.md | 2 +- content/show/tag/index.md | 2 +- content/show/timeline/index-en-US.md | 2 +- content/show/timeline/index.md | 2 +- content/show/tooltip/index-en-US.md | 2 +- content/show/tooltip/index.md | 2 +- content/start/faq/index-en-US.md | 1 - content/start/faq/index.md | 1 - content/start/getting-started/index.md | 7 +- content/start/overview/index-en-US.md | 4 +- content/start/overview/index.md | 4 +- content/start/web-components/index-en-US.md | 1 + content/start/web-components/index.md | 1 + gatsby-node.js | 51 +- src/components/DesignPageAnchor/index.jsx | 74 +- src/components/layout.js | 1 + src/components/side-nav.js | 6 +- src/styles/index.scss | 7 +- 161 files changed, 1292 insertions(+), 1238 deletions(-) rename content/{show => basic}/resizable/index-en-US.md (99%) create mode 100644 content/basic/resizable/index.md delete mode 100644 content/input/hotkeys/index.md rename content/{input => plus}/hotkeys/index-en-US.md (96%) create mode 100644 content/plus/hotkeys/index.md delete mode 100644 content/show/resizable/index.md diff --git a/content/basic/button/index-en-US.md b/content/basic/button/index-en-US.md index 44040e783b..371bf71c7b 100644 --- a/content/basic/button/index-en-US.md +++ b/content/basic/button/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 19 +order: 18 category: Input title: Button subTitle: Button diff --git a/content/basic/button/index.md b/content/basic/button/index.md index ecd7887f67..0bbcb0a9d3 100644 --- a/content/basic/button/index.md +++ b/content/basic/button/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 19 +order: 18 category: 输入类 title: Button 按钮 icon: doc-button diff --git a/content/basic/divider/index-en-US.md b/content/basic/divider/index-en-US.md index ddfb5b8dd1..b151906768 100644 --- a/content/basic/divider/index-en-US.md +++ b/content/basic/divider/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 14 +order: 20 category: Basic title: Divider icon: doc-divider diff --git a/content/basic/divider/index.md b/content/basic/divider/index.md index 5341074eb0..7aa47cd497 100644 --- a/content/basic/divider/index.md +++ b/content/basic/divider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 14 +order: 20 category: 基础 title: Divider 分割线 icon: doc-divider diff --git a/content/basic/grid/index-en-US.md b/content/basic/grid/index-en-US.md index 4756ba6589..d157ed309e 100644 --- a/content/basic/grid/index-en-US.md +++ b/content/basic/grid/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 15 +order: 16 category: Basic title: Grid icon: doc-grid diff --git a/content/basic/grid/index.md b/content/basic/grid/index.md index 0532683679..bd811f02de 100644 --- a/content/basic/grid/index.md +++ b/content/basic/grid/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 15 +order: 16 category: 基础 title: Grid 栅格 icon: doc-grid diff --git a/content/basic/icon/index-en-US.md b/content/basic/icon/index-en-US.md index 841c7f4e01..bc783b0147 100644 --- a/content/basic/icon/index-en-US.md +++ b/content/basic/icon/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 16 +order: 21 category: Basic title: Icon subTitle: Icon diff --git a/content/basic/icon/index.md b/content/basic/icon/index.md index 6eb7f68da8..ebf9bfe276 100644 --- a/content/basic/icon/index.md +++ b/content/basic/icon/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 16 +order: 21 category: 基础 title: Icon 图标 icon: doc-icons diff --git a/content/basic/layout/index-en-US.md b/content/basic/layout/index-en-US.md index 9bf2e64c9b..0b4d7adba5 100644 --- a/content/basic/layout/index-en-US.md +++ b/content/basic/layout/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 17 +order: 15 category: Basic title: Layout subTitle: Layout diff --git a/content/basic/layout/index.md b/content/basic/layout/index.md index 91963d7fb3..3c6a3a32cc 100644 --- a/content/basic/layout/index.md +++ b/content/basic/layout/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 17 +order: 15 category: 基础 title: Layout 布局 icon: doc-layout diff --git a/content/show/resizable/index-en-US.md b/content/basic/resizable/index-en-US.md similarity index 99% rename from content/show/resizable/index-en-US.md rename to content/basic/resizable/index-en-US.md index a63653a881..e87c45f81d 100644 --- a/content/show/resizable/index-en-US.md +++ b/content/basic/resizable/index-en-US.md @@ -1,10 +1,11 @@ --- localeCode: en-US -order: 68 -category: Show +order: 17 +category: Basic title: Resizable icon: doc-steps dir: column +showNew: true brief: The component size is adjusted based on the user's mouse drag, supporting both resizing of a single component and combined resizing. --- @@ -12,6 +13,8 @@ brief: The component size is adjusted based on the user's mouse drag, supporting ### How to import +Resizable supported from 2.69.0 + ```jsx import { Resizable } from '@douyinfe/semi-ui'; import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui' diff --git a/content/basic/resizable/index.md b/content/basic/resizable/index.md new file mode 100644 index 0000000000..8ff8fc640a --- /dev/null +++ b/content/basic/resizable/index.md @@ -0,0 +1,760 @@ +--- +localeCode: zh-CN +order: 17 +category: 基础 +title: Resizable 伸缩框 +icon: doc-steps +brief: 根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩 +showNew: true +--- + +## 代码演示 + +### 如何引入 + +Resizable 从 2.69.0 开始支持 + +```jsx +import { Resizable } from '@douyinfe/semi-ui'; +import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'; +``` + +### 单个组件 基本使用 + +通过`defaultSize`设置初始大小，可以通过`onResizeStart` `onResize` `onResizeEnd`设置拖拽的回调 + +```tsx +interface Size { + width: string | number; + height: string | number; +} +``` + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + const [text, setText] = useState('Drag edge to resize'); + const opts_1 = { + content: 'resize start', + duration: 1, + stack: true, + }; + const opts_2 = { + content: 'resize end', + duration: 1, + stack: true, + }; + return ( +
+ { + setText('resizing'); + }} + onResizeStart={() => Toast.info(opts_1)} + onResizeEnd={() => { + Toast.info(opts_2); + setText('Drag edge to resize'); + }} + > +
{text}
+ +
+ ); +} +``` + +### 控制伸缩方向 + +通过设置`enable`的值开启/关闭特定伸缩方向，默认值均为`true` + +```tsx +interface Enable { + left: Boolean; + right: Boolean; + top: Boolean; + bottom: Boolean; + topLeft: Boolean; + topRight: Boolean; + bottomLeft: Boolean; + bottomRight: Boolean; +} +``` + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable, Switch, Typography } from '@douyinfe/semi-ui'; + +function Demo() { + const [b, setB] = useState(false); + const { Title } = Typography; + return ( +
+
+ + + {b ? 'able' : 'disable'} + +
+ +
{'enable.left:' + b}
+ +
+ ); +} +``` + +### 设置变化比例 + +通过`ratio`设置拖动和实际变化的比例 + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
ratio=2
+ +
+ ); +} +``` + +### 锁定横纵比 + +通过`lockAspectRatio`设置锁定横纵比,可以为`boolean`或`number`,为`number`时表示横纵比为`number`,为`true`时锁定初始横纵比 + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
lock
+ + +
16 / 9
+ +
+ ); +} +``` + +### 设置最大，最小宽高 + +可通过 `maxHeight`，`maxWidth`，`minHeight`，`minWidth` 设置最大，最小宽高 + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
width在50到200之间，height在50到300之间
+ +
+ ); +} +``` + +### 受控宽高 + +可通过 `size` 控制元素的宽高 + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + const [size, setSize] = useState({ width: 200, height: 300 }); + + const onChange = () => { + let realSize = { width: size.width + 10, height: size.height + 10 }; + setSize(realSize); + }; + return ( +
+ + +
受控
+ +
+ ); +} +``` + +### 设置缩放值 + +通过设置 `scale`，整体缩放元素 + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
scale 0.5
+ +
+ ); +} +``` + +### 根据元素限制元素宽高 + +通过 boundElement 设置用于限制宽高的元素，支持 string（'parent'｜'window'） + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
bound：parent
+ +
+ ); +} +``` + +### 自定义边角 handler 样式 + +可通过 handleNode 设置不同方向的拖动元素节点，可通过 handleStyle，handleClassName 设置不同方向上的样式 + +```jsx +type HandleNode = { + left: ReactNode, + right: ReactNode, + top: ReactNode, + bottom: ReactNode, + topLeft: ReactNode, + topRight: ReactNode, + bottomLeft: ReactNode, + bottomRight: ReactNode, +}; + +type HandleStyle = { + left: React.CSSProperties, + right: React.CSSProperties, + top: React.CSSProperties, + bottom: React.CSSProperties, + topLeft: React.CSSProperties, + topRight: React.CSSProperties, + bottomLeft: React.CSSProperties, + bottomRight: React.CSSProperties, +}; + +type HandleClass = { + left: string, + right: string, + top: string, + bottom: string, + topLeft: string, + topRight: string, + bottomLeft: string, + bottomRight: string, +}; +``` + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable, Button } from '@douyinfe/semi-ui'; +function Demo() { + return ( +
+ + +
+ ), + }} + > +
right
+ + + ); +} +``` + +### 允许阶段性调整宽高 + +可通过 grid ，snap 属性允许逐渐调整宽高。 grid 属性用于指定调整大小应对齐的增量。默认为 [1, 1]。 snap 属性用于指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴。默认为空。以上两个参数可结合 snapGap 使用，该参数用于指定移动到下一个目标所需的最小间隙。默认为 0，这意味着始终使用 grid/snap 设定的目标。 + +```tsx +interface Snap { + x: number[]; + y: number[]; +} +``` + +```jsx live=true +import React, { useState } from 'react'; +import { Resizable } from '@douyinfe/semi-ui'; + +function Demo() { + return ( +
+ +
snap
+ +
+ ); +} +``` + +### 组合组件 基本使用 + + +`ResizeGroup`的父元素需要具有主轴方向上的尺寸 +最好不要为`ResizeItem`设置`padding`，会导致最小尺寸不符合预期，可以为子元素设置`padding` + + +通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical` 支持`onResizeStart` `onResize` `onResizeEnd`回调，支持`min` `max`设置最大最小宽高 + +```jsx live=true dir="column" +import React, { useState } from 'react'; +import { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@douyinfe/semi-ui'; + +function Demo() { + const [text, setText] = useState('Drag to resize'); + return ( +
+ + { + setText('resizing'); + }} + onResizeEnd={() => { + setText('Drag to resize'); + }} + > +
{text + ' min:10%'}
+ + + { + setText('resizing'); + }} + > +
{text + ' min:10% max:30%'}
+ + + { + setText('resizing'); + }} + > +
{text}
+ + + { + setText('resizing'); + }} + > +
{text}
+ + +
+ ); +} +``` + +### 嵌套使用 + +通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical` + +```jsx live=true dir="column" +import React, { useState } from 'react'; +import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'; + +function Demo() { + const [text, setText] = useState('Drag to resize'); + const opts_1 = { + content: 'resize start', + duration: 1, + stack: true, + }; + const opts = { + content: 'resize end', + duration: 1, + stack: true, + }; + return ( +
+ + { + setText('resizing'); + }} + onResizeStart={() => Toast.info(opts_1)} + onResizeEnd={() => { + Toast.info(opts); + setText('Drag to resize'); + }} + > +
{'header'}
+ + + { + setText('resizing'); + }} + > + + { + setText('resizing'); + }} + onResizeStart={() => Toast.info(opts_1)} + onResizeEnd={() => { + Toast.info(opts); + setText('Drag to resize'); + }} + > +
{'tab'}
+ + + { + setText('resizing'); + }} + > +
{text}
+ + + + +
+ ); +} +``` + +```jsx live=true dir="column" +import React, { useState } from 'react'; +import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'; + +function Demo() { + const [text, setText] = useState('Drag to resize'); + const opts_1 = { + content: 'resize start', + duration: 1, + stack: true, + }; + const opts = { + content: 'resize end', + duration: 1, + stack: true, + }; + return ( +
+ + + + +
{text + ' min:10% max:30%'}
+ + + +
+ + { + setText('resizing'); + }} + onResizeEnd={() => { + setText('Drag to resize'); + }} + > +
{text + ' min:10%'}
+ + + +
{text + ' min:10% max:40%'}
+ + + +
{text}
+ + +
+ + + +
{text + ' max:30%'}
+ + + + + { + setText('resizing'); + }} + > + + +
{'tab'}
+ + + +
{'content'}
+ + + + +
+ ); +} +``` + +## API 参考 + +### Resizable + +单个伸缩框组件。 + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 类名 | string | | | +| size | 控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | | +| defaultSize | 用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | | +| minWidth | 指定伸缩框最小宽度 | string \| number | | | +| maxWidth | 指定伸缩框最大宽度 | string \| number | | | +| minHeight | 指定伸缩框最小高度 | string \| number | | | +| maxHeight | 指定伸缩框最大高度 | string \| number | | +| lockAspectRatio | 设置伸缩框横纵比，当为`true`时按照初始宽高锁定 | boolean \| number | | | +| enable | 指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动 | [Enable](#控制伸缩方向) | +| scale | 可伸缩元素被缩放的比例 | number | 1 | | +| boundElement | 用于限制可伸缩元素宽高的元素,传入 `parent` 设置父节点为限制节点 | string | | | +| handleNode | 用于设置拖拽处理元素各个方向的自定义节点 | [HandleNode](#自定义边角handler样式) | | | +| handleStyle | 用于设置拖拽处理元素各个方向的样式 | [HandleStyles](#自定义边角handler样式) | | | +| handleClass | 用于设置拖拽处理元素各个方向的类名称 | [HandleClasses](#自定义边角handler样式) | | | +| style | 样式 | CSSProperties | | +| snapGap | 用于指定移动到下一个目标所需的最小间隙。 | number | 0 | | +| snap | 指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴 | [Snap](#允许阶段性调整宽高) | null | | +| grid | 指定调整大小应对齐的增量 | \[number, number\] | \[1,1\] | | +| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | | +| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | | +| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | | + +### ResizeGroup + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --------- | ----------------------- | -------------------------- | ------------ | ---- | +| className | 类名 | string | | | +| direction | 指定 Group 内的伸缩方向 | 'horizontal' \| 'vertical' | 'horizontal' | | + +### ResizeHandler + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --------- | ---- | ------------- | ------ | ---- | +| className | 类名 | string | | | +| style | 样式 | CSSProperties | | + +### ResizeItem + +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 类名 | string | | | +| defaultSize | 用于设置初始宽高，**字符串支持%和 px 单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间** | string \| number | | | +| min | 指定伸缩框最小尺寸（百分比或像素值） | string | | | +| max | 指定伸缩框最大尺寸（百分比或像素值） | string | | | +| style | 样式 | CSSProperties | | +| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | | +| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | | +| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | | + +## 设计变量 + + diff --git a/content/basic/space/index-en-US.md b/content/basic/space/index-en-US.md index 4edf92e1cd..4eba2117bc 100644 --- a/content/basic/space/index-en-US.md +++ b/content/basic/space/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 20 +order: 22 category: basic title: Space icon: doc-space diff --git a/content/basic/space/index.md b/content/basic/space/index.md index c7db097f72..dfb37dc236 100644 --- a/content/basic/space/index.md +++ b/content/basic/space/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 20 +order: 22 category: 基础 title: Space 间距 icon: doc-space diff --git a/content/basic/tokens/index-en-US.md b/content/basic/tokens/index-en-US.md index 0c25c5cbf3..1fee3b5918 100644 --- a/content/basic/tokens/index-en-US.md +++ b/content/basic/tokens/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 18 +order: 14 category: Basic title: Tokens icon: doc-token diff --git a/content/basic/tokens/index.md b/content/basic/tokens/index.md index 6a64765312..3091669226 100644 --- a/content/basic/tokens/index.md +++ b/content/basic/tokens/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 18 +order: 14 category: 基础 title: Tokens 设计变量 icon: doc-token @@ -9,9 +9,9 @@ brief: Semi Design Tokens -## 为什么要使用变量 +## 为什么要使用 Design Token -变量实际上是将设计中的基础元素与具体的样式进行解耦。 +Design Token 设计变量实际上是将设计中的基础元素与具体的样式进行解耦。 对于设计师来说，如果产品的风格需要迭代更新，比如需要更新 危险 的功能色，即 color-danger，只需要修改其对应的颜色默认值，既可以完成整套产品的 UI 迭代。 diff --git a/content/basic/typography/index-en-US.md b/content/basic/typography/index-en-US.md index 621a8e949b..33f7202e32 100644 --- a/content/basic/typography/index-en-US.md +++ b/content/basic/typography/index-en-US.md @@ -1,6 +1,6 @@ --- localeCode: en-US -order: 21 +order: 19 category: Basic title: Typography subTitle: Typography diff --git a/content/basic/typography/index.md b/content/basic/typography/index.md index cde23197a5..397ddc2c6b 100644 --- a/content/basic/typography/index.md +++ b/content/basic/typography/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 21 +order: 19 category: 基础 title: Typography 版式 icon: doc-typography diff --git a/content/feedback/banner/index-en-US.md b/content/feedback/banner/index-en-US.md index a36c9bb51a..912b6a51c7 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: 76 +order: 78 category: Feedback title: Banner subTitle: Banner diff --git a/content/feedback/banner/index.md b/content/feedback/banner/index.md index 0c4ea9383c..056bd9701c 100644 --- a/content/feedback/banner/index.md +++ b/content/feedback/banner/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 76 +order: 78 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 b2c6f45cc2..2c374a426f 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: 77 +order: 79 category: Feedback title: Notification subTitle: Notification diff --git a/content/feedback/notification/index.md b/content/feedback/notification/index.md index 160f365ce2..df98a79b77 100644 --- a/content/feedback/notification/index.md +++ b/content/feedback/notification/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 77 +order: 79 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 2b474ed34a..4403cae742 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: 78 +order: 80 category: Feedback title: Popconfirm subTitle: Popconfirm diff --git a/content/feedback/popconfirm/index.md b/content/feedback/popconfirm/index.md index eeb4ed8c01..2da9849deb 100644 --- a/content/feedback/popconfirm/index.md +++ b/content/feedback/popconfirm/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 78 +order: 80 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 a0ebc8368a..70b15301e8 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: 79 +order: 81 category: Feedback title: Progress subTitle: Progress diff --git a/content/feedback/progress/index.md b/content/feedback/progress/index.md index 0a37844d43..cf3d5bbd94 100644 --- a/content/feedback/progress/index.md +++ b/content/feedback/progress/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 79 +order: 81 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 b61c893c85..b1ba8c9a6c 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: 80 +order: 82 category: Feedback title: Skeleton subTitle: Skeleton diff --git a/content/feedback/skeleton/index.md b/content/feedback/skeleton/index.md index b327e8dd50..020d4299ed 100644 --- a/content/feedback/skeleton/index.md +++ b/content/feedback/skeleton/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 80 +order: 82 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 63aff15bf4..045a00e8b6 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: 81 +order: 83 category: Feedback title: Spin subTitle: Spin diff --git a/content/feedback/spin/index.md b/content/feedback/spin/index.md index 779dd0c0c0..76b4260eb6 100644 --- a/content/feedback/spin/index.md +++ b/content/feedback/spin/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 81 +order: 83 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 8b4a3e2ab4..de9370ce5b 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: 82 +order: 84 category: Feedback title: Toast subTitle: Toast diff --git a/content/feedback/toast/index.md b/content/feedback/toast/index.md index 3acb0b65b9..6a841c37c0 100644 --- a/content/feedback/toast/index.md +++ b/content/feedback/toast/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 82 +order: 84 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 9fedf08cdc..a44a2497f4 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: 24 +order: 28 category: Input title: AutoComplete icon: doc-autocomplete diff --git a/content/input/autocomplete/index.md b/content/input/autocomplete/index.md index 871b9310b7..b29ffd3540 100644 --- a/content/input/autocomplete/index.md +++ b/content/input/autocomplete/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 24 +order: 28 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 edb5a50bd0..0014205290 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: 25 +order: 29 category: Input title: Cascader subTitle: Cascade diff --git a/content/input/cascader/index.md b/content/input/cascader/index.md index 24d58469b5..c94cefe288 100644 --- a/content/input/cascader/index.md +++ b/content/input/cascader/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 25 +order: 29 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 674eb9d789..bbb0785646 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: 26 +order: 30 category: Input title: Checkbox subTitle: Checkbox diff --git a/content/input/checkbox/index.md b/content/input/checkbox/index.md index a730c3e6f1..6a0d35fc5d 100644 --- a/content/input/checkbox/index.md +++ b/content/input/checkbox/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 26 +order: 30 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 2d46d1f20e..47fbda212b 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: 27 +order: 31 category: Input title: ColorPicker icon: doc-colorPlatteNew diff --git a/content/input/colorpicker/index.md b/content/input/colorpicker/index.md index b4a389eb2f..be382beb46 100644 --- a/content/input/colorpicker/index.md +++ b/content/input/colorpicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 27 +order: 31 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 46ea4c3028..bb3415565f 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: 28 +order: 32 category: Input title: DatePicker subTitle: Date Selector diff --git a/content/input/datepicker/index.md b/content/input/datepicker/index.md index 33af70f8d5..5d1e618884 100644 --- a/content/input/datepicker/index.md +++ b/content/input/datepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 28 +order: 32 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 aec782d5b0..daacc48ff0 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: 29 +order: 33 category: Input title: Form subTitle: Form diff --git a/content/input/form/index.md b/content/input/form/index.md index dae746b0fe..c05266291e 100644 --- a/content/input/form/index.md +++ b/content/input/form/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 29 +order: 33 category: 输入类 title: Form 表单 icon: doc-form diff --git a/content/input/hotkeys/index.md b/content/input/hotkeys/index.md deleted file mode 100644 index 3a9219b991..0000000000 --- a/content/input/hotkeys/index.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -localeCode: zh-CN -order: 30 -category: 输入类 -title: HotKeys 快捷键 -icon: doc-configprovider -width: 60% -brief: 用于方便用户自定义快捷键及相关操作 ---- - - -## 代码演示 - -### 如何引入 -HotKeys 从 2.66.0 开始支持 - -```jsx import -import { HotKeys } from '@douyinfe/semi-ui'; -``` - - -### 说明 -快捷键仅支持修饰键组合`Shift`,`Control`,`Meta`,`Alt`与其他键的组合。 -> [Meta](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey) 在MacOS中为`Command`，在Windows中为`Win` - -当设定快捷键与常用快捷键如`Ctrl/Meta + C`相同时，可以通过设置`preventDefault`控制默认事件是否触发。 - -### 基本 - -基本使用，通过`hotKeys`传入快捷键组合，通过 `onHotKey` 绑定快捷键处理函数，作出响应动作。 - -按下 Ctrl + Shift + A， 唤起modal。默认在 body.document 监听，全局生效。 - -[hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)，也可以使用`HotKeys.Keys`进行设置 - -```jsx live=true -import React, { useState } from 'react'; -import { HotKeys, Modal } from '@douyinfe/semi-ui'; - -function Demo() { - const [visible, setVisible] = useState(false); - const showDialog = () => { - setVisible(true); - }; - const handleOk = () => { - setVisible(false); - }; - const handleCancel = () => { - setVisible(false); - }; - const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.A] - - return ( -
- - - This is the Modal opened by hotkey: {hotKeys.join('+')}. - -
- ); -} -``` - -### 自定义内容 - -通过`content`传入渲染的字符 - -```jsx live=true -import React, { useState } from 'react'; -import { HotKeys, Modal } from '@douyinfe/semi-ui'; - -function Demo() { - const [visible, setVisible] = useState(false); - const showDialog = () => { - setVisible(true); - }; - const handleOk = () => { - setVisible(false); - }; - const handleCancel = () => { - setVisible(false); - }; - const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.B] - - return ( -
- - - This is the Modal opened by hotkey: {hotKeys.join('+')}. - -
- ); -} -``` - -通过`render`传入代替渲染的元素 - -```jsx live=true -import React, { useState } from 'react'; -import { HotKeys, Modal, Tag } from '@douyinfe/semi-ui'; - -function Demo() { - const [visible, setVisible] = useState(false); - const showDialog = () => { - setVisible(true); - }; - const handleOk = () => { - setVisible(false); - }; - const handleCancel = () => { - setVisible(false); - }; - const hotKeys = [HotKeys.Keys.Control, HotKeys.Keys.R] - - const newHotKeys = Press Ctrl+R to Open Modal - return ( -
- - - This is the Modal opened by hotkey: {hotKeys.join('+')}. - -
- ); -} -``` - -### 阻止默认事件 - -通过设置`preventDefault`控制默认事件是否触发。 -```jsx live=true -import React, { useState } from 'react'; -import { HotKeys, Modal } from '@douyinfe/semi-ui'; - -function Demo() { - const [visible, setVisible] = useState(false); - const showDialog = () => { - setVisible(true); - }; - const handleOk = () => { - setVisible(false); - }; - const handleCancel = () => { - setVisible(false); - }; - const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.S] - - return ( -
- -
- - - This is the Modal opened by hotkey: {'Meta/Control + S'}. - -
- ); -} -``` - -### 修改监听挂载DOM -快捷键默认在 body 监听，通过`getListenerTarget`修改快捷键监听挂载的DOM -```jsx live=true -import React, { useState, useRef } from 'react'; -import { HotKeys, Input, Modal } from '@douyinfe/semi-ui'; - -function Demo() { - const hotKeys = ["Control", "q"] - const [visible, setVisible] = useState(false); - const showDialog = () => { - setVisible(true); - }; - const handleOk = () => { - setVisible(false); - }; - const handleCancel = () => { - setVisible(false); - }; - - const inputRef = useRef(null); - return ( -
- - inputRef.current}> - - - This is the Modal opened by hotkey: {hotKeys.join('+')}. - -
- ); -} -``` - -## API 参考 - -### HotKeys - -| 属性 | 说明 | 类型 | 默认值 | -| ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- | -| className | 类名 | string | | -| content | 设置显示内容 | string[] | - | -| getListenerTarget | 用于设置监听器挂载的DOM | () => HTMLElement | document.body | -| hotKeys | 设置快捷键组合，[取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) | KeyboardEvent.key[] | - | -| onClick | 点击回调函数 | () => void | - | -| onHotKey | 快捷键回调函数 | (e: KeyboardEvent) => void | - | -| preventDefault | 是否阻止快捷键默认行为 | boolean | false | -| render | 覆盖组件渲染 | () => ReactNode \| ReactNode | | -| style | 样式 | CSSProperties | | - - -## 设计变量 - - - - -## 相关物料 - - diff --git a/content/input/input/index-en-US.md b/content/input/input/index-en-US.md index e90411c510..05fa525ff4 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: 31 +order: 34 category: Input title: Input subTitle: Input diff --git a/content/input/input/index.md b/content/input/input/index.md index 8a84c6fc1b..2740cc783a 100644 --- a/content/input/input/index.md +++ b/content/input/input/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 31 +order: 34 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 db7036b60f..a43e6e1c82 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: 32 +order: 35 category: Input title: InputNumber subTitle: InputNumber diff --git a/content/input/inputnumber/index.md b/content/input/inputnumber/index.md index c23563b78a..5f074a5e33 100644 --- a/content/input/inputnumber/index.md +++ b/content/input/inputnumber/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 32 +order: 35 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 67174d26e0..2f09f1420e 100644 --- a/content/input/pincode/index-en-US.md +++ b/content/input/pincode/index-en-US.md @@ -1,11 +1,12 @@ --- localeCode: en-US -order: 33 +order: 36 category: Input title: PinCode icon: doc-pincode width: 60% brief: For easy and intuitive verification code entry +showNew: true --- ## Code demonstration diff --git a/content/input/pincode/index.md b/content/input/pincode/index.md index 59c4e85599..c4c7e94ad4 100644 --- a/content/input/pincode/index.md +++ b/content/input/pincode/index.md @@ -1,11 +1,12 @@ --- localeCode: zh-CN -order: 33 +order: 36 category: 输入类 title: PinCode 验证码输入 icon: doc-pincode width: 60% brief: 用于便捷直观地输入验证码 +showNew: true --- ## 代码演示 diff --git a/content/input/radio/index-en-US.md b/content/input/radio/index-en-US.md index 249f47db90..b9222bd839 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: 34 +order: 37 category: Input title: Radio subTitle: Radio diff --git a/content/input/radio/index.md b/content/input/radio/index.md index 4cadbc3f4b..2bcac82a1f 100644 --- a/content/input/radio/index.md +++ b/content/input/radio/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 34 +order: 37 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 fe2f7e37fb..ea4a3b99c9 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: 35 +order: 38 category: Input title: Rating subTitle: Rating diff --git a/content/input/rating/index.md b/content/input/rating/index.md index 5487d7da04..ff6d0de567 100644 --- a/content/input/rating/index.md +++ b/content/input/rating/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 35 +order: 38 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 9496158b43..bb533f90b4 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: 36 +order: 39 category: Input title: Select subTitle: Select diff --git a/content/input/select/index.md b/content/input/select/index.md index 976a3dcdd3..37e0fbed74 100644 --- a/content/input/select/index.md +++ b/content/input/select/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 36 +order: 39 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 fdc5c01ea8..83b827c7e6 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: 37 +order: 40 category: Input title: Slider subTitle: Slider diff --git a/content/input/slider/index.md b/content/input/slider/index.md index c9974b143d..05c9507484 100644 --- a/content/input/slider/index.md +++ b/content/input/slider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 37 +order: 40 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 bf64c9b858..220ffae66e 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: 38 +order: 41 category: Input title: Switch subTitle: Switch diff --git a/content/input/switch/index.md b/content/input/switch/index.md index 04f8fad725..7cffa24aa9 100644 --- a/content/input/switch/index.md +++ b/content/input/switch/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 38 +order: 41 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 02900e5b5d..ec35febdad 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: 39 +order: 42 category: Input title: TagInput subTitle: TagInput diff --git a/content/input/taginput/index.md b/content/input/taginput/index.md index b5affbbcab..c456b26417 100644 --- a/content/input/taginput/index.md +++ b/content/input/taginput/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 39 +order: 42 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 cd80b2264a..d71f397373 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: 40 +order: 43 category: Input title: TimePicker subTitle: TimePicker diff --git a/content/input/timepicker/index.md b/content/input/timepicker/index.md index a1fe4b867a..3ab6c2823d 100644 --- a/content/input/timepicker/index.md +++ b/content/input/timepicker/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 40 +order: 43 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 d0ded58647..57ddcef561 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: 41 +order: 44 category: Input title: Transfer icon: doc-transfer diff --git a/content/input/transfer/index.md b/content/input/transfer/index.md index a2e7e467e3..10d033991b 100644 --- a/content/input/transfer/index.md +++ b/content/input/transfer/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 41 +order: 44 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 0afba00569..23645e95e6 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: 42 +order: 45 category: Input title: TreeSelect subTitle: TreeSelect diff --git a/content/input/treeselect/index.md b/content/input/treeselect/index.md index 2335dbc89d..1909cd15cf 100644 --- a/content/input/treeselect/index.md +++ b/content/input/treeselect/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 42 +order: 45 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 956d1dba0b..4952ef56c9 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: 43 +order: 46 category: Input title: Upload icon: doc-upload diff --git a/content/input/upload/index.md b/content/input/upload/index.md index 06f5e35845..b56c343961 100644 --- a/content/input/upload/index.md +++ b/content/input/upload/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 43 +order: 46 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 738f073a90..4e6ef5851c 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: 44 +order: 47 category: Navigation title: Anchor subTitle: Anchor diff --git a/content/navigation/anchor/index.md b/content/navigation/anchor/index.md index 01b8878791..eaf2d2fbe6 100644 --- a/content/navigation/anchor/index.md +++ b/content/navigation/anchor/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 44 +order: 47 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 cefc8cedb5..10fd0c2a0c 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: 45 +order: 48 category: Navigation title: BackTop subTitle: BackTop diff --git a/content/navigation/backtop/index.md b/content/navigation/backtop/index.md index 22c0333428..1e1d3c9945 100644 --- a/content/navigation/backtop/index.md +++ b/content/navigation/backtop/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 45 +order: 48 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 e4a465a70e..7a5ae22a99 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: 46 +order: 49 category: Navigation title: Breadcrumb subTitle: Breadcrumb diff --git a/content/navigation/breadcrumb/index.md b/content/navigation/breadcrumb/index.md index 1b90600971..0b15fa5d1d 100644 --- a/content/navigation/breadcrumb/index.md +++ b/content/navigation/breadcrumb/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 46 +order: 49 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 8b26ac9766..fcfb31775f 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: 47 +order: 50 category: Navigation title: Navigation subTitle: Navigation diff --git a/content/navigation/navigation/index.md b/content/navigation/navigation/index.md index 0223577522..a1470a1ac5 100644 --- a/content/navigation/navigation/index.md +++ b/content/navigation/navigation/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 47 +order: 50 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 bf10700fdc..4b84008e3e 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: 48 +order: 51 category: Navigation title: Pagination subTitle: Pagination diff --git a/content/navigation/pagination/index.md b/content/navigation/pagination/index.md index b550aa5091..dcaf7ad968 100644 --- a/content/navigation/pagination/index.md +++ b/content/navigation/pagination/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 48 +order: 51 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 69e7aa0fe3..f897a67ba9 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: 49 +order: 52 category: Navigation title: Steps subTitle: Steps diff --git a/content/navigation/steps/index.md b/content/navigation/steps/index.md index 03a0c0e94e..376a9fce81 100644 --- a/content/navigation/steps/index.md +++ b/content/navigation/steps/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 49 +order: 52 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 f451dad678..d3571ec925 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: 50 +order: 53 category: Navigation title: Tabs subTitle: Tabs diff --git a/content/navigation/tabs/index.md b/content/navigation/tabs/index.md index 8afa2d93ea..bdf13b88db 100644 --- a/content/navigation/tabs/index.md +++ b/content/navigation/tabs/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 50 +order: 53 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 4609999511..6d7e025ff3 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: 51 +order: 54 category: Navigation title: Tree subTitle: Tree diff --git a/content/navigation/tree/index.md b/content/navigation/tree/index.md index 99adc4442e..d92196ecf1 100644 --- a/content/navigation/tree/index.md +++ b/content/navigation/tree/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 51 +order: 54 category: 导航类 title: Tree 树形控件 icon: doc-tree diff --git a/content/order.js b/content/order.js index 702c28ff8e..1063b4942b 100644 --- a/content/order.js +++ b/content/order.js @@ -12,15 +12,19 @@ const order = [ 'content-guidelines', 'changelog', 'update-to-v2', - 'divider', - 'grid', - 'icon', - 'layout', 'tokens', + 'layout', + 'grid', + 'resizable', 'button', - 'space', 'typography', + 'divider', + 'icon', + 'space', + 'chat', + 'codehighlight', "markdownrender", + 'hotkeys', "lottie", 'autocomplete', 'cascader', @@ -28,7 +32,6 @@ const order = [ 'colorpicker', 'datepicker', 'form', - 'hotkeys', 'input', 'inputnumber', 'pincode', @@ -66,7 +69,6 @@ const order = [ 'modal', 'overflowlist', 'popover', - 'resizable', 'scrolllist', 'sidesheet', 'table', @@ -82,8 +84,7 @@ const order = [ 'spin', 'toast', 'configprovider', - 'locale', - 'chat', + 'locale' ]; let { exec } = require('child_process'); let fs = require('fs'); diff --git a/content/other/configprovider/index-en-US.md b/content/other/configprovider/index-en-US.md index 3b589c3b26..51027369e8 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: 83 +order: 85 category: Other title: ConfigProvider icon: doc-configprovider diff --git a/content/other/configprovider/index.md b/content/other/configprovider/index.md index c7812dd323..efbe7b7b84 100644 --- a/content/other/configprovider/index.md +++ b/content/other/configprovider/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 83 +order: 85 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 2209ea46a4..652439d65d 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: 84 +order: 86 category: Other title: LocaleProvider subTitle: LocaleProvider diff --git a/content/other/locale/index.md b/content/other/locale/index.md index 8eef0c495f..7c67194ca1 100644 --- a/content/other/locale/index.md +++ b/content/other/locale/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 84 +order: 86 category: 其他 title: LocaleProvider 多语言 icon: doc-i18n diff --git a/content/plus/chat/index-en-US.md b/content/plus/chat/index-en-US.md index 2ea6f3733d..9d4ce05ea9 100644 --- a/content/plus/chat/index-en-US.md +++ b/content/plus/chat/index-en-US.md @@ -1,16 +1,17 @@ --- localeCode: en-US -order: 85 +order: 23 category: Plus title: Chat icon: doc-chat dir: column brief: Used to quickly build conversation content +showNew: true --- ## When to use -The Chat component can be used in scenarios such as regular conversations or AI conversations. +The `Chat` component can be used in scenarios such as regular conversations or AI conversations. The rendering of the conversation content is based on the MarkdownRender component, which supports Markdown and MDX. It allows for common rich text features such as images, tables, links, bold text, code blocks, and more. More complex and customized document writing and display requirements can be achieved using JSX. diff --git a/content/plus/chat/index.md b/content/plus/chat/index.md index edc1ca78ec..f9b81ce398 100644 --- a/content/plus/chat/index.md +++ b/content/plus/chat/index.md @@ -1,11 +1,12 @@ --- localeCode: zh-CN -order: 85 +order: 23 category: Plus title: Chat 对话 icon: doc-chat dir: column brief: 用于快速搭建对话内容 +showNew: true --- ## 使用场景 diff --git a/content/plus/codehighlight/index-en-US.md b/content/plus/codehighlight/index-en-US.md index 1021fd2dad..b0c8783436 100644 --- a/content/plus/codehighlight/index-en-US.md +++ b/content/plus/codehighlight/index-en-US.md @@ -1,14 +1,17 @@ --- localeCode: en-US -order: 0 +order: 24 category: Plus title: CodeHighlight icon: doc-codehighlight dir: column brief: Highlight code blocks in the page according to syntax +showNew: true --- -The Semi code highlighting component uses prismjs, which supports highlighting of 297 programming languages ​​(automatically configured `JavaScript` `CSS` `Class C` `html` `svg`, etc., other languages ​​need to be manually introduced), and has high scalability and rich plug-in ecology. +## When to use + +Semi `CodeHighlight` component uses `prismjs`, which supports highlighting of 297 programming languages ​​(automatically configured `JavaScript` `CSS` `Class C` `html` `svg`, etc., other languages ​​need to be manually introduced), and has high scalability and rich plug-in ecology. Pass the code plain text to `code` props, and pass the programming language name to `language`. Supported programming languages ​​and corresponding names can be viewed on the [Prismjs official website](https://prismjs.com/#supported-languages) diff --git a/content/plus/codehighlight/index.md b/content/plus/codehighlight/index.md index a015599f41..aa6f072fa9 100644 --- a/content/plus/codehighlight/index.md +++ b/content/plus/codehighlight/index.md @@ -1,17 +1,17 @@ --- localeCode: zh-CN -order: 0 +order: 24 category: Plus title: CodeHighlight 代码高亮 icon: doc-codehighlight dir: column brief: 根据语法高亮页面中的代码块 +showNew: true --- -Semi 代码高亮组件使用了 prismjs，支持297 种编程语言的高亮（已自动配置 `JavaScript` `CSS` `类 C` `html` `svg` 等，其他语言需要手动引入），同时具有高扩展性和丰富的插件生态。 - -向 `code` props 传入代码纯文本，并在 `language` 传入编程语言名称。支持的编程语言和对应名称在 [Prismjs 官网](https://prismjs.com/#supported-languages) 查看 - +## 使用场景 +Semi 代码高亮组件基于 prismjs 封装，支持297 种编程语言的高亮（已自动配置 `JavaScript` `CSS` `类 C` `html` `svg` 等，其他语言需要手动引入），同时具有高扩展性和丰富的插件生态。 +需要展示代码片段时推荐使用 CodeHighlight 组件 ## 代码演示 @@ -24,6 +24,7 @@ import { CodeHighlight } from '@douyinfe/semi-ui'; ``` ### 基本用法 +向 `code` props 传入代码纯文本，并在 `language` 传入编程语言名称。支持的编程语言和对应名称在 [Prismjs 官网](https://prismjs.com/#supported-languages) 查看 ```jsx live=true dir=column import { CodeHighlight } from '@douyinfe/semi-ui'; @@ -33,7 +34,7 @@ function Demo() { return { const handleClick = ()=>{ @@ -41,7 +42,7 @@ const Test = ()=>{ } return
test
}` - }/> + }/>; } ``` @@ -56,7 +57,7 @@ function Demo() { return + }/>; } ``` @@ -88,13 +89,13 @@ import "prismjs/components/prism-vala.js" ```jsx live=true dir="column" import { CodeHighlight } from '@douyinfe/semi-ui'; -import "prismjs/components/prism-vala.js" +import "prismjs/components/prism-vala.js"; function Demo() { return + }/>; } ``` diff --git a/content/input/hotkeys/index-en-US.md b/content/plus/hotkeys/index-en-US.md similarity index 96% rename from content/input/hotkeys/index-en-US.md rename to content/plus/hotkeys/index-en-US.md index 003f326958..8b2cd62abe 100644 --- a/content/input/hotkeys/index-en-US.md +++ b/content/plus/hotkeys/index-en-US.md @@ -1,14 +1,18 @@ --- localeCode: en-US -order: 30 -category: Input +order: 26 +category: Plus title: HotKeys icon: doc-configprovider width: 60% brief: used to facilitate the customization of keyboard shortcut +showNew: true --- +## When to use +When it is necessary to express the usage method of shortcut key combinations to users, using the `Hotkeys` component can quickly render the corresponding UI elements and automatically obtain event bindings. + ## Demos ### How to import diff --git a/content/plus/hotkeys/index.md b/content/plus/hotkeys/index.md new file mode 100644 index 0000000000..ff7fe89151 --- /dev/null +++ b/content/plus/hotkeys/index.md @@ -0,0 +1,250 @@ +--- +localeCode: zh-CN +order: 26 +category: Plus +title: HotKeys 快捷键 +icon: doc-configprovider +width: 60% +brief: 用于方便用户自定义快捷键及相关操作 +showNew: true +--- + +## 使用场景 +需要向用户表达快捷键组合的使用方式时，使用 Hotkeys 组件可快速渲染出对应的 UI 元素且自动获得事件绑定 + + +## 代码演示 + +### 如何引入 +HotKeys 从 2.66.0 开始支持 + +```jsx import +import { HotKeys } from '@douyinfe/semi-ui'; +``` + + +### 说明 +快捷键仅支持修饰键组合`Shift`,`Control`,`Meta`,`Alt`与其他键的组合。 +> [Meta](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey) 在MacOS中为`Command`，在Windows中为`Win` + +当设定快捷键与常用快捷键如`Ctrl/Meta + C`相同时，可以通过设置`preventDefault`控制默认事件是否触发。 + +### 基本用法 + +基本使用，通过`hotKeys`传入快捷键组合，通过 `onHotKey` 绑定快捷键处理函数，作出响应动作。 + +按下 Ctrl + Shift + A， 唤起modal。默认在 body.document 监听，全局生效。 + +[hotKeys取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)，也可以使用`HotKeys.Keys`进行设置 + +```jsx live=true +import React, { useState } from 'react'; +import { HotKeys, Modal } from '@douyinfe/semi-ui'; + +function Demo() { + const [visible, setVisible] = useState(false); + const showDialog = () => { + setVisible(true); + }; + const handleOk = () => { + setVisible(false); + }; + const handleCancel = () => { + setVisible(false); + }; + const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.A]; + + return ( +
+ + + This is the Modal opened by hotkey: {hotKeys.join('+')}. + +
+ ); +} +``` + +### 自定义内容 + +通过`content`传入渲染的字符 + +```jsx live=true +import React, { useState } from 'react'; +import { HotKeys, Modal } from '@douyinfe/semi-ui'; + +function Demo() { + const [visible, setVisible] = useState(false); + const showDialog = () => { + setVisible(true); + }; + const handleOk = () => { + setVisible(false); + }; + const handleCancel = () => { + setVisible(false); + }; + const hotKeys = [HotKeys.Keys.Control, 'Shift', HotKeys.Keys.B]; + + return ( +
+ + + This is the Modal opened by hotkey: {hotKeys.join('+')}. + +
+ ); +} +``` + +通过`render`传入代替渲染的元素 + +```jsx live=true +import React, { useState } from 'react'; +import { HotKeys, Modal, Tag } from '@douyinfe/semi-ui'; + +function Demo() { + const [visible, setVisible] = useState(false); + const showDialog = () => { + setVisible(true); + }; + const handleOk = () => { + setVisible(false); + }; + const handleCancel = () => { + setVisible(false); + }; + const hotKeys = [HotKeys.Keys.Control, HotKeys.Keys.R]; + + const newHotKeys = Press Ctrl+R to Open Modal; + return ( +
+ + + This is the Modal opened by hotkey: {hotKeys.join('+')}. + +
+ ); +} +``` + +### 阻止默认事件 + +通过设置`preventDefault`控制默认事件是否触发。 +```jsx live=true +import React, { useState } from 'react'; +import { HotKeys, Modal } from '@douyinfe/semi-ui'; + +function Demo() { + const [visible, setVisible] = useState(false); + const showDialog = () => { + setVisible(true); + }; + const handleOk = () => { + setVisible(false); + }; + const handleCancel = () => { + setVisible(false); + }; + const hotKeys = [HotKeys.Keys.Meta, HotKeys.Keys.S]; + + return ( +
+ +
+ + + This is the Modal opened by hotkey: {'Meta/Control + S'}. + +
+ ); +} +``` + +### 修改监听挂载DOM +快捷键默认在 body 监听，通过`getListenerTarget`修改快捷键监听挂载的DOM +```jsx live=true +import React, { useState, useRef } from 'react'; +import { HotKeys, Input, Modal } from '@douyinfe/semi-ui'; + +function Demo() { + const hotKeys = ["Control", "q"]; + const [visible, setVisible] = useState(false); + const showDialog = () => { + setVisible(true); + }; + const handleOk = () => { + setVisible(false); + }; + const handleCancel = () => { + setVisible(false); + }; + + const inputRef = useRef(null); + return ( +
+ + inputRef.current}> + + + This is the Modal opened by hotkey: {hotKeys.join('+')}. + +
+ ); +} +``` + +## API 参考 + +### HotKeys + +| 属性 | 说明 | 类型 | 默认值 | +| ----------------- | --------------------------------------------------------------------- | ------------------------------- | --------- | +| className | 类名 | string | | +| content | 设置显示内容 | string[] | - | +| getListenerTarget | 用于设置监听器挂载的DOM | () => HTMLElement | document.body | +| hotKeys | 设置快捷键组合，[取值参考](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) | KeyboardEvent.key[] | - | +| onClick | 点击回调函数 | () => void | - | +| onHotKey | 快捷键回调函数 | (e: KeyboardEvent) => void | - | +| preventDefault | 是否阻止快捷键默认行为 | boolean | false | +| render | 覆盖组件渲染 | () => ReactNode \| ReactNode | | +| style | 样式 | CSSProperties | | + + +## 设计变量 + + + + +## 相关物料 + + diff --git a/content/plus/lottie/index-en-US.md b/content/plus/lottie/index-en-US.md index 7aad6181fc..6848c165e8 100644 --- a/content/plus/lottie/index-en-US.md +++ b/content/plus/lottie/index-en-US.md @@ -1,23 +1,18 @@ --- localeCode: en-US -order: 23 +order: 27 category: Plus title: Lottie Animation icon: doc-lottie dir: column brief: Display Lottie animation on the web page +showNew: true --- -## Overview +## When to use The Lottie component can render Lottie animations conveniently and simply, and provides a way to obtain global Lottie and animation instances to meet a wider range of configuration needs. - -`lottie-web` is used internally to render Lottie animations. - -## Usage scenarios - -Compared to using `lottie-web` directly, use the Semi Lottie component - +`lottie-web` is used internally to render Lottie animations. Compared to using `lottie-web` directly, use the Semi Lottie component - No need to worry about the creation and destruction of animation containers - No need to worry about the life cycle of the animation itself - Easier to use with React projects diff --git a/content/plus/lottie/index.md b/content/plus/lottie/index.md index dce29a216f..8dd8bfb375 100644 --- a/content/plus/lottie/index.md +++ b/content/plus/lottie/index.md @@ -1,22 +1,18 @@ --- localeCode: zh-CN -order: 23 +order: 27 category: Plus title: Lottie 动画 icon: doc-lottie dir: column brief: 在网页中展示 Lottie 动画 +showNew: true --- -## 概述 - -Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。 - -内部使用 `lottie-web` 渲染 Lottie 动画。 - ## 使用场景 -相较于直接使用 `lottie-web`，使用 Semi Lottie 组件 +Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。内部基于 `lottie-web` 渲染 Lottie 动画。 +相较于直接使用 `lottie-web`，使用 Semi Lottie 组件的优势在于 - 无需关心动画容器的创建与销毁 - 无需关心动画本身的生命周期 diff --git a/content/plus/markdownrender/index-en-US.md b/content/plus/markdownrender/index-en-US.md index b0fc9a5f55..8e5a44eb73 100644 --- a/content/plus/markdownrender/index-en-US.md +++ b/content/plus/markdownrender/index-en-US.md @@ -1,11 +1,12 @@ --- localeCode: en-US -order: 22 +order: 25 category: Plus title: Markdown Render icon: doc-markdown dir: column brief: Instantly render Markdown and MDX in web pages +showNew: true --- ## When to use @@ -13,7 +14,7 @@ brief: Instantly render Markdown and MDX in web pages Markdown is a document markup language that can implement basic common rich text functions such as titles, pictures, tables, links, bolding, etc. through simple tags. MDX is based on Markdown and allows the introduction of JSX to achieve more complex and customized document writing and display requirements. -The MarkdownRender component provided by Semi supports rendering Markdown and MDX. No special configuration is required. By passing in plain text, rich text content that conforms to Semi style specifications can be rendered. +The `MarkdownRender` component provided by Semi supports rendering Markdown and MDX. No special configuration is required. By passing in plain text, rich text content that conforms to Semi style specifications can be rendered. Usually used in the following scenarios: diff --git a/content/plus/markdownrender/index.md b/content/plus/markdownrender/index.md index ce2386d4a2..cef848868f 100644 --- a/content/plus/markdownrender/index.md +++ b/content/plus/markdownrender/index.md @@ -1,11 +1,12 @@ --- localeCode: zh-CN -order: 22 +order: 25 category: Plus title: Markdown 渲染器 icon: doc-markdown dir: column brief: 在网页中即时渲染 Markdown 和 MDX +showNew: true --- ## 使用场景 diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index 258c72aaf1..28fc9488b1 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: 52 +order: 55 category: Show title: Avatar subTitle: avatar diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index b614dd1857..8fc6713093 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 52 +order: 55 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 9d6eb725a9..db54f67791 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: 53 +order: 56 category: Show title: Badge subTitle: Badge diff --git a/content/show/badge/index.md b/content/show/badge/index.md index 0916ab1827..c648b710fe 100644 --- a/content/show/badge/index.md +++ b/content/show/badge/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 53 +order: 56 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 672ce7dd71..e3389a89f6 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: 54 +order: 57 category: Show title: Calendar subTitle: Calendar diff --git a/content/show/calendar/index.md b/content/show/calendar/index.md index e663377a7d..392b67f751 100644 --- a/content/show/calendar/index.md +++ b/content/show/calendar/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 54 +order: 57 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 dc63d3b6d6..e98c318b98 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: 55 +order: 58 category: Show title: Card subTitle: Card diff --git a/content/show/card/index.md b/content/show/card/index.md index b26ad6cb79..5bba9ee00f 100644 --- a/content/show/card/index.md +++ b/content/show/card/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 55 +order: 58 category: 展示类 title: Card 卡片 subTitle: 卡片 diff --git a/content/show/carousel/index-en-US.md b/content/show/carousel/index-en-US.md index fb9902f666..c846f79337 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: 56 +order: 59 category: Show title: Carousel subTitle: Carousel diff --git a/content/show/carousel/index.md b/content/show/carousel/index.md index 0a6c707e8f..e0910860b1 100644 --- a/content/show/carousel/index.md +++ b/content/show/carousel/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 56 +order: 59 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 7590da10ff..ec862931ae 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: 75 +order: 77 category: Show title: Data Visualization icon: doc-vchart diff --git a/content/show/chart/index.md b/content/show/chart/index.md index 96d95093f6..7f32d7c9fe 100644 --- a/content/show/chart/index.md +++ b/content/show/chart/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 75 +order: 77 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 a6b9648491..ab5ca34c05 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: 57 +order: 60 category: Show title: Collapse subTitle: Collapse diff --git a/content/show/collapse/index.md b/content/show/collapse/index.md index b5a99acee0..81b3765248 100644 --- a/content/show/collapse/index.md +++ b/content/show/collapse/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 57 +order: 60 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 d08848c954..a186a5fbf0 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: 58 +order: 61 category: Show title: Collapsible subTitle: Collapsible diff --git a/content/show/collapsible/index.md b/content/show/collapsible/index.md index d3720d7ecb..cb0956290e 100644 --- a/content/show/collapsible/index.md +++ b/content/show/collapsible/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 58 +order: 61 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 a9ac0b870a..a66d2be3fc 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: 59 +order: 62 category: Show title: Description subTitle: Descriptions diff --git a/content/show/descriptions/index.md b/content/show/descriptions/index.md index ac5b6ce8e3..f5ed9d9511 100644 --- a/content/show/descriptions/index.md +++ b/content/show/descriptions/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 59 +order: 62 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 a85631641e..04f9fb0ecb 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: 60 +order: 63 category: Show title: Dropdown subTitle: Dropdown diff --git a/content/show/dropdown/index.md b/content/show/dropdown/index.md index 9af3f89f27..9fd2a2fd2a 100644 --- a/content/show/dropdown/index.md +++ b/content/show/dropdown/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 60 +order: 63 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 825f77d4dd..bbb64abe49 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: 61 +order: 64 category: Show title: Empty subTitle: Empty diff --git a/content/show/empty/index.md b/content/show/empty/index.md index 9c02eaf254..fcda8a3845 100644 --- a/content/show/empty/index.md +++ b/content/show/empty/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 61 +order: 64 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 f01fca560a..2a3f5be3fd 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: 62 +order: 65 category: Show title: Highlight icon: doc-highlight diff --git a/content/show/highlight/index.md b/content/show/highlight/index.md index ea4acc425d..6100ac0752 100644 --- a/content/show/highlight/index.md +++ b/content/show/highlight/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 62 +order: 65 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 c286e5dd75..25339611a9 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: 63 +order: 66 category: Show title: Image icon: doc-image diff --git a/content/show/image/index.md b/content/show/image/index.md index 703ddbff6a..c294032956 100644 --- a/content/show/image/index.md +++ b/content/show/image/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 63 +order: 66 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 1eb27f2a47..eaade98c69 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: 64 +order: 67 category: Show title: List subTitle: List diff --git a/content/show/list/index.md b/content/show/list/index.md index 7d06cb6ed4..8bb1ba3a56 100644 --- a/content/show/list/index.md +++ b/content/show/list/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 64 +order: 67 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 657bab655a..3917fe70f4 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: 65 +order: 68 category: Show title: Modal subTitle: Modal diff --git a/content/show/modal/index.md b/content/show/modal/index.md index 96e9514d02..f8ab824168 100644 --- a/content/show/modal/index.md +++ b/content/show/modal/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 65 +order: 68 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 0007ed8b59..f3d71dfb94 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: 66 +order: 69 category: Show title: OverflowList subTitle: OverflowList diff --git a/content/show/overflowlist/index.md b/content/show/overflowlist/index.md index cd7cf8953a..773b4421ab 100644 --- a/content/show/overflowlist/index.md +++ b/content/show/overflowlist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 66 +order: 69 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 de499b7ef9..7f19156a6a 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: 67 +order: 70 category: Show title: Popover subTitle: Popover diff --git a/content/show/popover/index.md b/content/show/popover/index.md index d52364d1a3..b2e640a7b5 100644 --- a/content/show/popover/index.md +++ b/content/show/popover/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 67 +order: 70 category: 展示类 title: Popover 气泡卡片 icon: doc-popover diff --git a/content/show/resizable/index.md b/content/show/resizable/index.md deleted file mode 100644 index 485dc24b89..0000000000 --- a/content/show/resizable/index.md +++ /dev/null @@ -1,735 +0,0 @@ ---- -localeCode: zh-CN -order: 68 -category: 展示类 -title: Resizable 伸缩框 -icon: doc-steps -brief: 根据用户的鼠标拖拽，改变组件的大小，支持单个组件伸缩与组合伸缩 ---- - -## 代码演示 - -### 如何引入 - -```jsx -import { Resizable } from '@douyinfe/semi-ui'; -import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui' -``` - -### 单个组件 基本使用 -通过`defaultSize`设置初始大小，可以通过`onResizeStart` `onResize` `onResizeEnd`设置拖拽的回调 - -```tsx -interface Size { - width: string | number; - height: string | number; -} -``` - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - const [text, setText] = useState('Drag edge to resize') - const opts_1 = { - content: 'resize start', - duration: 1, - stack: true, - }; - const opts_2 = { - content: 'resize end', - duration: 1, - stack: true, - }; - return ( -
- { setText('resizing') }} - onResizeStart={() => Toast.info(opts_1)} - onResizeEnd={() => { Toast.info(opts_2); setText('Drag edge to resize') }} - > -
- {text} -
- -
- ); -} - -``` - -### 控制伸缩方向 -通过设置`enable`的值开启/关闭特定伸缩方向，默认值均为`true` - -```tsx -interface Enable { - left: Boolean; - right: Boolean; - top: Boolean; - bottom: Boolean; - topLeft: Boolean; - topRight: Boolean; - bottomLeft: Boolean; - bottomRight: Boolean; -} -``` - - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable, Switch, Typography } from '@douyinfe/semi-ui'; - -function Demo() { - const [b, setB] = useState(false) - const { Title } = Typography; - return ( -
-
- - - {b ? 'able' : 'disable'} - -
- -
- {'enable.left:' + b} -
- -
- ); -} - -``` - -### 设置变化比例 - -通过`ratio`设置拖动和实际变化的比例 - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- ratio=2 -
- -
- ); -} - -``` - -### 锁定横纵比 - -通过`lockAspectRatio`设置锁定横纵比,可以为`boolean`或`number`,为`number`时表示横纵比为`number`,为`true`时锁定初始横纵比 - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- lock -
- - -
- 16 / 9 -
- -
- ); -} - -``` - -### 设置最大，最小宽高 -可通过 `maxHeight`，`maxWidth`，`minHeight`，`minWidth` 设置最大，最小宽高 - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- width在50到200之间，height在50到300之间 -
- -
- ); -} - -``` - -### 受控宽高 - -可通过 `size` 控制元素的宽高 - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - const [size, setSize] = useState({ width: 200, height: 300 }); - - const onChange = (() => { - let realSize = { width: size.width + 10, height: size.height + 10 }; - setSize(realSize); - }) - return ( -
- - -
- 受控 -
- -
- ); -} - -``` - -### 设置缩放值 - -通过设置 `scale`，整体缩放元素 -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- scale 0.5 -
- -
- ); -} - -``` - -### 根据元素限制元素宽高 - -通过 boundElement 设置用于限制宽高的元素，支持 string（'parent'｜'window'） - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- bound：parent -
- -
- ); -} - -``` - -### 自定义边角handler样式 - -可通过 handleNode设置不同方向的拖动元素节点，可通过 handleStyle，handleClassName 设置不同方向上的样式 - -```jsx -type HandleNode = { - left: ReactNode; - right: ReactNode; - top: ReactNode; - bottom: ReactNode; - topLeft: ReactNode; - topRight: ReactNode; - bottomLeft: ReactNode; - bottomRight: ReactNode; -} - -type HandleStyle = { - left: React.CSSProperties; - right: React.CSSProperties; - top: React.CSSProperties; - bottom: React.CSSProperties; - topLeft: React.CSSProperties; - topRight: React.CSSProperties; - bottomLeft: React.CSSProperties; - bottomRight: React.CSSProperties; -} - -type HandleClass = { - left: string; - right: string; - top: string; - bottom: string; - topLeft: string; - topRight: string; - bottomLeft: string; - bottomRight: string; -} -``` - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable, Button } from '@douyinfe/semi-ui'; -function Demo() { - return ( -
-
- }} - > -
- right -
- - - ); -} -``` - -### 允许阶段性调整宽高 - -可通过 grid ，snap 属性允许逐渐调整宽高。 -grid 属性用于指定调整大小应对齐的增量。默认为 [1, 1]。 -snap 属性用于指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴。默认为空。 -以上两个参数可结合 snapGap使用，该参数用于指定移动到下一个目标所需的最小间隙。默认为 0，这意味着始终使用grid/snap 设定的目标。 - -```tsx -interface Snap { - x: number[]; - y: number[]; -} -``` - -```jsx live=true -import React, { useState } from 'react'; -import { Resizable } from '@douyinfe/semi-ui'; - -function Demo() { - return ( -
- -
- snap -
- -
- ); -} -``` - -### 组合组件 基本使用 - -`ResizeGroup`的父元素需要具有主轴方向上的尺寸 -最好不要为`ResizeItem`设置`padding`，会导致最小尺寸不符合预期，可以为子元素设置`padding` - - - -通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical` -支持`onResizeStart` `onResize` `onResizeEnd`回调，支持`min` `max`设置最大最小宽高 - -```jsx live=true dir="column" -import React, { useState } from 'react'; -import { ResizeItem, ResizeHandler, ResizeGroup, Toast } from '@douyinfe/semi-ui'; - -function Demo() { - const [text, setText] = useState('Drag to resize') - return ( -
- - { setText('resizing') }} - onResizeEnd={() => { setText('Drag to resize') }} - > -
- {text + " min:10%"} -
- - - { setText('resizing') }} - > -
- {text + " min:10% max:30%"} -
- - - { setText('resizing') }} - > -
- {text} -
- - - { setText('resizing') }} - > -
- {text} -
- - -
- ); -} - -``` - -### 嵌套使用 -通过`direction`设置伸缩方向，可选值为`horizontal`和`vertical` - -```jsx live=true dir="column" -import React, { useState } from 'react'; -import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'; - -function Demo() { - const [text, setText] = useState('Drag to resize') - const opts_1 = { - content: 'resize start', - duration: 1, - stack: true, - }; - const opts = { - content: 'resize end', - duration: 1, - stack: true, - }; - return ( -
- - { setText('resizing') }} - onResizeStart={() => Toast.info(opts_1)} - onResizeEnd={() => { Toast.info(opts); setText('Drag to resize') }} - > -
- {'header'} -
- - - { setText('resizing') }} - > - - { setText('resizing') }} - onResizeStart={() => Toast.info(opts_1)} - onResizeEnd={() => { Toast.info(opts); setText('Drag to resize') }} - > -
- {'tab'} -
- - - { setText('resizing') }} - > -
- {text} -
- - - - - -
- ); -} -``` -```jsx live=true dir="column" -import React, { useState } from 'react'; -import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui'; - -function Demo() { - const [text, setText] = useState('Drag to resize') - const opts_1 = { - content: 'resize start', - duration: 1, - stack: true, - }; - const opts = { - content: 'resize end', - duration: 1, - stack: true, - }; - return ( -
- - - - -
- {text + ' min:10% max:30%'} -
- - - -
- - { setText('resizing') }} - onResizeEnd={() => { setText('Drag to resize') }} - > -
- {text + " min:10%"} -
- - - -
- {text + " min:10% max:40%"} -
- - - -
- {text} -
- - -
- - - -
- {text + ' max:30%'} -
- - - - - - { setText('resizing') }} - > - - -
- {'tab'} -
- - - -
- {'content'} -
- - - - -
- ); -} -``` - -## API 参考 - -### Resizable - -单个伸缩框组件。 - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ | -| className | 类名 | string | | | -| size | 控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | | -| defaultSize | 用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | | -| minWidth | 指定伸缩框最小宽度 | string \| number | | | -| maxWidth | 指定伸缩框最大宽度 | string \| number | | | -| minHeight | 指定伸缩框最小高度 | string \| number | | | -| maxHeight | 指定伸缩框最大高度 | string \| number | | -| lockAspectRatio | 设置伸缩框横纵比，当为`true`时按照初始宽高锁定 | boolean \| number | | | -| enable | 指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动 | [Enable](#控制伸缩方向) -| scale | 可伸缩元素被缩放的比例 | number | 1 | | -| boundElement | 用于限制可伸缩元素宽高的元素,传入 `parent` 设置父节点为限制节点 | string | | | -| handleNode | 用于设置拖拽处理元素各个方向的自定义节点 | [HandleNode](#自定义边角handler样式) | | | -| handleStyle | 用于设置拖拽处理元素各个方向的样式 | [HandleStyles](#自定义边角handler样式) | | | -| handleClass | 用于设置拖拽处理元素各个方向的类名称 | [HandleClasses](#自定义边角handler样式) | | | -| style | 样式 | CSSProperties | | -| snapGap | 用于指定移动到下一个目标所需的最小间隙。 | number | 0 | | -| snap | 指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴 | [Snap](#允许阶段性调整宽高) | null | | -| grid | 指定调整大小应对齐的增量 | \[number, number\] | \[1,1\] | | -| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | | -| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | | -| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | | - -### ResizeGroup - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- | -| className | 类名 | string | | | -| direction | 指定Group内的伸缩方向 | 'horizontal' \| 'vertical' | 'horizontal' | | - -### ResizeHandler - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- | -| className | 类名 | string | | | -| style | 样式 | CSSProperties | | - -### ResizeItem - - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ | -| className | 类名 | string | | | -| defaultSize | 用于设置初始宽高，**字符串支持%和px单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间** | string \| number | | | -| min | 指定伸缩框最小尺寸（百分比或像素值） | string | | | -| max | 指定伸缩框最大尺寸（百分比或像素值） | string | | | -| style | 样式 | CSSProperties | | -| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | | -| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | | -| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | | - - -## 设计变量 - \ No newline at end of file diff --git a/content/show/scrolllist/index-en-US.md b/content/show/scrolllist/index-en-US.md index bad7e58c4f..46c5a33890 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: 69 +order: 71 category: Show title: ScrollList subTitle: ScrollList diff --git a/content/show/scrolllist/index.md b/content/show/scrolllist/index.md index a02280ac5f..cab037f406 100644 --- a/content/show/scrolllist/index.md +++ b/content/show/scrolllist/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 69 +order: 71 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 02f4ccd5f5..60c5d5cbca 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: 70 +order: 72 category: Show title: SideSheet subTitle: SideSheet diff --git a/content/show/sidesheet/index.md b/content/show/sidesheet/index.md index c842c3c40d..9c962a9878 100644 --- a/content/show/sidesheet/index.md +++ b/content/show/sidesheet/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 70 +order: 72 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 c868885853..1363dd1838 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: 71 +order: 73 category: Show title: Table subTitle: Table diff --git a/content/show/table/index.md b/content/show/table/index.md index 0ab6d7358a..ee66bf4608 100644 --- a/content/show/table/index.md +++ b/content/show/table/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 71 +order: 73 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 7ee61bbeff..c316c1f613 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: 72 +order: 74 category: Show title: Tag subTitle: Tag diff --git a/content/show/tag/index.md b/content/show/tag/index.md index 69947e63e1..477c7b0902 100644 --- a/content/show/tag/index.md +++ b/content/show/tag/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 72 +order: 74 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 cce5d635b9..c317c4a3cf 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: 73 +order: 75 category: Show title: Timeline subTitle: Timeline diff --git a/content/show/timeline/index.md b/content/show/timeline/index.md index c9ecc69058..9ae8257a02 100644 --- a/content/show/timeline/index.md +++ b/content/show/timeline/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 73 +order: 75 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 62fd7459b8..3458e252d4 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: 74 +order: 76 category: Show title: Tooltip subTitle: Tooltip diff --git a/content/show/tooltip/index.md b/content/show/tooltip/index.md index 66a4e2699e..8311e9f9fb 100644 --- a/content/show/tooltip/index.md +++ b/content/show/tooltip/index.md @@ -1,6 +1,6 @@ --- localeCode: zh-CN -order: 74 +order: 76 category: 展示类 title: Tooltip 工具提示 icon: doc-tooltip diff --git a/content/start/faq/index-en-US.md b/content/start/faq/index-en-US.md index bb21010ab6..fc671f8114 100644 --- a/content/start/faq/index-en-US.md +++ b/content/start/faq/index-en-US.md @@ -37,7 +37,6 @@ No plans for this. Specific reasons: [Issue 311](https://github.com/DouyinFE/sem - All subsequent new features and components will be developed based on version 2.x. We recommend business parties to keep using the latest version as much as possible - Between 2.x versions, the API will remain **forward compatible** - The API will also remain **forward compatible** between 1.x versions. When upgrading from 1.x to 2.x, breaking changes will be included, please refer to the documentation for specific upgrade precautions -- 0.x versions are currently discontinued, and hotfix updates are made if and only if a bugfix has to be done. When upgrading from 0.x to 1.x, breaking changes will be included. For specific upgrade precautions, please refer to the documentation #### TS type check reports an error, indicating that the attribute children does not exist on xxx or that XXX cannot be used as a JSX component diff --git a/content/start/faq/index.md b/content/start/faq/index.md index af7d712851..1fbf02c61d 100644 --- a/content/start/faq/index.md +++ b/content/start/faq/index.md @@ -38,7 +38,6 @@ order: 8 - 后续所有新 Feature、新组件都会基于 2.x 版本进行开发，我们推荐业务方尽可能地保持使用最新版本 - 2.x 各版本之间，API 会保持**向前兼容** - 1.x 各版本之间，API 也会保持**向前兼容**。由 1.x 升级到 2.x 时，会包含 breaking change，具体升级注意事项请查阅文档 -- 0.x 版本目前已停止更新，当且仅当必须进行 bugfix 时才会进行 hotfix 更新。由 0.x 升级至 1.x 时，会包含 breaking change，具体升级注意事项请查阅文档 #### Semi 是否支持 Tree Shaking diff --git a/content/start/getting-started/index.md b/content/start/getting-started/index.md index 2550708367..7df08a1301 100644 --- a/content/start/getting-started/index.md +++ b/content/start/getting-started/index.md @@ -79,8 +79,11 @@ module.exports = semi({ ``` ## 4、在 Remix 中使用 -- @remix相关包版本要求 > 1.11.0，并安装 `@remix-run/css-bundle` + + 注意：以下配置适用于 Remix v1。Remix v2有多种构建模式，Semi 未进行过完整适配性测试，建议优先参考 Issue 2444 处理 + +- @remix相关包版本要求 > 1.11.0，并安装 `@remix-run/css-bundle` - 配置 `remix.config.js`，参考 [Remix Css Side-Effect Imports](https://remix.run/docs/en/v1/guides/styling#css-side-effect-imports)。打开 `unstable_cssSideEffectImports` 开关，并将 Semi 相关包配置在 `serverDependenciesToBundle` 中。 ```diff // remix.config.js @@ -94,9 +97,7 @@ module.exports = { + /^@douyinfe\/semi-illustrations/, ], }; - ``` - - 在 `root.tsx` 中进行配置，参考[Remix CSS Bundling](https://remix.run/docs/en/v1/guides/styling#css-bundling)。引入 `cssBundleHref`，并配置 `links` ```diff diff --git a/content/start/overview/index-en-US.md b/content/start/overview/index-en-US.md index 57e959d768..f1127ed336 100644 --- a/content/start/overview/index-en-US.md +++ b/content/start/overview/index-en-US.md @@ -23,7 +23,8 @@ Typography CodeHighlight, Markdown, Lottie, -Chat +Chat, +HotKeys ``` @@ -37,7 +38,6 @@ Button, Checkbox, DatePicker, Form, -HotKeys, Input, InputNumber, PinCode, diff --git a/content/start/overview/index.md b/content/start/overview/index.md index 6597318fbf..68f7655c81 100644 --- a/content/start/overview/index.md +++ b/content/start/overview/index.md @@ -24,7 +24,8 @@ Typography 版式 CodeHighlight 代码高亮, Markdown 渲染器, Lottie 动画, -Chat 聊天 +Chat 聊天, +HotKeys 快捷键 ``` ## 输入类 @@ -36,7 +37,6 @@ Button 按钮, Checkbox 复选框, DatePicker 日期选择器, Form 表单, -HotKeys 快捷键, Input 输入框, InputNumber 数字输入框, PinCode 验证码输入, diff --git a/content/start/web-components/index-en-US.md b/content/start/web-components/index-en-US.md index bfdee8dfbd..214feecfa5 100644 --- a/content/start/web-components/index-en-US.md +++ b/content/start/web-components/index-en-US.md @@ -4,6 +4,7 @@ title: Web Components icon: doc-webcomponents localeCode: en-US order: 10 +showNew: true brief: Semi UI 在 web components 中使用的最佳实践 --- diff --git a/content/start/web-components/index.md b/content/start/web-components/index.md index 652d4c4f4a..49414c08c2 100644 --- a/content/start/web-components/index.md +++ b/content/start/web-components/index.md @@ -4,6 +4,7 @@ title: Web components 适配 icon: doc-webcomponents localeCode: zh-CN order: 10 +showNew: true brief: Best practices for using Semi UI in web components --- diff --git a/gatsby-node.js b/gatsby-node.js index 9f4e007e94..cd5547de83 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -11,7 +11,7 @@ const fs = require('fs'); const items = ['basic', 'chart']; const sha1 = require('sha1'); const hash = sha1(`${new Date().getTime()}${Math.random()}`); -const numHash = Math.round(Math.random()*1000000); +const numHash = Math.round(Math.random() * 1000000); const glob = require('glob'); @@ -91,24 +91,24 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => } ); } - console.log(["node_modules",resolve("node_modules")]); + console.log(["node_modules", resolve("node_modules")]); actions.setWebpackConfig({ - externals:{ - "node:url":"url", - "node:path":"path", - "node:process":"process", + externals: { + "node:url": "url", + "node:path": "path", + "node:process": "process", }, resolve: { alias: { - "vfile/do-not-use-conditional-minurl":isSSR ? "vfile/lib/minurl.js":"vfile/lib/minurl.browser.js", - "vfile/do-not-use-conditional-minproc":isSSR?"vfile/lib/minproc.js":"vfile/lib/minproc.browser.js", + "vfile/do-not-use-conditional-minurl": isSSR ? "vfile/lib/minurl.js" : "vfile/lib/minurl.browser.js", + "vfile/do-not-use-conditional-minproc": isSSR ? "vfile/lib/minproc.js" : "vfile/lib/minproc.browser.js", "vfile/do-not-use-conditional-minpath": isSSR ? "vfile/lib/minpath.js" : "vfile/lib/minpath.browser.js", "#minpath": isSSR ? "vfile/lib/minpath.js" : "vfile/lib/minpath.browser.js", "#minproc": isSSR ? "vfile/lib/minproc.js" : "vfile/lib/minproc.browser.js", "#minurl": isSSR ? "vfile/lib/minurl.js" : "vfile/lib/minurl.browser.js", - "estree-util-visit/do-not-use-color": isSSR ? "estree-util-visit/lib/color.node.js":"estree-util-visit/lib/color.default.js", - "devlop":"devlop/lib/default.js", - "unist-util-visit-parents/do-not-use-color": isSSR?"unist-util-visit-parents/lib/color.node.js":"unist-util-visit-parents/lib/color.js", + "estree-util-visit/do-not-use-color": isSSR ? "estree-util-visit/lib/color.node.js" : "estree-util-visit/lib/color.default.js", + "devlop": "devlop/lib/default.js", + "unist-util-visit-parents/do-not-use-color": isSSR ? "unist-util-visit-parents/lib/color.node.js" : "unist-util-visit-parents/lib/color.js", 'semi-site-header': process.env.SEMI_SITE_HEADER || '@douyinfe/semi-site-header', 'semi-site-banner': process.env.SEMI_SITE_BANNER || '@douyinfe/semi-site-banner', 'univers-webview': process.env.SEMI_SITE_UNIVERS_WEBVIEW || resolve('packages/semi-ui'), @@ -127,7 +127,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => 'locale': resolve('src/locale'), 'src': resolve('src') }, - extensions:["*",".mjs",".js",".json"] + extensions: ["*", ".mjs", ".js", ".json"] }, module: { rules: [ @@ -154,12 +154,12 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => use: [...srcScssUse, resolve('packages/semi-webpack/lib/semi-theme-loader.js')], }, { - test:/\.m?js/, - include: [/micromark-util-sanitize-uri/,/mdast-util-from-markdown/,/micromark/,/mdast-util-to-markdown/,/semi-foundation\/node_modules\/@mdx-js/], - use: ["esbuild-loader"] + test: /\.m?js/, + include: [/micromark-util-sanitize-uri/, /mdast-util-from-markdown/, /micromark/, /mdast-util-to-markdown/, /semi-foundation\/node_modules\/@mdx-js/], + use: ["esbuild-loader"] }, { - test: [/\.jsx?$/,/\.mjs/], + test: [/\.jsx?$/, /\.mjs/], include: [path.resolve(__dirname, 'src')], use: { loader: 'esbuild-loader', @@ -196,7 +196,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) => 'process.env.SEMI_SITE_BANNER': JSON.stringify(process.env.SEMI_SITE_BANNER), "process.env.SEMI_SITE_UNIVERS_WEBVIEW": JSON.stringify(process.env.SEMI_SITE_UNIVERS_WEBVIEW), 'process.env.D2C_URL': JSON.stringify(process.env.D2C_URL), - "ASSET_PREFIX": JSON.stringify((process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN']) ? `https://${(process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN'])}/${process.env['CDN_PATH_PREFIX']}`: ""), + "ASSET_PREFIX": JSON.stringify((process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN']) ? `https://${(process.env['CDN_OUTER_CN'] || process.env['CDN_INNER_CN'])}/${process.env['CDN_PATH_PREFIX']}` : ""), })], }); }; @@ -263,6 +263,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { title localeCode icon + showNew } } node { @@ -274,6 +275,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { localeCode order icon + showNew } } next { @@ -285,6 +287,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { title localeCode icon + showNew } } } @@ -320,7 +323,7 @@ exports.onPostBuild = async () => { for (let file of pageDataFiles) { const newFilename = file.replace(/([a-zA-Z0-9\-]+)\.json/g, (_, p1)=> { replacedNameSet.add(p1); - return `${p1}${/^\d+$/.test(p1)?numHash:`.${hash}`}.json`; + return `${p1}${/^\d+$/.test(p1) ? numHash : `.${hash}`}.json`; }); fs.renameSync(file, newFilename); } @@ -342,7 +345,7 @@ exports.onPostBuild = async () => { return `${p1}.json`; } }); - result=result.replace(/designToken.json(\?v=[a-f0-9]*)?/g, + result = result.replace(/designToken.json(\?v=[a-f0-9]*)?/g, `designToken.json?v=${hash}`); fs.writeFileSync(file, result, 'utf8'); } @@ -358,7 +361,7 @@ exports.onPostBuild = async () => { } const stats = fs.statSync(file); if (stats.isFile()) { - console.log("Notice: Add Hash to JSON File "+ file); + console.log("Notice: Add Hash to JSON File " + file); if (file.includes("public/editor")) { continue; } @@ -370,7 +373,7 @@ exports.onPostBuild = async () => { } } - result=result.replace(/designToken.json(\?v=[a-f0-9]*)?/g, + result = result.replace(/designToken.json(\?v=[a-f0-9]*)?/g, `designToken.json?v=${hash}`); fs.writeFileSync(file, result, 'utf8'); } @@ -386,7 +389,7 @@ exports.onPostBuild = async () => { const fileNameWithoutExt = filename.split('.')[0]; const originHash = fileNameWithoutExt.split('-').at(-1); - if (originHash && originHash!==fileNameWithoutExt) { + if (originHash && originHash !== fileNameWithoutExt) { let fileNameWithoutExtWithHash = fileNameWithoutExt.replace(originHash, `${originHash}${numHash}`); replaceNames[originHash] = `${originHash}${numHash}`; fs.renameSync(file, path.join(path.dirname(file), `${fileNameWithoutExtWithHash}.js`)); @@ -402,7 +405,7 @@ exports.onPostBuild = async () => { const fileNameWithoutExt = filename.split('.')[0]; const originHash = fileNameWithoutExt.split('-').at(-1); - if (originHash && originHash!==fileNameWithoutExt) { + if (originHash && originHash !== fileNameWithoutExt) { let fileNameWithoutExtWithHash = fileNameWithoutExt.replace(originHash, `${originHash}${numHash}`); replaceNames[originHash] = `${originHash}${numHash}`; fs.renameSync(file, path.join(path.dirname(file), `${fileNameWithoutExtWithHash}.js.map`)); @@ -439,7 +442,7 @@ exports.onPostBuild = async () => { const originHash = fileNameWithoutExt.split('.').at(-1); - if (originHash && originHash!==fileNameWithoutExt) { + if (originHash && originHash !== fileNameWithoutExt) { let fileNameWithoutExtWithHash = fileNameWithoutExt.replace(originHash, `${originHash}${numHash}`); replaceNames[originHash] = `${originHash}${numHash}`; fs.renameSync(file, path.join(path.dirname(file), `${fileNameWithoutExtWithHash}.css`)); diff --git a/src/components/DesignPageAnchor/index.jsx b/src/components/DesignPageAnchor/index.jsx index 4e295dd063..61fd034ceb 100644 --- a/src/components/DesignPageAnchor/index.jsx +++ b/src/components/DesignPageAnchor/index.jsx @@ -1,7 +1,7 @@ -import { Anchor } from "@douyinfe/semi-ui"; -import React from "react"; +import { Anchor } from '@douyinfe/semi-ui'; +import React from 'react'; import sha1 from 'sha1'; -import "./index.scss"; +import './index.scss'; const makeAnchorId = id => { if (typeof id === 'object') { @@ -10,7 +10,7 @@ const makeAnchorId = id => { if (!id) { return null; } - return 'sha1'+sha1(id); + return 'sha1' + sha1(id); }; const PageAnchor = props => { @@ -24,41 +24,47 @@ const PageAnchor = props => { return data.map(item => { if (layer && Array.isArray(item.items)) { - return { - e.preventDefault(); - e.stopPropagation(); - const iframeDOM=document.querySelector('iframe'); - const dom = iframeDOM?.contentWindow?.document?.querySelector("#" + makeAnchorId(item.title)); - dom?.scrollIntoView(); - }}> - - {getAnchorLink(item.items, currentLayer + 1)} - - ; - + return ( + { + e.preventDefault(); + e.stopPropagation(); + const iframeDOM = document.querySelector('iframe'); + const dom = iframeDOM?.contentWindow?.document?.querySelector( + '#' + makeAnchorId(item.title) + ); + dom?.scrollIntoView(); + }} + > + + {getAnchorLink(item.items, currentLayer + 1)} + + + ); } else { - return { - e.preventDefault(); - e.stopPropagation(); - const iframeDOM=document.querySelector('iframe'); - const dom = iframeDOM?.contentWindow?.document?.querySelector("#" + makeAnchorId(item.title)); - dom?.scrollIntoView(); - }}> - - ; + return ( + { + e.preventDefault(); + e.stopPropagation(); + const iframeDOM = document.querySelector('iframe'); + const dom = iframeDOM?.contentWindow?.document?.querySelector( + '#' + makeAnchorId(item.title) + ); + dom?.scrollIntoView(); + }} + > + + + ); } - } - ); + }); }; return ( - + {getAnchorLink(data)} ); diff --git a/src/components/layout.js b/src/components/layout.js index e6743e6997..691fc87010 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -136,6 +136,7 @@ const AppLayout = ({ type, location, children }) => { localeCode icon order + showNew } } } diff --git a/src/components/side-nav.js b/src/components/side-nav.js index c8d759d10e..a3fbe330d0 100644 --- a/src/components/side-nav.js +++ b/src/components/side-nav.js @@ -1,5 +1,5 @@ import React, { useState, useEffect, useMemo, Suspense } from 'react'; -import { Nav, Icon } from '@douyinfe/semi-ui'; +import { Nav, Icon, Tag } from '@douyinfe/semi-ui'; import { withPrefix, Link } from 'gatsby'; import { getLocale } from 'utils/locale'; import IconMap from '../images/docIcons'; @@ -31,7 +31,7 @@ const SideNav = ({ location = null, type = null, itemsArr, edges, style, hasBann navData[categoryIndex].items = navData[categoryIndex].items || []; navData[categoryIndex].items.push({ itemKey: `/${node.fields.slug}`, - text: node.frontmatter.title, + text: node.frontmatter.showNew ? <>{node.frontmatter.title} New : node.frontmatter.title, icon: } size={'extra-large'} aria-hidden={true} /> || '', order: node.frontmatter.order || 0, // link: `/${node.fields.slug}`, @@ -52,7 +52,7 @@ const SideNav = ({ location = null, type = null, itemsArr, edges, style, hasBann {items?.map(item=>{ return ( - + ); })} diff --git a/src/styles/index.scss b/src/styles/index.scss index 1b8cf578f9..df25ed4df5 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -173,4 +173,9 @@ body[theme-mode='dark'] { } } } -/* ---- Left side Nav start ---- */ +#side-nav { + .semi-navigation-item-text { + text-overflow: inherit; + } +} +/* ---- Left side Nav end ---- */