From 2bfa1271159fa8a332e6354933c64f7fae31ade3 Mon Sep 17 00:00:00 2001 From: slatejack Date: Sat, 14 Sep 2024 10:37:29 +0800 Subject: [PATCH] feat(slider): update slider demo, alignment vue mobile --- src/slider/_example/base.jsx | 9 - src/slider/_example/base.tsx | 11 + src/slider/_example/capsule.tsx | 34 + src/slider/_example/disable.jsx | 6 - src/slider/_example/disabled.tsx | 28 + src/slider/_example/index.jsx | 60 +- src/slider/_example/label.tsx | 25 + src/slider/_example/mark.jsx | 12 - src/slider/_example/range.jsx | 6 - src/slider/_example/range.tsx | 14 + src/slider/_example/step.tsx | 37 + src/slider/_example/style/index.less | 39 +- src/slider/_example/title.jsx | 13 - src/slider/_example/unZero.jsx | 6 - src/slider/_example/value.jsx | 11 - test/snap/__snapshots__/csr.test.jsx.snap | 837 ++++++++++++++++++++-- test/snap/__snapshots__/ssr.test.jsx.snap | 24 +- 17 files changed, 999 insertions(+), 173 deletions(-) delete mode 100644 src/slider/_example/base.jsx create mode 100644 src/slider/_example/base.tsx create mode 100644 src/slider/_example/capsule.tsx delete mode 100644 src/slider/_example/disable.jsx create mode 100644 src/slider/_example/disabled.tsx create mode 100644 src/slider/_example/label.tsx delete mode 100644 src/slider/_example/mark.jsx delete mode 100644 src/slider/_example/range.jsx create mode 100644 src/slider/_example/range.tsx create mode 100644 src/slider/_example/step.tsx delete mode 100644 src/slider/_example/title.jsx delete mode 100644 src/slider/_example/unZero.jsx delete mode 100644 src/slider/_example/value.jsx diff --git a/src/slider/_example/base.jsx b/src/slider/_example/base.jsx deleted file mode 100644 index 3396ce053..000000000 --- a/src/slider/_example/base.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function BaseDemo() { - const onChange = (value) => { - console.log(`change to ${value}`); - }; - return ; -} diff --git a/src/slider/_example/base.tsx b/src/slider/_example/base.tsx new file mode 100644 index 000000000..cdee8f016 --- /dev/null +++ b/src/slider/_example/base.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function BaseDemo() { + return ( +
+ +
+ ); +} diff --git a/src/slider/_example/capsule.tsx b/src/slider/_example/capsule.tsx new file mode 100644 index 000000000..28103af7b --- /dev/null +++ b/src/slider/_example/capsule.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function CapsuleDemo() { + const marks = { + 0: '0', + 20: '20', + 40: '40', + 60: '60', + 80: '80', + 100: '100', + }; + return ( + <> +
+ +
+
+ +
+
+ {/* eslint-disable-next-line no-template-curly-in-string */} + +
+
+ +
+
+ +
+ + ); +} diff --git a/src/slider/_example/disable.jsx b/src/slider/_example/disable.jsx deleted file mode 100644 index 884cfe2d3..000000000 --- a/src/slider/_example/disable.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function DisableDemo() { - return ; -} diff --git a/src/slider/_example/disabled.tsx b/src/slider/_example/disabled.tsx new file mode 100644 index 000000000..c1413ab8e --- /dev/null +++ b/src/slider/_example/disabled.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function DisabledDemo() { + const marks = { + 0: '0', + 20: '20', + 40: '40', + 60: '60', + 80: '80', + 100: '100', + }; + return ( + <> +
+ +
+
+ {/* eslint-disable-next-line no-template-curly-in-string */} + {/* */} +
+
+ +
+ + ); +} diff --git a/src/slider/_example/index.jsx b/src/slider/_example/index.jsx index a0f84c166..7583875d0 100644 --- a/src/slider/_example/index.jsx +++ b/src/slider/_example/index.jsx @@ -1,59 +1,35 @@ import React from 'react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import './style/index.less'; - +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; import BaseDemo from './base'; -import ValueDemo from './value'; -import UnZeroDemo from './unZero'; -import MarkDemo from './mark'; import RangDemo from './range'; -import DisableDemo from './disable'; -import TitleDemo from './title'; +import LabelDemo from './label'; +import StepDemo from './step'; +import DisabledDemo from './disabled'; +import CapsuleDemo from './capsule'; +import './style/index.less'; export default function Base() { return (
- -
- -
- - -
- -
- - -
- -
+ + - -
- -
+ + - -
- -
+ + - -
- -
+ + - -
- -
+ + - -
- -
+ +
); diff --git a/src/slider/_example/label.tsx b/src/slider/_example/label.tsx new file mode 100644 index 000000000..14ac2c441 --- /dev/null +++ b/src/slider/_example/label.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import type { SliderValue } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function LabelDemo() { + const [value, setValue] = useState(10); + + const onChange = (value: number) => { + setValue(value); + }; + + const handleLabel = (value: SliderValue) => value; + + return ( + <> +
+ +
+
+ +
+ + ); +} diff --git a/src/slider/_example/mark.jsx b/src/slider/_example/mark.jsx deleted file mode 100644 index 7b8fec399..000000000 --- a/src/slider/_example/mark.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -const marks = { - 0: '小', - 50: '中', - 100: '大', -}; - -export default function MarkDemo() { - return ; -} diff --git a/src/slider/_example/range.jsx b/src/slider/_example/range.jsx deleted file mode 100644 index 72d664462..000000000 --- a/src/slider/_example/range.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function RangDemo() { - return ; -} diff --git a/src/slider/_example/range.tsx b/src/slider/_example/range.tsx new file mode 100644 index 000000000..6895ab1bc --- /dev/null +++ b/src/slider/_example/range.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function RangDemo() { + const onChange = (value: number | number[]) => { + console.log(`change to ${value}`); + }; + return ( +
+ +
+ ); +} diff --git a/src/slider/_example/step.tsx b/src/slider/_example/step.tsx new file mode 100644 index 000000000..5647d02bb --- /dev/null +++ b/src/slider/_example/step.tsx @@ -0,0 +1,37 @@ +import React, { useState } from 'react'; +import { Slider } from 'tdesign-mobile-react'; +import './style/index.less'; + +export default function StepDemo() { + const [value, setValue] = useState(6.5); + const marksRange = { + 5: '5', + 6: '6', + 7: '7', + 8: '8', + 9: '9', + 10: '10', + }; + const marks = { + 0: '0', + 20: '20', + 40: '40', + 60: '60', + 80: '80', + 100: '100', + }; + + const onChange = (value: number) => { + setValue(value); + }; + return ( + <> +
+ +
+
+ +
+ + ); +} diff --git a/src/slider/_example/style/index.less b/src/slider/_example/style/index.less index cc83738d1..6c97c42b9 100644 --- a/src/slider/_example/style/index.less +++ b/src/slider/_example/style/index.less @@ -1,21 +1,28 @@ -.tdesign-mobile-demo { - background-color: #ffffff; - padding-bottom: 62px; - .tdesign-demo-block-wrap { - padding: 0 16px 8px; - min-height: 48px; - display: flex; +.wrapper { + &-base { + background: var(--bg-color-demo, #fff); + padding: 18px 0; + } - &__title { - width: 30%; - } + &-capsule { + background: var(--bg-color-demo, #fff); + margin-top: 16px; + padding: 16px 0; + } - &-flex { - display: flex; - } + &-disabled { + background: var(--bg-color-demo, #fff); + margin-top: 16px; + padding: 18px 0; + } - &__slider { - width: 70%; - } + &-label { + background: var(--bg-color-demo, #fff); + margin-top: 16px; + padding: 18px 0; } } + +.tdesign-mobile-demo { + background: #f6f6f6; +} diff --git a/src/slider/_example/title.jsx b/src/slider/_example/title.jsx deleted file mode 100644 index 82a8aa5c0..000000000 --- a/src/slider/_example/title.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function TitleDemo() { - return ( - <> -
选择器标题
-
- -
- - ); -} diff --git a/src/slider/_example/unZero.jsx b/src/slider/_example/unZero.jsx deleted file mode 100644 index f8abb2d61..000000000 --- a/src/slider/_example/unZero.jsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function UnZeroDemo() { - return ; -} diff --git a/src/slider/_example/value.jsx b/src/slider/_example/value.jsx deleted file mode 100644 index 031f39b31..000000000 --- a/src/slider/_example/value.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React, { useState } from 'react'; -import { Slider } from 'tdesign-mobile-react'; - -export default function ValueDemo() { - const [value, setValue] = useState(50); - const onChange = (value) => { - setValue(value); - }; - - return ; -} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 928afa037..104849614 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -2987,8 +2987,10 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" > @@ -3270,8 +3272,10 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" > @@ -3462,8 +3466,10 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = ` width="1em" > @@ -3623,8 +3629,10 @@ exports[`csr snapshot test > csr test src/cell/_example/group.tsx 1`] = ` width="1em" > @@ -3986,8 +3994,10 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = ` width="1em" > @@ -4344,8 +4354,10 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = ` width="1em" > @@ -19850,27 +19862,23 @@ exports[`csr snapshot test > csr test src/loading/_example/index.tsx 1`] = ` class="slider-wrap" >
-
-
-
-
- 5 + class="t-slider__line t-slider__line--default t-slider__line--single" + style="width: 0px;" + > +
+
+
+
@@ -20097,27 +20105,23 @@ exports[`csr snapshot test > csr test src/loading/_example/speed.tsx 1`] = ` class="slider-wrap" >
-
-
-
-
- 5 + class="t-slider__line t-slider__line--default t-slider__line--single" + style="width: 0px;" + > +
+
+
+
@@ -31337,6 +31341,735 @@ exports[`csr snapshot test > csr test src/skeleton/_example/theme.tsx 1`] = `
`; +exports[`csr snapshot test > csr test src/slider/_example/base.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/slider/_example/capsule.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 40 +
+
+
+
+
+ 60 +
+
+
+
+
+
+
+
+
+
+
+
+ 0 +
+
+
+
+ 20 +
+
+
+
+ 40 +
+
+
+
+ 60 +
+
+
+
+ 80 +
+
+
+
+ 100 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 +
+
+
+
+ 20 +
+
+
+
+ 40 +
+
+
+
+ 60 +
+
+
+
+ 80 +
+
+
+
+ 100 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/slider/_example/disabled.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 +
+
+
+
+ 20 +
+
+
+
+ 40 +
+
+
+
+ 60 +
+
+
+
+ 80 +
+
+
+
+ 100 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/slider/_example/label.tsx 1`] = ` +
+
+
+
+
+
+
+ 10 +
+
+
+
+
+
+
+
+
+ + 0 + +
+
+
+
+ 20 +
+
+
+
+
+ 60 +
+
+
+
+
+ + 100 + +
+
+
+`; + +exports[`csr snapshot test > csr test src/slider/_example/range.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/slider/_example/step.tsx 1`] = ` +
+
+
+
+
+
+ 5 +
+
+
+
+ 6 +
+
+
+
+ 7 +
+
+
+
+ 8 +
+
+
+
+ 9 +
+
+
+
+ 10 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 +
+
+
+
+ 20 +
+
+
+
+ 40 +
+
+
+
+ 60 +
+
+
+
+ 80 +
+
+
+
+ 100 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + exports[`csr snapshot test > csr test src/sticky/_example/base.tsx 1`] = `
ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; @@ -38128,7 +38861,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = exports[`ssr snapshot test > ssr test src/loading/_example/horz.tsx 1`] = `"
加载中...
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `"

Loading 加载

用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。

01 类型

纯图标

图标加文字横向

加载中...
加载中...

图标加文字竖向

加载中
加载中...

纯文字

加载中...

02 组件尺寸

大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...

03 加载速度

加载速度调整

加载中...
5
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `"

Loading 加载

用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。

01 类型

纯图标

图标加文字横向

加载中...
加载中...

图标加文字竖向

加载中
加载中...

纯文字

加载中...

02 组件尺寸

大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...

03 加载速度

加载速度调整

加载中...
"`; exports[`ssr snapshot test > ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; @@ -38136,7 +38869,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `"
加载中...
5
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `"
加载中...
"`; exports[`ssr snapshot test > ssr test src/loading/_example/vert.tsx 1`] = `"
加载中
加载中...
"`; @@ -38234,6 +38967,18 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; +exports[`ssr snapshot test > ssr test src/slider/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/capsule.tsx 1`] = `"
0
0
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/disabled.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/label.tsx 1`] = `"
10
0
0
0
100
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/range.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/step.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index ee4055e13..cb01704c5 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -34,13 +34,13 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `"
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`; @@ -160,7 +160,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/fullscreen.tsx 1`] = exports[`ssr snapshot test > ssr test src/loading/_example/horz.tsx 1`] = `"
加载中...
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `"

Loading 加载

用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。

01 类型

纯图标

图标加文字横向

加载中...
加载中...

图标加文字竖向

加载中
加载中...

纯文字

加载中...

02 组件尺寸

大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...

03 加载速度

加载速度调整

加载中...
5
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `"

Loading 加载

用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。

01 类型

纯图标

图标加文字横向

加载中...
加载中...

图标加文字竖向

加载中
加载中...

纯文字

加载中...

02 组件尺寸

大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...

03 加载速度

加载速度调整

加载中...
"`; exports[`ssr snapshot test > ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; @@ -168,7 +168,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `"
加载中...
5
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `"
加载中...
"`; exports[`ssr snapshot test > ssr test src/loading/_example/vert.tsx 1`] = `"
加载中
加载中...
"`; @@ -266,6 +266,18 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; +exports[`ssr snapshot test > ssr test src/slider/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/capsule.tsx 1`] = `"
0
0
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/disabled.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/label.tsx 1`] = `"
10
0
0
0
100
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/range.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/slider/_example/step.tsx 1`] = `"
"`; + exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`;