diff --git a/content/input/pincode/index.md b/content/input/pincode/index.md index c46bf00edd..004b7e8b0c 100644 --- a/content/input/pincode/index.md +++ b/content/input/pincode/index.md @@ -3,7 +3,7 @@ localeCode: zh-CN order: 31 category: 输入类 title: PinCode 验证码输入 -icon: doc-input +icon: doc-pincode width: 60% brief: 用于便捷直观地输入验证码 --- diff --git a/content/plus/codehighlight/index.md b/content/plus/codehighlight/index.md index c587723032..a015599f41 100644 --- a/content/plus/codehighlight/index.md +++ b/content/plus/codehighlight/index.md @@ -3,7 +3,7 @@ localeCode: zh-CN order: 0 category: Plus title: CodeHighlight 代码高亮 -icon: doc-configprovider +icon: doc-codehighlight dir: column brief: 根据语法高亮页面中的代码块 --- diff --git a/content/plus/lottie/index-en-US.md b/content/plus/lottie/index-en-US.md index d9b368471b..d4ae2cb554 100644 --- a/content/plus/lottie/index-en-US.md +++ b/content/plus/lottie/index-en-US.md @@ -18,9 +18,9 @@ The Lottie component can render Lottie animations conveniently and simply, and p 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 +- 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 ## Demos @@ -29,58 +29,56 @@ Compared to using `lottie-web` directly, use the Semi Lottie component Lottie component supported from v2.62.0 ```jsx -import { Lottie } from "@douyinfe/semi-ui"; +import { Lottie } from '@douyinfe/semi-ui'; ``` - - ### Basic Usage **When the Lottie animation resource JSON is on CDN** Pass path=your lottie json URL to the `params` props - - ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - return
- -
; + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + return ( +
+ +
+ ); }; - ``` - **When Lottie animation resource JSON needs to be packaged into the website code** Pass animationData=your lottie json object into the `params` props (the Demo request JSON below is only for demonstration. In actual projects, json should be manually imported instead of obtained through network requests, so that JSON animation resources can be packaged into the website code) ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - const [data, setData] = useState(""); + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + const [data, setData] = useState(''); useEffect(() => { fetch(jsonURL) - .then(resp=>resp.json()) + .then(resp => resp.json()) .then(setData); - }, []); - return
- -
; + return ( +
+ +
+ ); }; - ``` ### Params Other common parameters @@ -102,7 +100,6 @@ Common parameters } ``` - ### Get the current animation instance Use `getAnimationInstance` to get the animation instance of the currently playing animation. The instance contains many methods for adjusting various parameters of the animation, such as playing and pausing, getting the current frame number, adjusting the playback speed, etc. @@ -110,15 +107,26 @@ Use `getAnimationInstance` to get the animation instance of the currently playin For more information about the methods contained in the animation instance, please refer to the `lottie-web` [documentation](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage) ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - return
- {console.log(animation);}} params={{ path: jsonURL }} width={"300px"} />; -
+ const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + return ( +
+ { + console.log(animation); + }} + params={{ path: jsonURL }} + width={'300px'} + height={'300px'} + /> + ; +
+ ); }; ``` @@ -129,27 +137,33 @@ Use `getLottie` Props to get global lottie, or use the static method `Lottie.get For more information about the methods on the global lottie, please refer to the `lottie-web` [documentation](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage) ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; -()=>{ - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - console.log("lottie", Lottie.getLottie()); - - return
- console.log("lottie", lottie)} params={{ path: jsonURL }} width={"300px"} />; -
+() => { + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + console.log('lottie', Lottie.getLottie()); + + return ( +
+ console.log('lottie', lottie)} + params={{ path: jsonURL }} + width={'300px'} + height={'300px'} + /> + ; +
+ ); }; - ``` - - ### API | Property | Description | Type | Default value | -|-----------|----------------------|--------------------------------------|-----| +| --- | --- | --- | --- | | className | Class name | string | - | | params | Used to configure animation related parameters | Same as lottie-web lottie.loadAnimation input | - | | getAnimationInstance | Get the current animation AnimationItem | (animation:AnimationItem)=>void | - | @@ -159,7 +173,3 @@ import React from "react"; ## Design Tokens - - - - diff --git a/content/plus/lottie/index.md b/content/plus/lottie/index.md index ffdd7274af..dce29a216f 100644 --- a/content/plus/lottie/index.md +++ b/content/plus/lottie/index.md @@ -3,14 +3,13 @@ localeCode: zh-CN order: 23 category: Plus title: Lottie 动画 -icon: doc-configprovider +icon: doc-lottie dir: column brief: 在网页中展示 Lottie 动画 --- ## 概述 - Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。 内部使用 `lottie-web` 渲染 Lottie 动画。 @@ -19,9 +18,9 @@ Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获 相较于直接使用 `lottie-web`，使用 Semi Lottie 组件 -- 无需关心动画容器的创建与销毁 -- 无需关心动画本身的生命周期 -- 更易和 React 项目结合使用 +- 无需关心动画容器的创建与销毁 +- 无需关心动画本身的生命周期 +- 更易和 React 项目结合使用 ## 代码演示 @@ -30,30 +29,29 @@ Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获 Lottie 从 v2.62.0 开始支持 ```jsx -import { Lottie } from "@douyinfe/semi-ui"; +import { Lottie } from '@douyinfe/semi-ui'; ``` - - ### 基本用法 - **当 Lottie 动画资源 JSON 在 CDN 上时** 向 `params` props 里传入 path= 你的 lottie json 的 URL 即可 ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - return
- -
; + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + return ( +
+ +
+ ); }; - ``` **当 Lottie 动画资源 JSON 需要被打包到网站代码中时** @@ -61,25 +59,26 @@ import React from "react"; 向 `params` props 里传入 animationData= 你的 lottie json 对象即可 (下方 Demo 请求 JSON 是仅作为演示，实际项目中 json 应当被手动 import，而不是通过网络请求获取，这样 JSON 动画资源才会被打包进网站代码) ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - const [data, setData] = useState(""); + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + const [data, setData] = useState(''); useEffect(() => { fetch(jsonURL) - .then(resp=>resp.json()) + .then(resp => resp.json()) .then(setData); - }, []); - return
- -
; + return ( +
+ +
+ ); }; - ``` ### Params 其他常用参数 @@ -101,7 +100,6 @@ import React from "react"; } ``` - ### 获取当前动画实例 使用 `getAnimationInstance` 获取当前播放的动画的 animation 实例，实例上含有许多方法用于调整动画的各项参数，例如播放暂停，获取当前帧序号，调整播放速度等。 @@ -109,15 +107,25 @@ import React from "react"; 关于动画实例上含有的方法，更多信息可以参考 `lottie-web` [文档](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage) ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; () => { - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - return
- {console.log(animation);}} params={{ path: jsonURL }} width={"300px"} /> -
+ const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + return ( +
+ { + console.log(animation); + }} + params={{ path: jsonURL }} + width={'300px'} + height={'300px'} + /> +
+ ); }; ``` @@ -127,39 +135,39 @@ import React from "react"; 关于全局 lottie 上含有的方法，更多信息可以参考 `lottie-web` [文档](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage) - ```jsx live=true -import { Lottie } from "@douyinfe/semi-ui"; -import React from "react"; - -()=>{ - const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json"; - - console.log("lottie", Lottie.getLottie()); - - return
- console.log("lottie", lottie)} params={{ path: jsonURL }} width={"300px"} /> -
-}; +import { Lottie } from '@douyinfe/semi-ui'; +import React from 'react'; +() => { + const jsonURL = + 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lottie_demo.json'; + + console.log('lottie', Lottie.getLottie()); + + return ( +
+ console.log('lottie', lottie)} + params={{ path: jsonURL }} + width={'300px'} + height={'300px'} + /> +
+ ); +}; ``` - - ### API -| 属性 | 说明 | 类型 | 默认值 | -|-----------|----------------------|--------------------------------------|-----| -| className | 类名 | string | - | -| params | 用于配置动画相关参数 | 同 lottie-web lottie.loadAnimation 入参 | - | -| getAnimationInstance | 获取当前动画 AnimationItem | (animation:AnimationItem)=>void | - | -| getLottie | 获取全局 Lottie | (lottie: Lottie)=>void | - | -| style | 样式 | CSSProperties | - | +| 属性 | 说明 | 类型 | 默认值 | +| -------------------- | -------------------------- | --------------------------------------- | ------ | +| className | 类名 | string | - | +| params | 用于配置动画相关参数 | 同 lottie-web lottie.loadAnimation 入参 | - | +| getAnimationInstance | 获取当前动画 AnimationItem | (animation:AnimationItem)=>void | - | +| getLottie | 获取全局 Lottie | (lottie: Lottie)=>void | - | +| style | 样式 | CSSProperties | - | ## 设计变量 - - - - diff --git a/content/plus/markdownrender/index.md b/content/plus/markdownrender/index.md index 42037ed28a..ecf46b3695 100644 --- a/content/plus/markdownrender/index.md +++ b/content/plus/markdownrender/index.md @@ -3,7 +3,7 @@ localeCode: zh-CN order: 22 category: Plus title: Markdown 渲染器 -icon: doc-configprovider +icon: doc-markdown dir: column brief: 在网页中即时渲染 Markdown 和 MDX --- @@ -34,7 +34,6 @@ import { MarkdownRender } from '@douyinfe/semi-ui'; ``` - ### 基本用法 导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。 diff --git a/src/images/docIcons/doc-codehighlight.svg b/src/images/docIcons/doc-codehighlight.svg new file mode 100644 index 0000000000..b8665b2fad --- /dev/null +++ b/src/images/docIcons/doc-codehighlight.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/docIcons/doc-lottie.svg b/src/images/docIcons/doc-lottie.svg new file mode 100644 index 0000000000..fe1bfb53ec --- /dev/null +++ b/src/images/docIcons/doc-lottie.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/docIcons/doc-markdown.svg b/src/images/docIcons/doc-markdown.svg new file mode 100644 index 0000000000..d50acb6584 --- /dev/null +++ b/src/images/docIcons/doc-markdown.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/images/docIcons/doc-pincode.svg b/src/images/docIcons/doc-pincode.svg new file mode 100644 index 0000000000..b533e4e71f --- /dev/null +++ b/src/images/docIcons/doc-pincode.svg @@ -0,0 +1,10 @@ + + + + + + + + + +