Merge pull request #2297 from DouyinFE/plus/lottie

Plus/lottie

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 72
+order: 73
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 72
+order: 73
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 74
+order: 75
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 74
+order: 75
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 75
+order: 76
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 75
+order: 76
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title: Select
 subTitle: Select

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: Select 选择器
 icon: doc-select

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

content/input/switch/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: Switch 开关
 icon: doc-switch

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 输入类
 title: Upload 上传
 icon: doc-upload

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -19,6 +19,7 @@ const order = [
     'space',
     'typography',
     "markdownrender",
+    "lottie",
     'autocomplete',
     'cascader',
     'checkbox',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 76
+order: 77
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 76
+order: 77
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 78
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 78
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/codehighlight/index-en-US.md

@@ -0,0 +1,137 @@
+---
+localeCode: en-US
+order: 0
+category: Plus
+title:  CodeHighlight
+icon: doc-configprovider
+dir: column
+brief: Highlight code blocks in the page according to syntax
+---
+
+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.
+
+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)
+
+## Demos
+
+### How to introduce
+
+```jsx
+import { CodeHighlight } from '@douyinfe/semi-ui';
+```
+
+### Basic usage
+
+```jsx live=true dir=column
+import { CodeHighlight } from '@douyinfe/semi-ui';
+
+function Demo() {
+
+    return <CodeHighlight
+        language={"javascript"} code={
+        `
+import * as React from 'react"
+const Test = ()=>{
+    const handleClick = ()=>{
+        alert("Click")
+    }
+    return <div onClick={handleClick}>test</div>
+}`
+    }/>
+}
+
+```
+
+**CSS**
+
+```jsx live=true dir=column
+import { CodeHighlight } from '@douyinfe/semi-ui';
+
+function Demo() {
+
+    return <CodeHighlight
+        language={"css"} code={
+        `.grid {
+    .semi-row,
+    .semi-row-flex {
+        text-align: center;
+        .semi-col {
+            min-height: 30px;
+            line-height: 30px;
+            background: var(--semi-color-primary-light-default);
+            outline: 1px solid var(--semi-color-primary-light-active);
+        }
+    }
+}
+`
+    }/>
+}
+
+```
+
+
+### Support other languages
+
+Support 297 languages. Except for `JavaScript` `CSS` `Class C` `html` `svg`, support for other languages ​​needs to be manually imported and configured.
+
+For example, to highlight the Vala language used to write the front-end UI of GTK programs, you need to import `prism-vala.js`
+
+```javascript
+import "prismjs/components/prism-vala.js"
+```
+
+```jsx live=true dir=column
+import { CodeHighlight } from '@douyinfe/semi-ui';
+import "prismjs/components/prism-vala.js"
+
+function Demo() {
+    return <CodeHighlight
+        language={"vala"} code={
+        `public class ExampleApp : Gtk.Application {
+    public ExampleApp () {
+        Object (application_id: "com.example.App");
+    }
+
+    public override void activate () {
+        var win = new Gtk.ApplicationWindow (this);
+
+        var btn = new Gtk.Button.with_label ("Hello World");
+        btn.clicked.connect (win.close);
+
+        win.child = btn;
+        win.present ();
+    }
+
+    public static int main (string[] args) {
+        var app = new ExampleApp ();
+        return app.run (args);
+    }
+}
+`
+    }/>
+}
+
+```
+
+
+### Customize the theme
+
+Set `defaultTheme={false}` to turn off the default theme, then manually copy the css file of the required theme and import it into the project.
+Some themes can be found under prismjs/themes in node_modules, and you can also search for other themes you like on the Internet.
+
+### API
+
+| Property | Description | Type | Default value |
+|-----------|---------------------------|--------|------|
+| className | Class name | string | - |
+| code | Code text | string | - |
+| defaultTheme | Whether to use the default theme, set when adding your own theme false | bool | true |
+| language | Language type | string | - |
+|lineNumber | Whether to enable line number display | boolean | true |
+| style | Style | CSSProperties | - |
+
+## Design Tokens
+
+<DesignToken/>
+
+

content/plus/lottie/index-en-US.md

@@ -0,0 +1,163 @@
+---
+localeCode: en-US
+order: 21
+category: Plus
+title: Lottie Animation
+icon: doc-configprovider
+dir: column
+brief: Display Lottie animation on the web page
+---
+
+## Overview
+
+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
+
+- 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
+
+### How to import
+
+```jsx
+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";
+
+() => {
+    const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon-click.json";
+
+    return  <div style={{background:"#e2dfdf"}}>
+        <Lottie params={{ path: jsonURL }} width={"300px"} />
+    </div>;
+};
+
+```
+
+
+**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";
+
+() => {
+    const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon-click.json";
+    const [data, setData] = useState("");
+
+    useEffect(() => {
+        fetch(jsonURL)
+            .then(resp=>resp.json())
+            .then(setData);
+
+    }, []);
+
+    return <div style={{background:"#e2dfdf"}}>
+        <Lottie params={{ animationData: data }} width={"300px"} />
+    </div>;
+};
+
+```
+
+### Params Other common parameters
+
+`params` will be passed to `lottie.loadAnimation` of `lottie-web` by the component. Please refer to `lottie-web` [documentation](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage)
+
+Common parameters
+
+```json
+//params
+{
+  container: element, // Rendering container, if not passed, Semi Lottie component will automatically configure and generate
+  renderer: 'svg', // Rendering mode, default SVG
+  loop: true, // Whether to open loop, default true
+  autoplay: true, // Whether to play automatically, default true, when set to false, you need to manually play through the play method on the animation instance
+  path: 'data.json' // URL path of animation JSON file (mutually exclusive with animationData)
+  animationData: {/*...*/} // JSON object of animation (mutually exclusive with animationData)
+  /*...*/
+}
+```
+
+
+### 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.
+
+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";
+
+() => {
+    const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon-click.json";
+
+    return <div style={{background:"#e2dfdf"}}>
+        <Lottie getAnimationInstance={(animation )=>{console.log(animation);}} params={{ path: jsonURL }} width={"300px"} />;
+    </div>
+};
+```
+
+### Get global Lottie
+
+Use `getLottie` Props to get global lottie, or use the static method `Lottie.getLottie` on the Semi Lottie component to get global lottie
+
+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";
+
+()=>{
+    const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon-click.json";
+
+    console.log("lottie", Lottie.getLottie());
+
+    return <div style={{background:"#e2dfdf"}}>
+        <Lottie getLottie={lottie=>console.log("lottie", lottie)} params={{ path: jsonURL }} width={"300px"} />;
+    </div>
+};
+
+```
+
+
+
+### 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 | - |
+| getLottie | Get the global Lottie | (lottie: Lottie)=>void | - |
+| style | Style | CSSProperties | - |
+
+## Design Tokens
+
+<DesignToken/>
+
+
+
+

content/plus/lottie/index.md

@@ -0,0 +1,163 @@
+---
+localeCode: zh-CN
+order: 21
+category: Plus
+title: Lottie 动画
+icon: doc-configprovider
+dir: column
+brief: 在网页中展示 Lottie 动画
+---
+
+## 概述
+
+
+Lottie 组件能够便捷简单地渲染 Lottie 动画，同时提供方式获取到全局 Lottie 和 动画实例满足更广泛的配置需求。
+
+内部使用 `lottie-web` 渲染 Lottie 动画。
+
+## 使用场景
+
+相较于直接使用 `lottie-web`，使用 Semi Lottie 组件
+
+- 无需关心动画容器的创建与销毁
+- 无需关心动画本身的生命周期
+- 更易和 React 项目结合使用
+
+## 代码演示
+
+### 如何引入
+
+```jsx
+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";
+
+() => {
+    const jsonURL = "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/icon-click.json";
+
+    return  <div style={{background:"#e2dfdf"}}>
+            <Lottie params={{ path: jsonURL }} width={"300px"} />
+        </div>;
+};
+
+```
+
+**当 Lottie 动画资源 JSON 需要被打包到网站代码中时**
+
+向 `params` props 里传入 animationData= 你的 lottie json 对象即可 (下方 Demo 请求 JSON 是仅作为演示，实际项目中 json 应当被手动 import，而不是通过网络请求获取，这样 JSON 动画资源才会被打包进网站代码)
+
+```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/icon-click.json";
+    const [data, setData] = useState("");
+
+    useEffect(() => {
+        fetch(jsonURL)
+            .then(resp=>resp.json())
+            .then(setData);
+       
+    }, []);
+
+    return <div style={{background:"#e2dfdf"}}>
+            <Lottie params={{ animationData: data }} width={"300px"} />
+        </div>;
+};
+
+```
+
+### Params 其他常用参数
+
+`params` 会被组件传入 `lottie-web` 的 `lottie.loadAnimation` 中，可以参考 `lottie-web` [文档](https://github.com/airbnb/lottie-web?tab=readme-ov-file#usage)
+
+常用参数
+
+```json
+//params
+{
+    container: element, // 渲染容器，不传则由 Semi Lottie 组件自动配置并生成
+    renderer: 'svg', // 渲染方式， 默认 SVG
+    loop: true, // 是否开启循环，默认 true
+    autoplay: true, // 是否自动播放，默认 true，设置为 false 时需要通过动画实例上的 play 方法手动播放
+    path: 'data.json' // 动画 JSON 文件的 URL 路径 （与 animationData 互斥）
+    animationData: {/*...*/} // 动画的 JSON 对象 （与 animationData 互斥）
+    /*...*/
+}
+```
+
+
+### 获取当前动画实例
+
+使用 `getAnimationInstance` 获取当前播放的动画的 animation 实例，实例上含有许多方法用于调整动画的各项参数，例如播放暂停，获取当前帧序号，调整播放速度等。
+
+关于动画实例上含有的方法，更多信息可以参考 `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/icon-click.json";
+
+    return <div style={{background:"#e2dfdf"}}>
+        <Lottie getAnimationInstance={(animation )=>{console.log(animation);}} params={{ path: jsonURL }} width={"300px"} />;
+    </div>
+};
+```
+
+### 获取全局 Lottie
+
+使用 `getLottie` Props 获取全局 lottie，也可以使用 Semi Lottie 组件上的静态方法 `Lottie.getLottie` 来获取全局 lottie
+
+关于全局 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/icon-click.json";
+    
+    console.log("lottie", Lottie.getLottie());
+    
+    return <div style={{background:"#e2dfdf"}}>
+        <Lottie getLottie={lottie=>console.log("lottie", lottie)} params={{ path: jsonURL }} width={"300px"} />;
+    </div>
+};
+
+```
+
+
+
+### API
+
+| 属性        | 说明                   | 类型                                   | 默认值 |
+|-----------|----------------------|--------------------------------------|-----|
+| className | 类名                   | string                               | -   |
+| params    | 用于配置动画相关参数           | 同 lottie-web lottie.loadAnimation 入参 | -   |
+| getAnimationInstance    | 获取当前动画 AnimationItem | (animation:AnimationItem)=>void      | -   |
+| getLottie       | 获取全局 Lottie          | (lottie: Lottie)=>void               | -   |
+| style     | 样式                   | CSSProperties                        | -   |
+
+## 设计变量
+
+<DesignToken/>
+
+
+
+

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

content/show/carousel/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 51
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

content/show/chart/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 52
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 53
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 53
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 54
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 54
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown

content/show/empty/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Show
 title: Empty
 subTitle: Empty

content/show/empty/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 展示类
 title: Empty 空状态
 icon: doc-empty

content/show/highlight/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title: Highlight 
 icon: doc-highlight

content/show/highlight/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title: Highlight 高亮文本
 icon: doc-highlight

content/show/image/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title: Image
 icon: doc-image

content/show/image/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 58
 category: 展示类
 title: Image 图片
 icon: doc-image

content/show/list/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 59
 category: Show
 title: List
 subTitle: List