+
# 开源协议
diff --git a/README.md b/README.md
index a8d50240b..da2a2411f 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ Contributing is welcome. Read [guidelines for contributing](https://github.com/T
Create your [Github issues](https://github.com/Tencent/tdesign-mobile-react/issues) or scan the QR code below to join our user groups.
-
用户引导标题
按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+ document.querySelector('#custom-container') as HTMLElement} />
+
+
,
+ );
+ fireEvent.click(container.querySelector('.t-back-top'));
+ expect(document.documentElement.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+ });
+
+ test(':fixed', async () => {
+ (window.document.documentElement as any).window = window;
+ const { container } = render(
+ document.querySelector('#custom-container')} />
+
+
,
+ );
+ document.querySelector('#custom-container').scrollTo = vi.fn();
+ fireEvent.click(document.querySelector('.t-back-top'));
+ expect(document.querySelector('#custom-container').scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+ });
+ });
+
+ describe('events', () => {
+ test(':onToTop', async () => {
+ const onToTop = vi.fn();
+ document.documentElement.scrollTo = vi.fn();
+ const { container } = render(
- {labelList.length ? (
+ {labelList.length && (
| Right Icon |
} />);
+ describe('props', () => {
+ it(': leftIcon and image', () => {
+ const { getByTestId } = render(
+
{theme === 'step' ? (
Button}
+ visible={true}
+ value="110000"
+ theme="tab"
+ />,
+ );
+ expect(document.querySelector('.close-button')).toBeTruthy();
+ });
+
+ it(': title', async () => {
+ const title = '标题';
+ await render(确定}
+ checkStrictly={true}
+ visible={true}
+ value="110000"
+ />,
+ );
+ fireEvent.click(document.querySelectorAll(`.${prefix}-radio`)[0]);
+ fireEvent.click(document.querySelector(`${name}__close-btn`));
+ expect(onChange).toHaveBeenCalled();
+ expect(onChange).toHaveBeenCalledWith('110000', [{ value: '110000', label: '北京市' }]);
+
+ rerender(
+ 确定}
+ checkStrictly={true}
+ visible={true}
+ value="110000"
+ />,
+ );
+ fireEvent.click(document.querySelectorAll(`.${prefix}-radio`)[0]);
+ expect(onChange).toHaveBeenCalledWith('', [{ value: '', label: '' }]);
+ });
+ });
+
+ describe('events', () => {
+ it(': onChange', async () => {
+ const onChange = vi.fn();
+ const { rerender } = await render(
+ ();
+ const [value, setValue] = useState(110105);
return (
<>
diff --git a/src/cell/__tests__/cell.test.tsx b/src/cell/__tests__/cell.test.tsx
index ee26c8ced..1913ea1c8 100644
--- a/src/cell/__tests__/cell.test.tsx
+++ b/src/cell/__tests__/cell.test.tsx
@@ -3,44 +3,104 @@ import React from 'react';
import Cell from '../Cell';
describe('Cell', () => {
- it('renders the correct content', () => {
- const { getByText } = render(
- |
- Test Children
- | ,
- );
-
- expect(getByText('Test Title')).toBeInTheDocument();
- expect(getByText('Test Description')).toBeInTheDocument();
- expect(getByText('Test Children')).toBeInTheDocument();
- });
+ describe('slots', () => {
+ it(': default', () => {
+ const { getByText } = render(
+
+ Test Children
+ | ,
+ );
- it('renders left icon and image if provided', () => {
- const { getByTestId } = render(
- Left Icon |
}
- image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
- >
- Test Children
- ,
- );
-
- expect(getByTestId('left-icon')).toBeInTheDocument();
- expect(screen.getByText('Test Children')).toBeInTheDocument();
+ expect(getByText('Test Title')).toBeInTheDocument();
+ expect(getByText('Test Description')).toBeInTheDocument();
+ expect(getByText('Test Children')).toBeInTheDocument();
+ });
});
- it('renders right icon if provided', () => {
- const { getByTestId } = render(
@@ -234,7 +234,7 @@ const Cascader: React.FC = (props) => {
/>
) : null}
- ) : null}
+ )}
{subTitles[stepIndex] ? (
{subTitles[stepIndex]}
) : null}
diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx
new file mode 100644
index 000000000..8da404b01
--- /dev/null
+++ b/src/cascader/__tests__/cascader.test.tsx
@@ -0,0 +1,209 @@
+import React from 'react';
+import { describe, it, expect, render, vi, fireEvent, beforeEach, afterEach } from '@test/utils';
+
+import Cascader from '../Cascader';
+
+const prefix = 't';
+const name = `.${prefix}-cascader`;
+
+const data = {
+ areaList: [
+ {
+ label: '北京市',
+ value: '110000',
+ children: [
+ {
+ value: '110100',
+ label: '北京市',
+ children: [
+ { value: '110101', label: '东城区' },
+ { value: '110102', label: '西城区' },
+ { value: '110105', label: '朝阳区' },
+ { value: '110106', label: '丰台区' },
+ { value: '110107', label: '石景山区' },
+ { value: '110108', label: '海淀区' },
+ { value: '110109', label: '门头沟区' },
+ { value: '110111', label: '房山区' },
+ { value: '110112', label: '通州区' },
+ { value: '110113', label: '顺义区' },
+ { value: '110114', label: '昌平区' },
+ { value: '110115', label: '大兴区' },
+ { value: '110116', label: '怀柔区' },
+ { value: '110117', label: '平谷区' },
+ { value: '110118', label: '密云区' },
+ { value: '', label: '' },
+ ],
+ },
+ ],
+ },
+ {
+ label: '天津市',
+ value: '120000',
+ children: [
+ {
+ value: '120100',
+ label: '天津市',
+ children: [
+ { value: '120101', label: '和平区' },
+ { value: '120102', label: '河东区' },
+ { value: '120103', label: '河西区' },
+ { value: '120104', label: '南开区' },
+ { value: '120105', label: '河北区' },
+ { value: '120106', label: '红桥区' },
+ { value: '120110', label: '东丽区' },
+ { value: '120111', label: '西青区' },
+ { value: '120112', label: '津南区' },
+ { value: '120113', label: '北辰区' },
+ { value: '120114', label: '武清区' },
+ { value: '120115', label: '宝坻区' },
+ { value: '120116', label: '滨海新区' },
+ { value: '120117', label: '宁河区' },
+ { value: '120118', label: '静海区' },
+ { value: '120119', label: '蓟州区' },
+ ],
+ },
+ ],
+ },
+ ],
+};
+
+describe('Cascader', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.useRealTimers();
+ });
+
+ describe('props', () => {
+ it(': visible', async () => {
+ const onClose = vi.fn();
+ await render(Custom Content
+ 内容1
+ 内容1
+
- 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
- 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
- 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
- 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
+ 此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
{titleText}
;
+ render({footerText}
;
+ render(
+ {placementList.map((item) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/drawer/_example/title.tsx b/src/drawer/_example/title.tsx
index 64a6a4908..47e460a14 100644
--- a/src/drawer/_example/title.tsx
+++ b/src/drawer/_example/title.tsx
@@ -2,8 +2,14 @@ import React, { useState } from 'react';
import { Drawer, Button } from 'tdesign-mobile-react';
import './style/index.less';
+const titleList = [
+ { key: 1, value: '标题', text: '小标题抽屉' },
+ { key: 2, value: 标题
, text: '大标题抽屉' },
+] as const;
+
export default function Base() {
const [openBase, setOpenBase] = useState(false);
+ const [title, setTitle] = useStatecustom-body
+ plain-child
+ fake-child
;
+ Fake.displayName = 'FakeComponent';
+
+ const { queryByText } = render(
+ MyCustomChild
+
-
+ setStrokeWidth(Number(v))} min={0.5} max={2.5} step={0.5} />
+
+
+
-
+ Visit TDesign Icons to view and experience all supported icons.
+
+
### Import on-demand
SVG icons can be imported on demand. When using the Icon component in component development, SVG icons are imported on demand.
@@ -52,27 +58,6 @@ You can get all the name of icon by import manifest from the bundle `import { ma
if your project is in a no-network scenario, please use on-demand loading of icons. For example,`
-
-
-
-Most icons were added to the icon library after version 0.3.0. If you find that the icon cannot be displayed normally after being imported, please check the version of tdesign-icons-react you have installed
-
+ 打开 TDesign 图标独立站点 查看全部支持的图标。
+
+
### 按需引入使用图标
图标可以按需引入单个 SVG 图标。组件开发内部使用到 Icon 时，均按需引入 SVG 图标。
@@ -14,6 +20,7 @@
{{ single }}
+
### 全量引入使用图标
图标尺寸单位支持多种， 'small', 'medium', 'large', '35px', '3em' 等。
@@ -21,7 +28,6 @@
点击右侧导航「全部图标」即可查看组件库全部图标。
{{ base }}
-
### iconfont 图标
TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfont 图标组件。
@@ -66,27 +72,6 @@ TDesign 支持通过使用 Iconfont 图标，使用时需要单独引入 Iconfon
所以如果你的项目是无网络场景，请使用按需加载的图标，如`
-
-
-
-
-大部分图标在 0.3.0 版本后的图标库新增，如果发现图标引入后无法正常展示，请检查安装的图标库`tdesign-icons-react`的版本。
-不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
-
-
+
+
fill
-
+
contain
-cover
-
+
diff --git a/src/image/_example/index.tsx b/src/image/_example/index.tsx
index 122066211..cfed0a8c5 100644
--- a/src/image/_example/index.tsx
+++ b/src/image/_example/index.tsx
@@ -9,7 +9,7 @@ import StatusImage from './status';
export default function ImageDemo() {
return (
<>
- none
-
+
scale-down
+
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
-
-
+
+
cover center
+
cover left
+
cover top
-
+
cover bottom
-
+
contain top
+
contain bottom
+
contain center
+
contain left
+
-
contain right
不同形状的图片
-
- 提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
-
+
-
+
方形
-
+
圆角方形
-圆形
diff --git a/src/image/_example/status.tsx b/src/image/_example/status.tsx index c70c2b416..95907d08b 100644 --- a/src/image/_example/status.tsx +++ b/src/image/_example/status.tsx @@ -3,24 +3,24 @@ import { Image, Loading } from 'tdesign-mobile-react'; export default function RoundDemo() { return ( - <> -
-
-
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover__content')).toHaveTextContent('');
+ });
+ });
+
+ // 测试四个方向
+ /* eslint-disable no-await-in-loop */
+ test(':placement', async () => {
+ const placements = ['top', 'bottom', 'left', 'right'] as const;
+ for (const placement of placements) {
+ const { container, unmount } = render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveAttribute('data-popper-placement', placement);
+ });
+
+ unmount();
+ }
+ });
+
+ // 测试复杂的方向放置
+ test(':placement complex', async () => {
+ const complexPlacements = [
+ 'top-left',
+ 'top-right',
+ 'bottom-left',
+ 'bottom-right',
+ 'left-top',
+ 'left-bottom',
+ 'right-top',
+ 'right-bottom',
+ ] as const;
+
+ for (const placement of complexPlacements) {
+ const { container, unmount } = render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveAttribute('data-popper-placement', placement);
+ });
+
+ unmount();
+ }
+ });
+
+ // 测试主题
+ /* eslint-disable no-await-in-loop */
+ test(':theme', async () => {
+ const themes = ['dark', 'light', 'brand', 'success', 'warning', 'error'] as const;
+
+ for (const theme of themes) {
+ const { container, unmount } = render(
+
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover__content')).toHaveClass(`t-popover--${theme}`);
+ });
+
+ unmount();
+ }
+ });
+
+ // 测试显示箭头
+ /* eslint-disable no-await-in-loop */
+ test(':showArrow true', async () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover__arrow')).toBeTruthy();
+ });
+ });
+
+ // 测试不显示箭头
+ test(':showArrow false', async () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover__arrow')).toBeNull();
+ });
+ });
+
+ // 测试visible
+ test(':visible', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector('.t-popover')).not.toHaveStyle('display: none');
+ });
+
+ // 测试triggerElement方式触发是否有效
+ test(':triggerElement', async () => {
+ const { container } = render(
+ Custom} />,
+ );
+
+ expect(container.querySelector('.custom-trigger')).toHaveTextContent('Custom');
+
+ fireEvent.click(container.querySelector('.custom-trigger')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toBeTruthy();
+ });
+ });
+
+ // 测试非受控模式
+ test(':defaultVisible', async () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).not.toHaveStyle('display: none');
+ });
+ });
+
+ // 测试外接类
+ test(':className', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector('.t-popover__wrapper')).toHaveClass('custom-popover');
+ });
+
+ // 测试內联样式
+ test(':style', () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector('.t-popover__wrapper')).toHaveStyle('background-color: rgb(255, 0, 0)');
+ });
+ });
+
+ describe('events', () => {
+ // 测试内外点击，内部点击不关闭，外部点击关闭
+ test(':closeOnClickOutside', async () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ const trigger = container.querySelector('button')!;
+
+ fireEvent.click(trigger);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).not.toHaveStyle('display: none');
+ });
+
+ fireEvent.click(trigger);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveStyle('display: none');
+ });
+ });
+
+ // 测试vesible变化是否成功监听
+ test(':onVisibleChange', async () => {
+ const onVisibleChange = vi.fn();
+ const { container } = render(
+
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(onVisibleChange).toHaveBeenCalledWith(true);
+ });
+ });
+
+ // 测试组件ref暴露
+ test(':ref functionality', () => {
+ const ref = React.createRef();
+ render(
+
+
+ ,
+ );
+
+ expect(ref.current).toBeTruthy();
+ expect(typeof ref.current.updatePopper).toBe('function');
+ expect(() => ref.current.updatePopper()).not.toThrow();
+ });
+
+ // 测试placement变化是否成功
+ test(':placement update', async () => {
+ const { container, rerender } = render(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveAttribute('data-popper-placement', 'top');
+ });
+
+ rerender(
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveAttribute('data-popper-placement', 'bottom');
+ });
+ });
+
+ // 测试组件卸载是否成功
+ test(':component unmount cleanup', () => {
+ const { container, unmount } = render(
+
+
+ ,
+ );
+
+ expect(container.querySelector('.t-popover')).toBeTruthy();
+ expect(() => unmount()).not.toThrow();
+ });
+ });
+});
diff --git a/src/pull-down-refresh/PullDownRefresh.tsx b/src/pull-down-refresh/PullDownRefresh.tsx
index 497148cee..cd428d6d8 100644
--- a/src/pull-down-refresh/PullDownRefresh.tsx
+++ b/src/pull-down-refresh/PullDownRefresh.tsx
@@ -78,9 +78,6 @@ const PullDownRefresh: React.FC = (originProps) => {
const [distance, setDistance] = useState(0);
useEffect(() => {
- if (onChange) {
- onChange(value);
- }
if (isBoolean(value) && !value) {
setStatus(PullStatusEnum.success);
setDistance(0);
@@ -115,7 +112,6 @@ const PullDownRefresh: React.FC = (originProps) => {
}, [run]);
const doRefresh = async () => {
- if (disabled) return;
setStatus(PullStatusEnum.loading);
onChange(true);
setDistance(pureLoadingHeight);
@@ -174,13 +170,10 @@ const PullDownRefresh: React.FC = (originProps) => {
const absX = Math.abs(diffX);
const absY = Math.abs(diffY);
- if (!touchDir && absX < touchThreshold && absY < touchThreshold) {
- return;
- }
- if (!touchDir && absX < absY) {
- touchDir = -1;
- } else if (!touchDir && absX >= absY) {
- touchDir = 1;
+ // simplify the code
+ if (!touchDir) {
+ if (absX < touchThreshold && absY < touchThreshold) return;
+ touchDir = absX < absY ? -1 : 1;
}
// 左右移动时，不进行后续操作
diff --git a/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx b/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx
new file mode 100644
index 000000000..c57d8f8b4
--- /dev/null
+++ b/src/pull-down-refresh/__tests__/pull-down-refresh.test.tsx
@@ -0,0 +1,587 @@
+import React from 'react';
+import { describe, it, expect, render, renderHook, vi, waitFor, beforeEach, act } from '@test/utils';
+import { range } from 'lodash-es';
+import { PullDownRefresh } from '../index';
+import { useTouch, easeDistance, isReachTop } from '../useTouch';
+
+const prefix = 't';
+const name = `.${prefix}-pull-down-refresh`;
+// mock height and scrollHeight
+const mockHeight = 800;
+const mockScrollHeight = mockHeight;
+
+// Mock the touch events and scroll
+const mockTouch = (element: Element, type: string, touches: Array<{ clientX: number; clientY: number }>) => {
+ const event = new TouchEvent(type, {
+ touches: touches.map((touch) => ({
+ ...touch,
+ target: element,
+ })) as any,
+ bubbles: true,
+ cancelable: true,
+ });
+
+ Object.defineProperty(event, 'stopPropagation', {
+ value: vi.fn(),
+ });
+
+ element.dispatchEvent(event);
+
+ return event as any as React.TouchEvent;
+};
+
+// Mock document properties for scroll detection
+const mockScroll = (scrollTop: number, scrollHeight: number = mockScrollHeight, withDocument: boolean = false) => {
+ Object.defineProperty(document.body, 'scrollTop', {
+ value: scrollTop,
+ writable: true,
+ });
+ Object.defineProperty(document.body, 'clientHeight', {
+ value: mockHeight,
+ writable: true,
+ });
+ Object.defineProperty(document.body, 'scrollHeight', {
+ value: scrollHeight,
+ writable: true,
+ });
+
+ document.body.style.overflowY = 'scroll';
+
+ if (!withDocument) return;
+
+ Object.defineProperty(document.documentElement, 'scrollTop', {
+ value: scrollTop,
+ writable: true,
+ });
+ Object.defineProperty(document.documentElement, 'clientHeight', {
+ value: mockHeight,
+ writable: true,
+ });
+ Object.defineProperty(document.documentElement, 'scrollHeight', {
+ value: scrollHeight,
+ writable: true,
+ });
+ document.documentElement.style.overflowY = 'scroll';
+};
+
+const mockPullDown = (track: Element, height: number, step: number, start: number = 0) => {
+ const stages = range(0, height, step);
+
+ act(() => {
+ mockTouch(track, 'touchstart', [{ clientX: 0, clientY: start }]);
+ });
+
+ stages.forEach((stage) => {
+ act(() => {
+ mockTouch(track, 'touchmove', [{ clientX: 0, clientY: stage }]);
+ });
+ });
+
+ act(() => {
+ mockTouch(track, 'touchend', [{ clientX: 0, clientY: height }]);
+ });
+};
+
+describe('PullDownRefresh', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ // Reset document properties
+ mockScroll(0);
+ });
+
+ describe(': props', () => {
+ it(': className', () => {
+ const { container } = render(
+
+ ,
+ );
+ expect(container.querySelector('.custom-class')).toBeTruthy();
+ });
+
+ it(': style', () => {
+ const style = { backgroundColor: 'red' };
+ const { container } = render(
+
+ ,
+ );
+ const element = container.querySelector(name);
+ expect(element).toHaveAttribute('style');
+ });
+
+ it(': children', () => {
+ const { getByText } = render(
+
+ ,
+ );
+ expect(getByText('test content')).toBeInTheDocument();
+ });
+
+ it(': disabled', () => {
+ const onRefresh = vi.fn();
+
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ mockPullDown(track!, 80, 4, 0);
+
+ expect(onRefresh).not.toHaveBeenCalled();
+ });
+
+ it(': loadingBarHeight with number', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const loadingElement = container.querySelector(`${name}__loading`);
+ expect(loadingElement).toHaveStyle({ height: '60px' });
+ });
+
+ it(': loadingBarHeight with string', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const loadingElement = container.querySelector(`${name}__loading`);
+ expect(loadingElement).toHaveStyle({ height: '5rem' });
+ });
+
+ it(': maxBarHeight with number', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector(name)).toBeTruthy();
+ });
+
+ it(': maxBarHeight with string', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`) as HTMLElement;
+
+ mockPullDown(track!, 60, 2, 0);
+
+ expect(track).toHaveStyle({ transform: 'translate3d(0, 50px, 0)' });
+ });
+
+ it(': loadingProps', () => {
+ const loadingProps = { size: '32px', text: 'Loading...' };
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ expect(container.querySelector('.t-loading__text')).toHaveTextContent(loadingProps.text);
+ });
+
+ describe(': refreshTimeout', () => {
+ const mockRefresh = vi.fn(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(resolve, 1000);
+ }),
+ );
+ const mockRefreshOver = vi.fn(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(resolve, 3000);
+ }),
+ );
+ const mockTimeout = vi.fn();
+ const refreshTimeout = 2000;
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it(': refreshTimeout success', async () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ mockPullDown(track!, 80, 4, 0);
+
+ await waitFor(
+ () => {
+ expect(mockRefresh).toHaveBeenCalled();
+ expect(mockTimeout).not.toHaveBeenCalled();
+ },
+ { timeout: 3000 },
+ );
+ });
+
+ it(': refreshTimeout timeout', async () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ mockPullDown(track!, 80, 4, 0);
+
+ await waitFor(
+ () => {
+ expect(mockRefreshOver).toHaveBeenCalled();
+ expect(mockTimeout).toHaveBeenCalled();
+ },
+ { timeout: 3000 },
+ );
+ });
+ });
+
+ it(': value controlled', () => {
+ const { container, rerender } = render(
+
+ ,
+ );
+
+ expect(container.querySelector(`${name}__text`)).toBeTruthy();
+
+ rerender(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ });
+
+ it(': defaultValue', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ });
+ });
+
+ describe(': status', () => {
+ it(': normal status ', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const textElement = container.querySelector(`${name}__text`);
+ expect(textElement).toBeTruthy();
+ });
+
+ it(': loading status', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ });
+
+ it(': custom loading texts', () => {
+ const customTexts = ['拉下来', '放开手', '加载中', '完成了'];
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ expect(container.querySelector('.t-loading__text')).toHaveTextContent(customTexts[2]);
+ });
+
+ it(': default locale texts', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ expect(container.querySelector('.t-loading')).toBeTruthy();
+ });
+ });
+
+ describe(': events touch and pull', () => {
+ it(': touch direction X > Y', async () => {
+ const mockRefresh = vi.fn();
+
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ // absX = 20, absY = 5
+ await act(async () => {
+ mockTouch(track!, 'touchstart', [{ clientX: 0, clientY: 0 }]);
+ mockTouch(track!, 'touchmove', [{ clientX: 20, clientY: 5 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchstart', [{ clientX: 0, clientY: 0 }]);
+ mockTouch(track!, 'touchmove', [{ clientX: 40, clientY: 10 }]);
+ });
+
+ expect(mockRefresh).not.toHaveBeenCalled();
+ });
+
+ it(': touch direction Y > X', async () => {
+ const mockRefresh = vi.fn();
+
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ // absX = 0, absY = 60
+ mockPullDown(track!, 80, 4, 0);
+
+ expect(mockRefresh).toHaveBeenCalled();
+ });
+
+ it(': touch pulling', async () => {
+ const mockRefresh = vi.fn(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(resolve, 1000);
+ }),
+ );
+
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ await act(async () => {
+ mockTouch(track!, 'touchstart', [{ clientX: 0, clientY: 0 }]);
+ mockTouch(track!, 'touchmove', [{ clientX: 0, clientY: 20 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchmove', [{ clientX: 0, clientY: 40 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchmove', [{ clientX: 0, clientY: 60 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchend', [{ clientX: 0, clientY: 80 }]);
+ });
+
+ expect(mockRefresh).not.toHaveBeenCalled();
+ });
+
+ it(': onRefresh timeout', async () => {
+ const mockRefresh = vi.fn(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(resolve, 5000);
+ }),
+ );
+ const mockTimeout = vi.fn();
+
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ mockPullDown(track!, 80, 4, 0);
+
+ expect(mockRefresh).toHaveBeenCalled();
+
+ await waitFor(
+ () => {
+ expect(mockTimeout).toHaveBeenCalled();
+ },
+ { timeout: 5000 },
+ );
+ });
+ });
+
+ describe(':events scroll', () => {
+ it(': onScrollToLower', async () => {
+ const onScrollToLower = vi.fn();
+ render(
+
+ ,
+ );
+
+ mockScroll(100);
+ window.dispatchEvent(new Event('scroll'));
+
+ await waitFor(
+ () => {
+ expect(onScrollToLower).toHaveBeenCalled();
+ },
+ { timeout: 400 },
+ );
+ });
+
+ it(': onScrollToLower undefined', async () => {
+ render(
+
+ ,
+ );
+
+ mockScroll(100);
+ window.dispatchEvent(new Event('scroll'));
+ });
+ });
+
+ describe(':hooks', () => {
+ it(': useTouch', () => {
+ const { result } = renderHook(() => useTouch());
+
+ expect(result.current).toBeDefined();
+
+ act(() => {
+ const startEvent = mockTouch(document.body, 'touchstart', [{ clientX: 0, clientY: 10 }]);
+ result.current.start(startEvent);
+ });
+
+ // 在这里检查 start 后的状态
+ expect(result.current.startX).toBe(0);
+ expect(result.current.startY).toBe(10);
+
+ act(() => {
+ const moveEvent = mockTouch(document.body, 'touchmove', [{ clientX: 0, clientY: 20 }]);
+ result.current.move(moveEvent);
+ });
+
+ // 检查 move 后的状态
+ expect(result.current.diffX).toBe(0); // 0 - 0 = 0
+ expect(result.current.diffY).toBe(10); // 20 - 10 = 10
+ });
+
+ it(': easeDistance', () => {
+ expect(easeDistance(25, 50)).toBe(25);
+ expect(easeDistance(75, 50)).toBe(63);
+ expect(easeDistance(150, 50)).toBe(88);
+ });
+
+ it(': isReachTop', () => {
+ // Mock a touch event with a target element
+ const mockElement = document.createElement('div');
+ const mockEvent = {
+ target: mockElement,
+ } as unknown as React.TouchEvent;
+
+ // Test the function directly
+ const result = isReachTop(mockEvent);
+ expect(typeof result).toBe('boolean');
+ });
+ });
+
+ describe(': edge cases', () => {
+ it(': value set to null', () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+ const loading = container.querySelector('.t-loading');
+
+ expect(track).toBeTruthy();
+ expect(loading).not.toBeTruthy();
+ });
+
+ it(': touch change direction', async () => {
+ const { container } = render(
+
+ ,
+ );
+
+ const track = container.querySelector(`${name}__track`);
+
+ // set touchDir to 1
+ await act(async () => {
+ mockTouch(track!, 'touchStart', [{ clientX: 0, clientY: 0 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 20 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 40 }]);
+ });
+
+ // set touchDir to -1
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 60 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 40 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 20 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchMove', [{ clientX: 0, clientY: 0 }]);
+ });
+ await act(async () => {
+ mockTouch(track!, 'touchEnd', [{ clientX: 0, clientY: 0 }]);
+ });
+
+ expect(track).not.toHaveClass(`${name}__track--loosing`);
+ });
+
+ it(': large scrollHeight', async () => {
+ const onScrollToLower = vi.fn();
+
+ render(
+
+ ,
+ );
+
+ mockScroll(100, 1000, true);
+ window.dispatchEvent(new Event('scroll'));
+
+ await waitFor(
+ () => {
+ expect(onScrollToLower).not.toHaveBeenCalled();
+ },
+ { timeout: 400 },
+ );
+ });
+ });
+});
diff --git a/src/pull-down-refresh/_example/index.tsx b/src/pull-down-refresh/_example/index.tsx
index 287653687..67673b485 100644
--- a/src/pull-down-refresh/_example/index.tsx
+++ b/src/pull-down-refresh/_example/index.tsx
@@ -7,15 +7,15 @@ import './style/index.less';
export default function Demo() {
const rowCols = [
- 1,
- {
- width: '100px',
- },
{
width: '165.5px',
height: '165.5px',
borderRadius: '12px',
},
+ {
+ width: '100px',
+ },
+ 1,
];
return (
(null);
useClickAway(onClickOutside, ref);
-
return (
加载默认提示
+
+ ,
+ messageRef: RefObject,
+) {
+ const messageMarquee = useMemo(() => {
+ const DEFAULT_MARQUEE = {
+ speed: 50,
+ loop: -1,
+ delay: 300,
+ };
+
+ if (!marquee) {
+ return null;
+ }
+
+ if (marquee === true) {
+ return DEFAULT_MARQUEE;
+ }
+
+ return {
+ loop: Math.max(marquee.loop, -1) ?? DEFAULT_MARQUEE.loop,
+ speed: Math.max(marquee.speed, 1) ?? DEFAULT_MARQUEE.speed,
+ delay: Math.max(marquee.delay, 0) ?? DEFAULT_MARQUEE.delay,
+ };
+ }, [marquee]);
+
+ const [playedCount, setPlayedCount] = useState(0);
+ useEffect(() => {
+ setPlayedCount(0);
+ }, [messageMarquee]);
+
+ const setAnimationStyle = useMemoizedFn((animationStyle: React.CSSProperties) => {
+ if (!messageRef.current) {
+ return;
+ }
+ Object.entries(animationStyle).forEach(([key, value]) => {
+ set(messageRef.current.style, key, value);
+ });
+ });
+
+ const isPlayingAnimation = useRef(false);
+
+ const playAnimation = useMemoizedFn((playedCount: number) => {
+ if (isPlayingAnimation.current) {
+ return () => {};
+ }
+
+ if (
+ !messageMarquee ||
+ messageMarquee.loop === 0 ||
+ (playedCount >= messageMarquee.loop && messageMarquee.loop !== -1)
+ ) {
+ return () => {};
+ }
+
+ const animationContext = {
+ textWrapDOMWidth: containerRef.current?.getBoundingClientRect().width,
+ textDOMWidth: messageRef.current?.getBoundingClientRect().width,
+ };
+
+ const offset = -animationContext.textDOMWidth;
+
+ isPlayingAnimation.current = true;
+ const timeout = setTimeout(() => {
+ if (playedCount === 0) {
+ setAnimationStyle({
+ transform: offset ? `translateX(${offset}px)` : '',
+ transitionDuration: `${animationContext.textDOMWidth / messageMarquee.speed}s`,
+ transitionTimingFunction: 'linear',
+ });
+ } else {
+ setAnimationStyle({
+ transform: offset ? `translateX(${offset}px)` : '',
+ transitionDuration: `${(animationContext.textWrapDOMWidth + animationContext.textDOMWidth) / messageMarquee.speed}s`,
+ transitionTimingFunction: 'linear',
+ });
+ }
+ }, messageMarquee.delay);
+
+ return () => {
+ clearTimeout(timeout);
+ };
+ });
+ useEffect(() => {
+ const end = playAnimation(playedCount);
+
+ return () => {
+ end();
+ };
+ }, [playAnimation, playedCount]);
+
+ const transitionEndHandler = useMemoizedFn(() => {
+ isPlayingAnimation.current = false;
+ const animationContext = {
+ textWrapDOMWidth: containerRef.current?.getBoundingClientRect().width,
+ textDOMWidth: messageRef.current?.getBoundingClientRect().width,
+ };
+
+ setAnimationStyle({
+ transform: `translateX(${animationContext.textWrapDOMWidth + animationContext.textDOMWidth}px)`,
+ transitionDuration: '0s',
+ });
+ setPlayedCount((playedCount) => playedCount + 1);
+ });
+ useMount(() => {
+ messageRef.current?.addEventListener('transitionend', transitionEndHandler);
+
+ return () => {
+ messageRef.current?.removeEventListener('transitionend', transitionEndHandler);
+ };
+ });
+}
diff --git a/src/message/index.tsx b/src/message/index.tsx
index 3ec32e402..57b1d6a31 100644
--- a/src/message/index.tsx
+++ b/src/message/index.tsx
@@ -3,23 +3,30 @@ import { attachMethodsToComponent } from '../_util/attachMethodsToComponent';
import _Message from './Message';
import type { MessageProps } from './Message';
import * as methods from './methods';
-import type {
- MessageInfoMethod,
- MessageErrorMethod,
- MessageCloseAll,
- MessageSuccessMethod,
- MessageWarningMethod,
-} from './type';
-
+import type { MessageActionOptionsType } from './methods';
import './style';
export * from './type';
+
+type MessageApi = {
+ /** 展示普通消息 */
+ info: (options?: MessageActionOptionsType | string) => void;
+ /** 展示成功消息 */
+ success: (options?: MessageActionOptionsType | string) => void;
+ /** 展示警示消息 */
+ warning: (options?: MessageActionOptionsType | string) => void;
+ /** 展示错误消息 */
+ error: (options?: MessageActionOptionsType | string) => void;
+ /** 关闭全部 */
+ closeAll: () => void;
+};
+
export interface MessageType extends React.FC {
- info: MessageInfoMethod;
- warning: MessageWarningMethod;
- success: MessageSuccessMethod;
- error: MessageErrorMethod;
- closeAll: MessageCloseAll;
+ info: MessageApi['info'];
+ warning: MessageApi['warning'];
+ success: MessageApi['success'];
+ error: MessageApi['error'];
+ closeAll: MessageApi['closeAll'];
}
const { info, warning, success, error, closeAll } = methods.default;
diff --git a/src/message/message.en-US.md b/src/message/message.en-US.md
index 78a114f6e..61e77ac2d 100644
--- a/src/message/message.en-US.md
+++ b/src/message/message.en-US.md
@@ -9,7 +9,7 @@ name | type | default | description | required
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/message/type.ts) | N
-closeBtn | TNode | - | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeBtn | TNode | undefined | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
duration | Number | 3000 | \- | N
icon | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
@@ -42,4 +42,4 @@ Name | Default Value | Description
--td-message-error-color | @error-color | -
--td-message-info-color | @brand-color | -
--td-message-success-color | @success-color | -
---td-message-warning-color | @warning-color | -
+--td-message-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/src/message/message.md b/src/message/message.md
index ccb3e3d84..68502d2ef 100644
--- a/src/message/message.md
+++ b/src/message/message.md
@@ -9,13 +9,13 @@
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/message/type.ts) | N
-closeBtn | TNode | - | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+closeBtn | TNode | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
content | TNode | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
+duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器 | N
icon | TNode | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
link | TNode | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/message/type.ts) | N
-offset | Array | - | 相对于 placement 的偏移量。示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array` | N
+offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']。TS 类型：`Array` | N
theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/message/type.ts) | N
visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N
defaultVisible | Boolean | false | 是否显示，隐藏时默认销毁组件。非受控属性 | N
@@ -42,4 +42,4 @@ onOpened | Function | | TS 类型：`() => void`
已废弃。展示Message --td-message-error-color | @error-color | - --td-message-info-color | @brand-color | - --td-message-success-color | @success-color | - ---td-message-warning-color | @warning-color | - +--td-message-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/message/methods.tsx b/src/message/methods.tsx index 1e535e019..963831eb1 100644 --- a/src/message/methods.tsx +++ b/src/message/methods.tsx @@ -1,9 +1,13 @@ import React from 'react'; import { render } from '../_util/react-render'; -import { MessageThemeList, MessageActionOptionsType } from './type'; +import { MessageThemeList, TdMessageProps } from './type'; import { messageDefaultProps } from './defaultProps'; import Message from './Message'; +export interface MessageActionOptionsType extends TdMessageProps { + context?: Element; +} + const isBrowser = typeof window !== 'undefined'; const instanceMap: Map> = new Map();
@@ -41,11 +45,9 @@ const createMessage = (props, theme?: MessageThemeList) => {
};
const closeAll = () => {
- if (instanceMap instanceof Map) {
- for (const [key, value] of instanceMap) {
- const { context } = value;
- destroy(context as Element, key);
- }
+ for (const [key, value] of instanceMap) {
+ const { context } = value;
+ destroy(context as Element, key);
}
};
diff --git a/src/message/type.ts b/src/message/type.ts
index 029cc3a0a..d61d891f9 100644
--- a/src/message/type.ts
+++ b/src/message/type.ts
@@ -16,13 +16,13 @@ export interface TdMessageProps {
/**
* 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮
*/
- closeBtn?: String | Boolean | TNode;
+ closeBtn?: TNode;
/**
* 用于自定义消息弹出内容
*/
content?: TNode;
/**
- * 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。
+ * 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器
* @default 3000
*/
duration?: number;
@@ -34,14 +34,14 @@ export interface TdMessageProps {
/**
* 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`
*/
- link?: TNode;
+ link?: object | TNode;
/**
* 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
* @default false
*/
marquee?: boolean | MessageMarquee;
/**
- * 相对于 placement 的偏移量。示例：[-10, 20] 或 ['10rpx', '8rpx']
+ * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10px', '8px']
*/
offset?: Array;
/**
@@ -86,17 +86,3 @@ export interface MessageMarquee {
}
export type MessageThemeList = 'info' | 'success' | 'warning' | 'error';
-
-export interface MessageActionOptionsType extends TdMessageProps {
- context?: Element;
-}
-
-export type MessageInfoMethod = (options?: MessageActionOptionsType | string) => void;
-
-export type MessageSuccessMethod = (options?: MessageActionOptionsType | string) => void;
-
-export type MessageWarningMethod = (options?: MessageActionOptionsType | string) => void;
-
-export type MessageErrorMethod = (options?: MessageActionOptionsType | string) => void;
-
-export type MessageCloseAll = () => void;
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index a846929b6..ff315d4ca 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -35,7 +35,7 @@ const Popover = forwardRef((props, ref) => {
} = useDefaultProps(props, popoverDefaultProps);
const [currentVisible, setVisible] = useDefault(visible, defaultVisible, onVisibleChange);
- const [active, setActive] = useState(visible);
+ const [active, setActive] = useState(currentVisible);
const referenceRef = useRef(null);
const popoverRef = useRef(null);
const popperRef = useRef | null>(null);
@@ -84,9 +84,9 @@ const Popover = forwardRef((props, ref) => {
const isHorizontal = horizontal.find((item) => placement.includes(item));
const isEnd = placement.includes('end');
- const small = (a: number, b: number) => (a < b ? a : b);
+
if (isHorizontal) {
- const padding = isEnd ? small(width + x, popperWidth) : small(windowWidth - x, popperWidth);
+ const padding = isEnd ? Math.min(width + x, popperWidth) : Math.min(windowWidth - x, popperWidth);
return {
[isEnd ? 'left' : 'right']: padding - 22,
};
@@ -153,7 +153,7 @@ const Popover = forwardRef((props, ref) => {
};
useEffect(() => {
- setVisible(visible);
+ updateVisible(visible);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible]);
diff --git a/src/popover/__tests__/popover.test.tsx b/src/popover/__tests__/popover.test.tsx
new file mode 100644
index 000000000..bdda7ba81
--- /dev/null
+++ b/src/popover/__tests__/popover.test.tsx
@@ -0,0 +1,345 @@
+import { render, fireEvent, waitFor, describe, test, expect, vi } from '@test/utils';
+import React from 'react';
+import Popover from '../index';
+
+describe('Popover', () => {
+ describe('props', () => {
+ // 测试字符串内容渲染
+ test(':content string', async () => {
+ const { container } = render(
+
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover__content')).toHaveTextContent('String content');
+ });
+ });
+
+ // 测试JSX内容渲染
+ test(':content JSX', async () => {
+ const { container } = render(
+ JSX content
}>
+
+ ,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+
+ await waitFor(() => {
+ expect(container.querySelector('.custom-content')).toHaveTextContent('JSX content');
+ });
+ });
+
+ // 测试空内容
+ test(':content null', async () => {
+ const { container } = render(
+
+
+ 测试内容
+ ,
+ );
+
+ const closeButton = container.querySelector(`.${closeBtnClassName}`);
+
+ fireEvent.click(closeButton);
+
+ const syntheticEvent = onCloseBtnClick.mock.calls[0][0].e;
+ expect((syntheticEvent as any).nativeEvent).toBeInstanceOf(MouseEvent);
+ }
+
+ {
+ // When closeBtn is Boolean
+ const closeBtnClickHandler = vi.fn();
+ const { container } = render({content} );
+ expect(container.querySelector(`.${getClassNameWithPrefix('message__text')}`).textContent).toBe(content);
+ }
+
+ // TNode
+ {
+ const customContentName = 'custom-content';
+ const customContent = 'customContent';
+ const clickHandler = vi.fn();
+
+ const { container } = render(
+
+ {customContent}
+
+ }
+ visible={true}
+ />,
+ );
+ const customContentDiv = container.querySelector(`.${customContentName}`);
+ expect(customContentDiv.textContent).toBe(customContent);
+
+ fireEvent.click(customContentDiv);
+ expect(clickHandler).toBeCalledTimes(1);
+ }
+ });
+ });
+});
diff --git a/src/message/__tests__/methods.test.tsx b/src/message/__tests__/methods.test.tsx
new file mode 100644
index 000000000..87c6ea913
--- /dev/null
+++ b/src/message/__tests__/methods.test.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { beforeEach, afterAll, describe, expect, it, vi } from 'vitest';
+import methods from '../methods';
+import * as reactRender from '../../_util/react-render';
+
+describe('message methods', () => {
+ const originalError = console.error;
+
+ beforeEach(() => {
+ vi.restoreAllMocks();
+ console.error = vi.fn();
+ document.body.innerHTML = '';
+ });
+
+ it('calls render with Message element and appends to body for info', () => {
+ const renderSpy = vi.spyOn(reactRender, 'render').mockImplementation(() => {});
+
+ methods.info({ content: 'hello' } as any);
+
+ expect(renderSpy).toHaveBeenCalledTimes(1);
+ // container created and appended
+ const container = (renderSpy.mock.calls[0] as any)[1] as Element;
+ expect(document.body.contains(container)).toBe(true);
+
+ const element = (renderSpy.mock.calls[0] as any)[0] as React.ReactElement;
+ expect((element.props as any).theme).toBe('info');
+ expect((element.props as any).visible).toBe(true);
+ expect((element.props as any).container).toBe(container);
+ });
+
+ it('supports theme: success/warning/error', () => {
+ const renderSpy = vi.spyOn(reactRender, 'render').mockImplementation(() => {});
+ methods.success({ content: 'ok' } as any);
+ methods.warning({ content: 'warn' } as any);
+ methods.error({ content: 'err' } as any);
+
+ expect(renderSpy).toHaveBeenCalledTimes(3);
+ const themes = renderSpy.mock.calls.map((c) => (c[0] as any).props.theme);
+ expect(themes).toEqual(['success', 'warning', 'error']);
+ });
+
+ it('closeAll removes all appended instances', () => {
+ const renderSpy = vi.spyOn(reactRender, 'render').mockImplementation(() => {});
+ methods.info({ content: 'a' } as any);
+ methods.success({ content: 'b' } as any);
+
+ // two containers appended
+ const containers = renderSpy.mock.calls.map((c) => c[1] as Element);
+ containers.forEach((el) => expect(document.body.contains(el)).toBe(true));
+
+ methods.closeAll();
+ containers.forEach((el) => expect(document.body.contains(el)).toBe(false));
+ });
+
+ it('logs error when no valid context', () => {
+ const renderSpy = vi.spyOn(reactRender, 'render').mockImplementation(() => {});
+ methods.info({ content: 'x', context: null } as any);
+ expect(renderSpy).not.toHaveBeenCalled();
+ expect(console.error).toHaveBeenCalled();
+ });
+
+ afterAll(() => {
+ console.error = originalError;
+ });
+});
diff --git a/src/message/defaultProps.ts b/src/message/defaultProps.ts
index 2e3770155..910999217 100644
--- a/src/message/defaultProps.ts
+++ b/src/message/defaultProps.ts
@@ -6,6 +6,7 @@ import { TdMessageProps } from './type';
export const messageDefaultProps: TdMessageProps = {
align: 'left',
+ closeBtn: undefined,
duration: 3000,
icon: true,
marquee: false,
diff --git a/src/message/hooks/useMarqueeAnimation.ts b/src/message/hooks/useMarqueeAnimation.ts
new file mode 100644
index 000000000..f1159523f
--- /dev/null
+++ b/src/message/hooks/useMarqueeAnimation.ts
@@ -0,0 +1,118 @@
+import { useMemoizedFn, useMount } from 'ahooks';
+import { set } from 'lodash-es';
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import type { MessageMarquee } from 'tdesign-mobile-react/message';
+
+export default function useMarqueeAnimation(
+ marquee: boolean | MessageMarquee,
+ containerRef: RefObject
+
- 加载默认提示
-
- 加载自定义提示
+
+
加载自定义提示
- (
+
+ customContent
+
+ }
+ />,
+ );
+
+ const customContentDiv = container.getElementsByClassName(customContentName)[0];
+ expect(customContentDiv).toBeTruthy();
+
+ fireEvent.click(customContentDiv);
+ expect(clickHandler).toBeCalledTimes(1);
+ }
+ });
+
+ test('marquee', async () => {
+ const textWrapRect = { width: 200 } as DOMRect;
+ const textRect = { width: 300 } as DOMRect;
+
+ const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+ Element.prototype.getBoundingClientRect = function () {
+ const className = (this as Element).className || '';
+ if (typeof className === 'string') {
+ if (className.includes(getClassNameWithPrefix('message__text-wrap'))) return textWrapRect as any;
+ if (className.includes(getClassNameWithPrefix('message__text'))) return textRect as any;
+ }
+ return originalGetBoundingClientRect.call(this);
+ } as any;
+
+ {
+ // Boolean
+ const { container } = render(
-
-
,
- );
- expect(container.firstChild).toHaveStyle('margin-right: -50px; margin-left: -50px;');
-
- expect(container.firstChild).toHaveClass(rowName);
- });
- });
-});
-
-describe('col', () => {
- describe('props', () => {
- it(':offset', async () => {
- const { container } = render(
-
-
,
- );
- const col = container.querySelector(`.${colName}--2`);
- expect(col).not.toBeNull();
- expect(container.firstChild).toHaveClass(rowName);
- });
-
- it(':span', async () => {
- const { container } = render(
-
-
,
- );
-
- const col = container.querySelector(`.${colName}--2`);
- expect(col).not.toBeNull();
- expect(container.querySelector(`.${colName}--2`).textContent).toBe(TEXT);
- });
- });
-});
diff --git a/src/layout/__tests__/layout.test.tsx b/src/layout/__tests__/layout.test.tsx
new file mode 100644
index 000000000..dd6456919
--- /dev/null
+++ b/src/layout/__tests__/layout.test.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import { describe, expect, render, it } from '@test/utils';
+import Row from '../Row';
+import Col from '../Col';
+
+const prefix = 't';
+const rowName = `${prefix}-row`;
+const colName = `${prefix}-col`;
+
+const TEXT = 'tdesign-mobile-react';
+
+describe('Layout', () => {
+ describe('Row', () => {
+ describe('props', () => {
+ it(':gutter', () => {
+ const { container } = render(
+
+
,
+ );
+ expect(container.firstChild).toHaveStyle('margin-right: -50px; margin-left: -50px;');
+ expect(container.firstChild).toHaveClass(rowName);
+ });
+
+ it(':gutter with zero value', () => {
+ const { container } = render(
+
+
,
+ );
+ expect(container.firstChild).not.toHaveStyle('margin-right: -0px');
+ expect(container.firstChild).toHaveClass(rowName);
+ });
+
+ it(':className', () => {
+ const { container } = render(
+
+
,
+ );
+ expect(container.firstChild).toHaveClass(rowName);
+ expect(container.firstChild).toHaveClass('custom-row');
+ });
+
+ it(':style', () => {
+ const { container } = render(
+
+
,
+ );
+ expect(container.firstChild).toHaveStyle('background-color: rgb(255, 0, 0)');
+ });
+ });
+ });
+
+ describe('Col', () => {
+ describe('props', () => {
+ it(':offset', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector(`.${colName}--offset-1`);
+ expect(col).not.toBeNull();
+ expect(col).toHaveClass(`${colName}--2`);
+ });
+
+ it(':span', () => {
+ const { container } = render(
+
+
,
+ );
+
+ const col = container.querySelector(`.${colName}--2`);
+ expect(col).not.toBeNull();
+ expect(container.querySelector(`.${colName}--2`).textContent).toBe(TEXT);
+ });
+
+ it(':className', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector('.custom-col');
+ expect(col).toHaveClass(`${colName}--2`);
+ });
+
+ it(':style', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector(`.${colName}--2`);
+ expect(col).toHaveStyle('color: rgb(0, 0, 255)');
+ });
+
+ it('should apply padding with gutter', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector(`.${colName}--2`);
+ expect(col).toHaveStyle('padding-right: 10px');
+ expect(col).toHaveStyle('padding-left: 10px');
+ });
+
+ it('should not apply padding when gutter is not provided', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector(`.${colName}--2`);
+ expect(col).not.toHaveStyle('padding-right: 0px');
+ });
+ });
+
+ describe('edge cases', () => {
+ it('should handle zero values', () => {
+ const { container } = render(
+
+
,
+ );
+ expect(container.querySelector(`.${colName}--0`)).not.toBeNull();
+ expect(container.querySelector(`.${colName}--offset-0`)).not.toBeNull();
+ });
+
+ it('should handle negative offset', () => {
+ const { container } = render(
+
+
,
+ );
+ const col = container.querySelector(`.${colName}--offset--1`);
+ expect(col).toBeNull();
+ });
+ });
+ });
+
+ describe('integration', () => {
+ it('should work with multiple columns', () => {
+ const { container } = render(
+
+
,
+ );
+
+ const cols = container.querySelectorAll(`.${colName}`);
+ expect(cols).toHaveLength(2);
+ expect(cols[0]).toHaveClass(`${colName}--8`);
+ expect(cols[1]).toHaveClass(`${colName}--8`);
+ expect(cols[1]).toHaveClass(`${colName}--offset-8`);
+ });
+
+ it('should handle nested rows and columns', () => {
+ const { container } = render(
+
+
+
+
+
,
+ );
+
+ const rows = container.querySelectorAll(`.${rowName}`);
+ expect(rows).toHaveLength(2);
+
+ const cols = container.querySelectorAll(`.${colName}`);
+ expect(cols).toHaveLength(4);
+ });
+ });
+});
diff --git a/src/message/Message.tsx b/src/message/Message.tsx
index 178a29ea0..f3643a5a8 100644
--- a/src/message/Message.tsx
+++ b/src/message/Message.tsx
@@ -1,40 +1,25 @@
-import React, { useEffect, useState, useRef } from 'react';
-import classNames from 'classnames';
import { useTimeout } from 'ahooks';
+import classNames from 'classnames';
import { isObject } from 'lodash-es';
+import React, { useEffect, useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { CheckCircleFilledIcon, CloseIcon, ErrorCircleFilledIcon, InfoCircleFilledIcon } from 'tdesign-icons-react';
-
-import type { TdMessageProps, MessageMarquee } from './type';
-import useMessageCssTransition from './hooks/useMessageCssTransition';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { usePrefixClass } from '../hooks/useClass';
-
-import type { StyledProps, TNode } from '../common';
-import parseTNode from '../_util/parseTNode';
import { convertUnit } from '../_util/convertUnit';
-import { messageDefaultProps } from './defaultProps';
-
+import parseTNode from '../_util/parseTNode';
+import type { StyledProps, TNode } from '../common';
+import { usePrefixClass } from '../hooks/useClass';
+import useDefaultProps from '../hooks/useDefaultProps';
import Link from '../link';
+import { messageDefaultProps } from './defaultProps';
+import useMarqueeAnimation from './hooks/useMarqueeAnimation';
+import useMessageCssTransition from './hooks/useMessageCssTransition';
+import type { TdMessageProps } from './type';
export interface MessageProps extends TdMessageProps, StyledProps {
container?: Element;
children?: React.ReactNode;
}
-interface IInnerState {
- duration: number;
- offset: number;
- listWidth: number;
- itemWidth: number;
- scroll: {
- marquee: boolean;
- speed: number;
- loop: number;
- delay: number;
- };
-}
-
const iconDefault = {
info: = (originProps) => {
const name = usePrefixClass('message');
- /**
- * 获取visibleChange函数引用
- */
- const scrollingHandler = useRef void)>(null);
-
/**
* duration为0时，取消倒计时
*/
const [messageDuration] = useState(duration || null);
- const [state, setState] = useState({
- duration: 0,
- offset: 0,
- listWidth: 0,
- itemWidth: 0,
- scroll: {
- marquee: false,
- speed: 50,
- loop: -1, // 值为 -1 表示循环播放，值为 0 表示不循环播放
- delay: 300,
- },
- });
const [messageVisible, setVisible] = useState(visible ?? defaultVisible);
@@ -125,139 +93,38 @@ const Message: React.FC = (originProps) => {
onDurationEnd?.();
}, messageDuration);
- const handleScrolling = () => {
- if (!marquee || (isObject(marquee) && (marquee as MessageMarquee))?.loop === 0) {
- return;
- }
-
- const { loop, speed, delay } = state.scroll;
-
- const scroll = {
- marquee: true,
- // 负数统一当作循环播放
- loop: Math.max(
- props.marquee === true || (props.marquee as MessageMarquee)?.loop == null
- ? loop
- : (props.marquee as MessageMarquee)?.loop,
- -1,
- ),
- // 速度必须为正数
- speed: Math.max(
- props.marquee === true || (props.marquee as MessageMarquee)?.speed == null
- ? speed
- : (props.marquee as MessageMarquee)?.speed,
- 1,
- ),
- // 延迟不可为负数
- delay: Math.max(
- props.marquee === true || (props.marquee as MessageMarquee)?.delay == null
- ? delay
- : (props.marquee as MessageMarquee)?.delay,
- 0,
- ),
- };
- setState({
- ...state,
- scroll,
- offset: 0,
- });
-
- // 设置动画
- setTimeout(() => {
- const textWrapDOMWidth = textWrapRef.current?.getBoundingClientRect().width;
- const textDOMWidth = textRef.current?.getBoundingClientRect().width;
-
- setState({
- ...state,
- scroll,
- offset: -textDOMWidth,
- duration: textDOMWidth / state.scroll.speed,
- listWidth: textWrapDOMWidth,
- itemWidth: textDOMWidth,
- });
- }, state.scroll.delay);
- };
-
- scrollingHandler.current = handleScrolling;
-
- useEffect(() => {
- scrollingHandler.current();
- }, []);
-
- const animateStyle = {
- transform: state.offset ? `translateX(${state.offset}px)` : '',
- transitionDuration: `${state.duration}s`,
- transitionTimingFunction: 'linear',
- };
-
- const resetTransition = () => {
- setState({
- ...state,
- duration: 0,
- offset: state.listWidth,
- });
-
- setTimeout(() => {
- setState({
- ...state,
- offset: -state.itemWidth,
- duration: (state.itemWidth + state.listWidth) / state.scroll.speed,
- });
- }, 0);
- };
-
- // 动画结束后，初始化动画
- const handleTransitionend = () => {
- resetTransition();
-
- if (state.scroll.loop === -1) {
- return;
- }
-
- const newState = {
- ...state,
- scroll: {
- ...state.scroll,
- loop: -(-state.scroll.loop),
- },
- };
-
- if (state.scroll.loop === 0) {
- newState.scroll.marquee = false;
- }
-
- setState(newState);
- };
-
const onLinkClick = (e) => {
props.onLinkClick?.(e);
};
+
const leftIcon = parseTNode(icon, null, iconDefault[theme] || iconDefault.info);
const getLinkContent = () => {
if (typeof link === 'string') {
return ;
}
- if (isObject(link)) {
+
+ // React element is also an object,need to add extra judgement
+ if (isObject(link) && !React.isValidElement(link) && typeof link !== 'function') {
return ;
}
- return parseTNode(link);
+
+ return parseTNode(link as TNode);
};
const clickCloseButton = (e) => {
setVisible(false);
- onCloseBtnClick?.(e);
+ onCloseBtnClick?.({ e });
};
- const renderCloseBtn = () => {
- if (!closeBtn) return;
-
- return closeBtn === true ? (
-
@@ -268,21 +135,20 @@ const Message: React.FC = (originProps) => {
>
+ {customContent}
+
+ }
+ visible={true}
+ />,
+ );
+ const customContentDiv = container.querySelector(`.${customContentName}`);
+ expect(customContentDiv.textContent).toBe(customContent);
+
+ fireEvent.click(customContentDiv);
+ expect(clickHandler).toBeCalledTimes(1);
+ }
+ });
+
+ test('duration', async () => {
+ const defaultDuration = 3000;
+
+ {
+ // Default duration
+ const { container } = render(失败默认提示
+
+
);
}
diff --git a/src/image/_example/style/index.less b/src/image/_example/style/index.less
index e5d1fda86..723156698 100644
--- a/src/image/_example/style/index.less
+++ b/src/image/_example/style/index.less
@@ -1,5 +1,4 @@
.image-example {
- margin-bottom: 24px;
color: var(--td-text-color-secondary, rgba(0, 0, 0, .6));
&-title {
@@ -19,7 +18,7 @@
flex-wrap: wrap;
.image-demo {
- margin-right: 24px;
+
.image-container {
height: 72px;
width: 72px;
@@ -30,35 +29,21 @@
color: var(--td-text-color-secondary, rgba(0, 0, 0, .6));
font-size: 14px;
line-height: 22px;
- margin: 16px 0;
+ margin-bottom: 16px;
white-space: nowrap;
}
}
}
-// status
-.row {
- display: flex;
- grid-gap: 24px;
- padding: 0 16px;
- margin-bottom: 16px;
- .image-container {
- width: 72px;
- height: 72px;
- }
+.mt-8 {
+ margin-top: 8px;
}
-.tips {
- color: var(--td-text-color-secondary, rgba(0, 0, 0, .6));
- font-size: 14px;
- line-height: 22px;
- margin-bottom: 16px;
- text-align: center;
- white-space: nowrap;
+.mt-24 {
+ margin-top: 24px;
}
-.error-tips {
- color: var(--td-text-color-placeholder, rgba(0, 0, 0, .4));
- font-size: 10px;
+.mr-24 {
+ margin-right: 24px;
}
diff --git a/src/layout/__tests__/__snapshots__/demo.test.jsx.snap b/src/layout/__tests__/__snapshots__/demo.test.jsx.snap
deleted file mode 100644
index 9aa9c3bfd..000000000
--- a/src/layout/__tests__/__snapshots__/demo.test.jsx.snap
+++ /dev/null
@@ -1,320 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Col > Col baseVue demo works fine 1`] = `
-
+
- 失败默认提示
-
-
+ 失败自定义提示
+
+
失败自定义提示
-
-
-`;
-
-exports[`Col > Col mobileVue demo works fine 1`] = `
-
-
-
-
-
- col-8
-
-
-
-
- col-8
-
-
-
-
- col-8
-
-
-
-
-
-
-
-
- col-4
-
-
-
-
- col-16 col-offset-4
-
-
-
-
-
-
-
-
-
- col-12 col-offset-12
-
-
-
-
-
-`;
-
-exports[`Col > Col offsetVue demo works fine 1`] = `
-- Layout 布局 -
-- 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 -
-
-
-
-
- - 01 组件类型 -
-- 基础用法 -
-
-
-
-
-
-
-
-
-
- col-8
-
-
-
-
- col-8
-
-
-
-
- col-8
-
-
-
-
-
-
-
-
- col-4
-
-
-
-
- col-16 col-offset-4
-
-
-
-
-
-
-
-
-
-
- col-12 col-offset-12
-
-
-
-
-
-
-
-
- - 在列元素之间增加间距 -
-
-
-
-
-
-
-
-
-
-
-
- col-8
-
-
-
-
-
-
- col-8
-
-
-
-
-
-
-
- col-8
-
-
-
-
-
-`;
diff --git a/src/layout/__tests__/__snapshots__/demo.test.tsx.snap b/src/layout/__tests__/__snapshots__/demo.test.tsx.snap
deleted file mode 100644
index 519831722..000000000
--- a/src/layout/__tests__/__snapshots__/demo.test.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Col > Col baseDemo demo works fine 1`] = `null`;
-
-exports[`Col > Col indexDemo demo works fine 1`] = `null`;
-
-exports[`Col > Col offsetDemo demo works fine 1`] = `null`;
diff --git a/src/layout/__tests__/demo.test.tsx b/src/layout/__tests__/demo.test.tsx
deleted file mode 100644
index f0a4b04ca..000000000
--- a/src/layout/__tests__/demo.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, expect, render, it } from '@test/utils';
-
-import baseDemo from '../_example/base';
-import indexDemo from '../_example/index';
-import offsetDemo from '../_example/offset';
-
-const mapper = {
- baseDemo,
- indexDemo,
- offsetDemo,
-};
-
-describe('Col', () => {
- Object.keys(mapper).forEach((demoName) => {
- it(`Col ${demoName} demo works fine`, () => {
- const { container } = render(mapper[demoName]);
-
- expect(container.firstChild).toMatchSnapshot();
- });
- });
-});
diff --git a/src/layout/__tests__/index.test.tsx b/src/layout/__tests__/index.test.tsx
deleted file mode 100644
index f27697f8a..000000000
--- a/src/layout/__tests__/index.test.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { describe, it, expect, render } from '@test/utils';
-import Row from '../Row';
-import Col from '../Col';
-
-const prefix = 't';
-const rowName = `${prefix}-row`;
-const colName = `${prefix}-col`;
-
-const TEXT = 'tdesign-mobile-vue';
-
-describe('row', () => {
- describe('props', () => {
- it(':gutter', async () => {
- const { container } = render(
-
-
-
-
- col-8
-
-
-
-
-
-
- col-8
-
-
-
-
-
-
-
- col-8
-
-
- {leftIcon}
-
+ closeBtnText
+
+ }
+ />,
+ );
+ const closeBtn = container.querySelector(`.${closeBtnClassname}`);
+
+ expect(closeBtn).toBeTruthy();
+
+ fireEvent.click(closeBtn);
+ expect(closeBtnClickHandler).toBeCalledTimes(1);
+ }
+ });
+
+ test('content', () => {
+ // string
+ {
+ const content = 'content';
+ const { container } = render(
+
{link && (
-
{parseTNode(content) || parseTNode(children)}
+
);
diff --git a/src/message/__tests__/__snapshots__/message.test.tsx.snap b/src/message/__tests__/__snapshots__/message.test.tsx.snap
new file mode 100644
index 000000000..514a219e4
--- /dev/null
+++ b/src/message/__tests__/__snapshots__/message.test.tsx.snap
@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Message > props > marquee 1`] = `
+
+`;
+
+exports[`Message > props > marquee 2`] = `
+
+`;
+
+exports[`Message > props > marquee 3`] = `
+
+`;
+
+exports[`Message > props > marquee 4`] = `
+
+`;
+
+exports[`Message > props > marquee 5`] = `
+
+`;
+
+exports[`Message > props > marquee 6`] = `
+
+`;
diff --git a/src/message/__tests__/message.test.tsx b/src/message/__tests__/message.test.tsx
new file mode 100644
index 000000000..3fb792b82
--- /dev/null
+++ b/src/message/__tests__/message.test.tsx
@@ -0,0 +1,595 @@
+import { act, beforeEach, describe, expect, fireEvent, render, test, vi } from '@test/utils';
+import React from 'react';
+import { MessageProps } from 'tdesign-mobile-react/message/Message';
+import Message, { MessageAlignType } from '../index';
+
+const classNamePrefix = 't';
+const messageClassName = `${classNamePrefix}-message`;
+const querySelectorName = `.${messageClassName}`;
+
+function getClassNameWithPrefix(className: string) {
+ return `${classNamePrefix}-${className}`;
+}
+
+describe('Message', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ describe('props', () => {
+ test('className', () => {
+ const customClassName = 'custom-className';
+ const { container } = render( onLinkClick({ e })}>
{getLinkContent()}
)}
- {renderCloseBtn()}
+ {closeBtn && (
+
+ {renderCloseBtn()}
+
+ )}
+ customContent
+
+ )}
+ />,
+ );
+
+ const customContentDiv = container.getElementsByClassName(customContentName)[0];
+ expect(customContentDiv).toBeTruthy();
+
+ fireEvent.click(customContentDiv);
+ expect(clickHandler).toBeCalledTimes(1);
+ }
+
+ {
+ // TNode - Element
+ const customContentName = 'custom-content';
+ const clickHandler = vi.fn();
+ const { container } = render(
+
+ close
+
+ );
+
+ const { container } = render(
+ close
;
+
+ const { container } = render(
+
+ link
+
+ );
+
+ const { container } = render(link
;
+
+ const { container } = render(已废弃。展示Message --td-message-error-color | @error-color | - --td-message-info-color | @brand-color | - --td-message-success-color | @success-color | - ---td-message-warning-color | @warning-color | - +--td-message-warning-color | @warning-color | - \ No newline at end of file diff --git a/src/message/methods.tsx b/src/message/methods.tsx index 1e535e019..963831eb1 100644 --- a/src/message/methods.tsx +++ b/src/message/methods.tsx @@ -1,9 +1,13 @@ import React from 'react'; import { render } from '../_util/react-render'; -import { MessageThemeList, MessageActionOptionsType } from './type'; +import { MessageThemeList, TdMessageProps } from './type'; import { messageDefaultProps } from './defaultProps'; import Message from './Message'; +export interface MessageActionOptionsType extends TdMessageProps { + context?: Element; +} + const isBrowser = typeof window !== 'undefined'; const instanceMap: Map
+
+
+
+
,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toBeTruthy();
+ });
+
+ fireEvent.click(container.querySelector('.outside')!);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).toHaveStyle('display: none');
+ });
+ });
+
+ // 测试closeOnClickOutside属性
+ test(':closeOnClickOutside false', async () => {
+ const { container } = render(
+ Outside
+
+
+
+
+
,
+ );
+
+ fireEvent.click(container.querySelector('button')!);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).not.toHaveStyle('display: none');
+ });
+
+ fireEvent.click(container.querySelector('.outside')!);
+ await waitFor(() => {
+ expect(container.querySelector('.t-popover')).not.toHaveStyle('display: none');
+ });
+ });
+
+ // 测试点击内部关闭
+ test(':closeOnClickOutside', async () => {
+ const { container } = render(
+ Outside
+ content
+ content
+ test content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+ content
+
@@ -27,11 +27,9 @@ export default function Demo() {
/>
((props, ref) => {
};
})}
/>
- ) : null}
+ )}
);
});
diff --git a/src/rate/RateIcon.tsx b/src/rate/RateIcon.tsx
index 9afc0b356..561197b72 100644
--- a/src/rate/RateIcon.tsx
+++ b/src/rate/RateIcon.tsx
@@ -56,6 +56,7 @@ export const RateIcon = (props: Props) => {
拖拽该区域演示 顶部下拉刷新
-
- {Array.from(Array(2), (_, key) => (
- ((props,
});
React.useEffect(() => {
+ /* istanbul ignore else */
if (canvasRef.current) {
const canvas = canvasRef.current;
@@ -74,6 +75,7 @@ const QRCodeCanvas = React.forwardRef((props,
image.naturalHeight !== 0 &&
image.naturalWidth !== 0;
+ /* istanbul ignore else */
if (haveImageToRender) {
if (calculatedImageSettings.excavation != null) {
cellsToDraw = excavateModules(cells, calculatedImageSettings.excavation);
diff --git a/src/qrcode/__tests__/qrcode.test.tsx b/src/qrcode/__tests__/qrcode.test.tsx
new file mode 100644
index 000000000..48f3a5905
--- /dev/null
+++ b/src/qrcode/__tests__/qrcode.test.tsx
@@ -0,0 +1,295 @@
+import React from 'react';
+import { describe, it, expect, render, fireEvent, waitFor, vi, cleanup, afterEach } from '@test/utils';
+import QRCode from '../QRCode';
+import { QRCodeSVG } from '../QRCodeSVG';
+
+describe('QRCode', () => {
+ it('should render nothing when value is empty', () => {
+ const { container } = render( element inside svg when icon provided', () => {
+ const icon = 'https://example.com/icon.svg';
+ const { container } = render( = {};
+ const record = (name: string, ...args: any[]) => {
+ calls[name] = calls[name] || [];
+ calls[name].push(args);
+ };
+
+ let fillStyleCache: any;
+ let alphaCache: any;
+
+ const ctx: any = {
+ scale: vi.fn((x: number, y: number) => record('scale', x, y)),
+ fillRect: vi.fn((x: number, y: number, w: number, h: number) => record('fillRect', x, y, w, h)),
+ drawImage: vi.fn((...args: any[]) => record('drawImage', ...args)),
+ fill: vi.fn((...args: any[]) => record('fill', ...args)),
+ };
+ Object.defineProperty(ctx, 'fillStyle', {
+ get: () => fillStyleCache,
+ set: (v) => {
+ fillStyleCache = v;
+ record('fillStyle', v);
+ },
+ configurable: true,
+ });
+ Object.defineProperty(ctx, 'globalAlpha', {
+ get: () => alphaCache,
+ set: (v) => {
+ alphaCache = v;
+ record('globalAlpha', v);
+ },
+ configurable: true,
+ });
+
+ return { ctx, calls };
+};
+
+describe('QRCodeCanvas - canvas drawing and refs (merged)', () => {
+ afterEach(() => {
+ vi.restoreAllMocks();
+ cleanup();
+ });
+
+ it('assigns canvas to object ref and draws using fallback rectangles when Path2D unsupported', async () => {
+ const { ctx, calls } = createMockCtx();
+ vi.spyOn(HTMLCanvasElement.prototype as any, 'getContext').mockImplementation(() => ctx);
+
+ const { QRCodeCanvas } = await import('../QRCodeCanvas');
+
+ const ref = React.createRef();
+ const { container } = render(((props, ref) => {
controlRef.current.enableClick = false;
// 根据记录去修改数据
setInnerValue(controlRef.current.currentValue);
- onHideTips();
+ clearTimeout(controlRef.current.timer);
+ controlRef.current.timer = setTimeout(onHideTips, TIPS_HIDE_DELAY) as any as number;
}, [onHideTips, setInnerValue, disabled]);
const wrapSize = useSize(wrapRef);
@@ -196,7 +198,7 @@ const Rate = forwardRef((props, ref) => {
setClickTime(Date.now());
setCurrentValue(value);
onShowTips();
- controlRef.current.timer = setTimeout(onHideTips, 3000) as any as number;
+ controlRef.current.timer = setTimeout(onHideTips, TIPS_HIDE_DELAY) as any as number;
setInnerValue(value);
}}
/>
@@ -205,7 +207,7 @@ const Rate = forwardRef((props, ref) => {
{showText ?
-
+
+ {Array.from(Array(8), (_, key) => (
+
diff --git a/src/pull-down-refresh/_example/style/index.less b/src/pull-down-refresh/_example/style/index.less
index 3948a1cff..70b2f60fa 100644
--- a/src/pull-down-refresh/_example/style/index.less
+++ b/src/pull-down-refresh/_example/style/index.less
@@ -30,3 +30,15 @@
}
}
}
+
+.group {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 0 16px 16px;
+
+ .item {
+ width: 47%;
+ margin-bottom: 16px;
+ }
+}
\ No newline at end of file
diff --git a/src/qrcode/QRCodeCanvas.tsx b/src/qrcode/QRCodeCanvas.tsx
index c3a0f6ab2..3a14994ee 100644
--- a/src/qrcode/QRCodeCanvas.tsx
+++ b/src/qrcode/QRCodeCanvas.tsx
@@ -57,6 +57,7 @@ const QRCodeCanvas = React.forwardRef {
+ e.stopPropagation(); // 阻止事件冒泡，防止触发 RateTips 的 clickoutside
const dom = ref.current;
if (!dom) {
return;
@@ -71,7 +72,7 @@ export const RateIcon = (props: Props) => {
[`${iconClass}--unselected`]: !isSelected || isHalf,
})}
>
- {isHalf ? (
+ {isHalf && (
diff --git a/src/rate/RateTips.tsx b/src/rate/RateTips.tsx
index 37bf01bda..1fc0c45a8 100644
--- a/src/rate/RateTips.tsx
+++ b/src/rate/RateTips.tsx
@@ -23,7 +23,6 @@ export const RateTips = (props: Props) => {
const ref = useRef {
>
{iconNode}
- ) : null}
+ )}
{iconNode}
{
style={{ left: `${left}px` }}
>
- {data.map((item, index) => (
+ {data?.map((item, index) => (
{
+ describe('props', () => {
+ it('should render default star icon', () => {
+ const { container } = render(
+ {}} />);
+
+ expect(container.querySelector('.t-rate__tips')).toBeInTheDocument();
+ expect(container.querySelector('.t-rate__tips--top')).toBeInTheDocument();
+ expect(screen.getByText('很差')).toBeInTheDocument();
+ expect(screen.getByText('一般')).toBeInTheDocument();
+ });
+
+ it(':placement', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ expect(container.querySelector('.t-rate__tips--bottom')).toBeInTheDocument();
+ });
+
+ it(':left', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ const tips = container.querySelector('.t-rate__tips');
+ expect(tips).toHaveStyle('left: 150px');
+ });
+
+ it(':data with empty array', () => {
+ const { container } = render( {}} />);
+
+ const items = container.querySelectorAll('.t-rate__tips-item');
+ expect(items).toHaveLength(0);
+ });
+
+ it(':placement with undefined', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ expect(container.querySelector('.t-rate__tips')).toBeInTheDocument();
+ });
+
+ it(':data with null', () => {
+ const { container } = render(
+ {}} />,
+ );
+
+ const items = container.querySelectorAll('.t-rate__tips-item');
+ expect(items).toHaveLength(0);
+ });
+
+ it(':data with undefined', () => {
+ const { container } = render(
+ {}} />,
+ );
+
+ const items = container.querySelectorAll('.t-rate__tips-item');
+ expect(items).toHaveLength(0);
+ });
+
+ it(':data with missing properties', () => {
+ const data = [{ text: '测试' } as any];
+
+ render( {}} />);
+
+ expect(screen.getByText('测试')).toBeInTheDocument();
+ });
+
+ it(':left with zero', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ const tips = container.querySelector('.t-rate__tips');
+ expect(tips).toHaveStyle('left: 0px');
+ });
+
+ it(':left with negative value', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ const tips = container.querySelector('.t-rate__tips');
+ expect(tips).toHaveStyle('left: -100px');
+ });
+
+ it(':left with large value', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ const tips = container.querySelector('.t-rate__tips');
+ expect(tips).toHaveStyle('left: 10000px');
+ });
+
+ it(':data with multiple items', () => {
+ const data = [
+ { icon: ★, text: '很差', actived: false },
+ { icon: ★, text: '一般', actived: true },
+ { icon: ★, text: '很好', actived: false },
+ ];
+
+ const { container } = render( {}} />);
+
+ expect(screen.getByText('很差')).toBeInTheDocument();
+ expect(screen.getByText('一般')).toBeInTheDocument();
+ expect(screen.getByText('很好')).toBeInTheDocument();
+ expect(container.querySelectorAll('.t-rate__tips-item')).toHaveLength(3);
+ });
+
+ it(':data with empty string text', () => {
+ const data = [{ icon: ★, text: '', actived: false }];
+
+ const { container } = render( {}} />);
+
+ expect(container.querySelector('.t-rate__tips-text')).toBeInTheDocument();
+ });
+
+ it(':data with null text', () => {
+ const data = [{ icon: ★, text: null as any, actived: false }];
+
+ const { container } = render( {}} />);
+
+ expect(container.querySelector('.t-rate__tips-text')).toBeInTheDocument();
+ });
+
+ it(':data with undefined text', () => {
+ const data = [{ icon: ★, text: undefined as any, actived: false }];
+
+ const { container } = render( {}} />);
+
+ expect(container.querySelector('.t-rate__tips-text')).toBeInTheDocument();
+ });
+
+ it(':data with null icon', () => {
+ const data = [{ icon: null, text: '测试', actived: false }];
+
+ render( {}} />);
+
+ expect(screen.getByText('测试')).toBeInTheDocument();
+ });
+
+ it(':data with undefined icon', () => {
+ const data = [{ icon: undefined, text: '测试', actived: false }];
+
+ render( {}} />);
+
+ expect(screen.getByText('测试')).toBeInTheDocument();
+ });
+
+ it(':data with true actived', () => {
+ const data = [{ icon: ★, text: '测试', actived: true }];
+
+ const { container } = render( {}} />);
+
+ const item = container.querySelector('.t-rate__tips-item');
+ expect(item).toHaveClass('t-rate__tips-item--active');
+ });
+
+ it(':data with false actived', () => {
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ const { container } = render( {}} />);
+
+ const item = container.querySelector('.t-rate__tips-item');
+ expect(item).not.toHaveClass('t-rate__tips-item--active');
+ });
+
+ it(':data with undefined actived', () => {
+ const data = [{ icon: ★, text: '测试', actived: undefined }];
+
+ const { container } = render( {}} />);
+
+ const item = container.querySelector('.t-rate__tips-item');
+ expect(item).not.toHaveClass('t-rate__tips-item--active');
+ });
+ });
+
+ describe('event', () => {
+ it(':click item', () => {
+ const handleClick = vi.fn();
+ const data = [{ icon: ★, text: '测试', actived: false, onClick: handleClick }];
+
+ render( {}} />);
+
+ const item = screen.getByText('测试').parentElement!;
+ fireEvent.click(item);
+
+ expect(handleClick).toHaveBeenCalledWith(0);
+ });
+
+ it(':click outside', () => {
+ const handleClickOutside = vi.fn();
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ render(
+ {}} />);
+
+ const item = screen.getByText('测试').parentElement!;
+ fireEvent.click(item);
+
+ // Should not throw error
+ expect(screen.getByText('测试')).toBeInTheDocument();
+ });
+
+ it('should handle onClickOutside correctly', () => {
+ const handleClickOutside = vi.fn();
+ const data = [{ icon: ★, text: '测试', actived: false }];
+
+ render(();
+ const { container } = render( = (props) => {
const dot = useMemo(() => theme === StepThemeEnum.DOT, [theme]);
const currentStatus = useMemo(() => {
if (status !== 'default') return status;
- if (index === current) return stepsStatus;
+ if (index === +current) return stepsStatus;
if (index < +current) return 'finish';
return status;
}, [index, current, stepsStatus, status]);
diff --git a/src/steps/__tests__/__snapshots__/demo.test.tsx.snap b/src/steps/__tests__/__snapshots__/demo.test.tsx.snap
deleted file mode 100644
index 0f604e371..000000000
--- a/src/steps/__tests__/__snapshots__/demo.test.tsx.snap
+++ /dev/null
@@ -1,1952 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Steps > Steps horizontalDemo demo 1`] = `
-
- {items.map((item, index) => (
- ,
- );
- expect(container.querySelector(`.${steps}`).classList.contains(`${steps}--vertical`)).toBeTruthy();
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- expect($stepItems.length).toEqual(items.length);
- $stepItems.forEach((item, index) => {
- expect(item.querySelector(`.${stepItem}__dot`)).toBeTruthy();
- if (index === $stepItems.length - 1) {
- expect(item.querySelector(`.${stepItem}__line`)).toBeNull();
- } else {
- expect(item.querySelector(`.${stepItem}__line`)).toBeTruthy();
- }
- });
- });
-
- it('readonly', () => {
- const onClick = vi.fn();
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- fireEvent.click($stepItems[1]);
- expect(onClick).toHaveBeenCalledTimes(0);
- });
-
- it('currentStatus', () => {
- const current = 1;
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- const getStatus = (index) => {
- if (index < current) {
- return 'finish';
- }
- if (index === current) {
- return 'error';
- }
- return 'default';
- };
- $stepItems.forEach((item, index) => {
- expect(item.classList.contains(`${stepItem}--${getStatus(index)}`));
- });
- });
-
- it('sequence', () => {
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- $stepItems.forEach((item, index) => {
- if (index === 0) {
- expect(item.querySelector(`.${stepItem}__line`)).toBeNull();
- } else {
- expect(item.querySelector(`.${stepItem}__line`)).toBeTruthy();
- }
- });
- });
-
- it('change steps', () => {
- const stepItems = [...items];
- const { container, rerender } = render(
-
- {stepItems.map((item, index) => (
- ,
- );
- stepItems.pop();
- rerender(
-
- {stepItems.map((item, index) => (
- ,
- );
- expect(container.querySelectorAll(`.${stepItem}`).length).toEqual(stepItems.length);
- });
- });
-
- describe('events', () => {
- it('onChange', () => {
- const onClick = vi.fn();
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- fireEvent.click($stepItems[1]);
- expect(onClick).toHaveBeenCalledTimes(1);
- expect(onClick).toHaveBeenCalledWith(
- 1,
- 0,
- expect.objectContaining({
- e: expect.objectContaining({
- type: 'click',
- }),
- }),
- );
- });
- });
-});
-
-describe('StepItem', () => {
- describe('props', () => {
- it('title and content', () => {
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
-
- $stepItems.forEach((item, index) => {
- expect(item.querySelector(`.${stepItem}__title`).textContent).toBe(items[index].title);
- expect(item.querySelector(`.${stepItem}__description`).textContent).toBe(items[index].content);
- });
- });
-
- it('icon', () => {
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- $stepItems.forEach((item) => {
- expect(item.querySelector(`.${stepItem}__icon`)).toBeTruthy();
- expect(item.querySelector(`.${prefix}-icon-cart`)).toBeTruthy();
- });
- });
-
- it('extra', () => {
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- const $extra = $stepItems[1].querySelector(`.${stepItem}__extra`);
- expect($extra).toBeTruthy();
- expect($extra.querySelector('img')).toBeTruthy();
- });
-
- it('status', () => {
- const current = 1;
- const { container } = render(
-
- {itemStatus.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- $stepItems.forEach((item, index) => {
- expect(item.classList.contains(`${stepItem}--${itemStatus[index].status}`));
- });
- });
-
- it('titleRight', () => {
- const { container } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems = container.querySelectorAll(`.${stepItem}`);
- $stepItems.forEach((item) => {
- expect(item.querySelector(`.${prefix}-icon.${prefix}-icon-chevron-right`)).toBeTruthy();
- });
- const { container: container2 } = render(
-
- {items.map((item, index) => (
- ,
- );
- const $stepItems2 = container2.querySelectorAll(`.${stepItem}`);
- $stepItems2.forEach((item) => {
- expect(item.querySelector(`.${prefix}-icon`)).toBeNull();
- });
- });
- });
-});
diff --git a/src/steps/__tests__/steps.test.tsx b/src/steps/__tests__/steps.test.tsx
new file mode 100644
index 000000000..e74069cdc
--- /dev/null
+++ b/src/steps/__tests__/steps.test.tsx
@@ -0,0 +1,520 @@
+import React from 'react';
+import { describe, expect, it, render, fireEvent, vi } from '@test/utils';
+import { Icon } from 'tdesign-icons-react';
+import { Steps, StepItem, StepStatus, Image } from 'tdesign-mobile-react';
+import { StepsContext } from '../StepsContext';
+
+const prefix = 't';
+const steps = `${prefix}-steps`;
+const stepItem = `${prefix}-step-item`;
+
+const itemsWithTNode = [
+ {
+ title: '字符串标题',
+ content: '字符串内容',
+ status: 'default',
+ },
+ {
+ title: React元素标题,
+ content:
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems[0]).toHaveClass(`${stepItem}--finish`);
+ expect($stepItems[1]).toHaveClass(`${stepItem}--finish`);
+ expect($stepItems[2]).toHaveClass(`${stepItem}--process`);
+ expect($stepItems[3]).toHaveClass(`${stepItem}--default`);
+ }
+
+ currentValues.forEach(checkCurrent);
+ });
+
+ it(':layout', () => {
+ const layouts = ['horizontal', 'vertical'] as const;
+
+ function checkLayout(layout: (typeof layouts)[number]) {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ expect(container.querySelector(`.${steps}`)).toHaveClass(`${steps}--${layout}`);
+ }
+
+ layouts.forEach(checkLayout);
+ });
+
+ it(':theme', () => {
+ const themes = ['default', 'dot'] as const;
+
+ function checkTheme(theme: (typeof themes)[number]) {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems.length).toEqual(itemsWithTNode.length);
+ $stepItems.forEach((item) => {
+ if (theme === 'dot') {
+ expect(item.querySelector(`.${stepItem}__dot`)).toBeTruthy();
+ } else {
+ expect(item.querySelector(`.${stepItem}__circle`)).toBeTruthy();
+ }
+ });
+ }
+
+ themes.forEach(checkTheme);
+ });
+
+ it(':readonly', () => {
+ const readonlyOptions = [true, false] as const;
+
+ function checkReadonly(readonly: (typeof readonlyOptions)[number]) {
+ const onClick = vi.fn();
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ fireEvent.click($stepItems[1]);
+
+ if (readonly) {
+ expect(onClick).toHaveBeenCalledTimes(0);
+ } else {
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onClick).toHaveBeenCalledWith(
+ 1,
+ 0,
+ expect.objectContaining({
+ e: expect.objectContaining({ type: 'click' }),
+ }),
+ );
+ }
+ }
+
+ readonlyOptions.forEach(checkReadonly);
+ });
+
+ it(':currentStatus', () => {
+ const current = 1;
+ const currentStatuses = ['default', 'process', 'finish', 'error'] as const;
+
+ function checkCurrentStatus(currentStatus: (typeof currentStatuses)[number]) {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ const getStatus = (index) => {
+ if (index < current) {
+ return 'finish';
+ }
+ if (index === current) {
+ return currentStatus;
+ }
+ return 'default';
+ };
+ $stepItems.forEach((item, index) => {
+ expect(item.classList.contains(`${stepItem}--${getStatus(index)}`));
+ });
+ }
+
+ currentStatuses.forEach(checkCurrentStatus);
+ });
+
+ it(':sequence', () => {
+ const sequences = ['positive', 'reverse'] as const;
+
+ function checkSequence(sequence: (typeof sequences)[number]) {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ $stepItems.forEach((item, index) => {
+ if (sequence === 'reverse') {
+ if (index === 0) {
+ expect(item.querySelector(`.${stepItem}__line`)).toBeNull();
+ } else {
+ expect(item.querySelector(`.${stepItem}__line`)).toBeTruthy();
+ }
+ } else if (index === $stepItems.length - 1) {
+ expect(item.querySelector(`.${stepItem}__line`)).toBeNull();
+ } else {
+ expect(item.querySelector(`.${stepItem}__line`)).toBeTruthy();
+ }
+ });
+ }
+
+ sequences.forEach(checkSequence);
+ });
+
+ it('change steps', () => {
+ const stepItems = [...itemsWithTNode];
+ const { container, rerender } = render(
+
+ {stepItems.map((item, index) => (
+ ,
+ );
+ stepItems.pop();
+ rerender(
+
+ {stepItems.map((item, index) => (
+ ,
+ );
+ expect(container.querySelectorAll(`.${stepItem}`).length).toEqual(stepItems.length);
+ });
+ });
+
+ describe('events', () => {
+ it(':onChange', () => {
+ const onClick = vi.fn();
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ fireEvent.click($stepItems[1]);
+ expect(onClick).toHaveBeenCalledTimes(1);
+ expect(onClick).toHaveBeenCalledWith(
+ 1,
+ 0,
+ expect.objectContaining({
+ e: expect.objectContaining({ type: 'click' }),
+ }),
+ );
+ });
+ });
+
+ describe('edge cases', () => {
+ it('should handle empty children', () => {
+ const { container } = render(
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems.length).toBe(1);
+ expect($stepItems[0].querySelector(`.${stepItem}__line`)).toBeNull();
+ });
+
+ it('should handle current out of bounds', () => {
+ const { container } = render(
+
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems[0].classList.contains(`${stepItem}--finish`)).toBeTruthy();
+ expect($stepItems[1].classList.contains(`${stepItem}--finish`)).toBeTruthy();
+ });
+ });
+
+ describe('Steps relation function coverage', () => {
+ it('should not add null element to childrenNodes', () => {
+ const { container } = render(
+
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems.length).toBe(1);
+ });
+
+ it('should handle edge cases in relation function', () => {
+ const { container } = render(
+ ,
+ );
+
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems.length).toBe(1);
+ });
+
+ it('should cover relation function when ele is null', () => {
+ const TestRelationComponent = () => {
+ const { relation } = React.useContext(StepsContext);
+
+ React.useEffect(() => {
+ relation(null);
+ }, [relation]);
+
+ return
+ ,
+ );
+
+ expect(container.querySelector('.t-steps')).toBeTruthy();
+ });
+
+ it('should cover relation function when ele is undefined', () => {
+ const TestRelationComponent = () => {
+ const { relation } = React.useContext(StepsContext);
+
+ React.useEffect(() => {
+ relation(undefined);
+ }, [relation]);
+
+ return
+ ,
+ );
+
+ expect(container.querySelector('.t-steps')).toBeTruthy();
+ });
+
+ it('should not add null or undefined to childrenNodes', () => {
+ let relationFn;
+
+ const TestCaptureComponent = () => {
+ const context = React.useContext(StepsContext);
+ relationFn = context.relation;
+ return null;
+ };
+
+ render(
+
+ ,
+ );
+
+ expect(() => {
+ relationFn(null);
+ relationFn(undefined);
+ }).not.toThrow();
+ });
+ });
+});
+
+describe('StepItem', () => {
+ describe('props', () => {
+ it(':title & content', () => {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems).toHaveLength(itemsWithTNode.length);
+ expect($stepItems[0].querySelector(`.${stepItem}__title`).textContent).toBe('字符串标题');
+ expect($stepItems[0].querySelector(`.${stepItem}__description`).textContent).toBe('字符串内容');
+ expect($stepItems[1].querySelector(`.${stepItem}__title`).innerHTML).toContain('React元素标题');
+ expect($stepItems[1].querySelector(`.${stepItem}__description`).innerHTML).toContain('
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ $stepItems.forEach((item) => {
+ expect(item.querySelector(`.${stepItem}__icon`)).toBeTruthy();
+ expect(item.querySelector(`.${prefix}-icon-cart`)).toBeTruthy();
+ });
+ });
+ it(':extra', () => {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ const $extra = $stepItems[1].querySelector(`.${stepItem}__extra`);
+ expect($extra).toBeTruthy();
+ expect($extra.querySelector('img')).toBeTruthy();
+ });
+ it(':status', () => {
+ const current = 1;
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ $stepItems.forEach((item, index) => {
+ expect(item.classList.contains(`${stepItem}--${itemsWithTNode[index].status}`));
+ });
+ });
+ it(':titleRight', () => {
+ const { container } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ $stepItems.forEach((item) => {
+ expect(item.querySelector(`.${prefix}-icon.${prefix}-icon-chevron-right`)).toBeTruthy();
+ });
+ const { container: container2 } = render(
+
+ {itemsWithTNode.map((item, index) => (
+ ,
+ );
+ const $stepItems2 = container2.querySelectorAll(`.${stepItem}`);
+ $stepItems2.forEach((item) => {
+ expect(item.querySelector(`.${prefix}-icon`)).toBeNull();
+ });
+ });
+ });
+ describe('slot', () => {
+ it('should render children as content', () => {
+ const { container } = render(
+
+
+
+ ,
+ );
+ const $description = container.querySelector(`.${stepItem}__description`);
+ expect($description.querySelector('.custom-content')).toBeTruthy();
+ expect($description.textContent).toBe('React for Mobile');
+ expect(container.firstChild).toMatchSnapshot();
+ });
+ });
+ describe('edge cases', () => {
+ it('should handle custom icon as false', () => {
+ const { container } = render(
+
+ ,
+ );
+ const $stepItem = container.querySelector(`.${stepItem}`);
+ expect($stepItem.querySelector(`.${stepItem}__icon`)).toBeFalsy();
+ expect($stepItem.querySelector(`.${stepItem}__circle`)).toBeTruthy();
+ });
+ it('should handle custom status priority', () => {
+ const { container } = render(
+
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ expect($stepItems[0].classList.contains(`${stepItem}--error`)).toBeTruthy();
+ expect($stepItems[1].classList.contains(`${stepItem}--finish`)).toBeTruthy();
+ });
+ it('should render correct icons for different statuses', () => {
+ const { container } = render(
+
+ ,
+ );
+ const $stepItems = container.querySelectorAll(`.${stepItem}`);
+ const finishIcon = $stepItems[0].querySelector(`.${stepItem}__circle`);
+ expect(finishIcon).toBeTruthy();
+ expect(finishIcon.textContent).toContain('');
+ const errorIcon = $stepItems[1].querySelector(`.${stepItem}__circle`);
+ expect(errorIcon).toBeTruthy();
+ expect(errorIcon.textContent).toContain('');
+ const processIcon = $stepItems[2].querySelector(`.${stepItem}__circle`);
+ expect(processIcon).toBeTruthy();
+ expect(processIcon.textContent).toContain('3');
+ });
+ });
+});
diff --git a/src/steps/_example/horizontal.tsx b/src/steps/_example/horizontal.tsx
index ae6ee3dcf..cd202f39d 100644
--- a/src/steps/_example/horizontal.tsx
+++ b/src/steps/_example/horizontal.tsx
@@ -3,7 +3,7 @@ import { Steps, StepItem } from 'tdesign-mobile-react';
import { CartIcon } from 'tdesign-icons-react';
export default function StepsDemo() {
- const [first, setFirst] = useState(1);
+ const [first, setFirst] = useState('1');
const [second, setSecond] = useState(1);
const [third, setThird] = useState(1);
const options = {
@@ -13,7 +13,7 @@ export default function StepsDemo() {
};
const count = 4;
- const onFirstChange = (current: number) => {
+ const onFirstChange = (current: number | string) => {
setFirst(current);
};
const onSecondChange = (current: number) => {
@@ -23,14 +23,17 @@ export default function StepsDemo() {
setThird(current);
};
- const getTitle = (type: 'first' | 'second' | 'third', index: number) => {
- if (index === options[type]) {
+ const getTitle = (type: 'first' | 'second' | 'third', index: number | string) => {
+ const numIndex = Number(index);
+ const currentValue = Number(options[type]);
+
+ if (numIndex === currentValue) {
return '当前步骤';
}
- if (index < options[type]) {
+ if (numIndex < currentValue) {
return '已完成';
}
- if (index > options[type]) {
+ if (numIndex > currentValue) {
return '未完成';
}
};
diff --git a/src/table/__tests__/table.test.tsx b/src/table/__tests__/table.test.tsx
new file mode 100644
index 000000000..37cc9bb86
--- /dev/null
+++ b/src/table/__tests__/table.test.tsx
@@ -0,0 +1,261 @@
+import { describe, it, expect, render, vi, fireEvent, screen, act, waitFor } from '@test/utils';
+import React from 'react';
+import { Table, BaseTableRef, TableRowData, BaseTableCol } from '../index';
+
+const prefix = 't';
+const name = `.${prefix}-table`;
+
+const data = [];
+const total = 5;
+for (let i = 0; i < total; i++) {
+ data.push({
+ index: i + 1,
+ applicant: ['内容', '内容', '内容'][i % 3],
+ status: ['内容', '内容', '内容'][i % 3],
+ channel: ['内容', '内容', '内容'][i % 3],
+ detail: {
+ email: ['内容', '内容', '内容内容内容'][i % 3],
+ },
+ });
+}
+
+const columns: BaseTableCol[] = [
+ { colKey: 'serial-number', title: () => '序号', width: 60 },
+ { colKey: 'applicant', title:
);
+ expect(container.querySelector(`${name}--layout-fixed`)).toBeTruthy();
+
+ rerender(
);
+ expect(container.querySelector(`${name}--layout-auto`)).toBeTruthy();
+ });
+
+ it(': bordered', () => {
+ const { container } = render(
);
+ expect(container.querySelector(`${name}--bordered`)).toBeTruthy();
+ });
+
+ it(': stripe', () => {
+ const { container } = render(
);
+ expect(container.querySelector(`${name}--striped`)).toBeTruthy();
+ });
+
+ it(': BaseTableCol colkey', () => {
+ const columns = [{ title: '姓名' }];
+ const data = [{ name: 'Tom' }];
+ const { container } = render(
);
+ const th = container.querySelector('th');
+ expect(th.className).not.toContain('t-table__th-');
+ });
+
+ it(': BaseTableCol align', () => {
+ columns[0].align = 'center';
+ columns[1].align = 'right';
+ const { container } = render(
);
+ expect(container.querySelector('.t-align-center')).toBeTruthy();
+ expect(container.querySelector('.t-align-right')).toBeTruthy();
+ });
+
+ it(': BaseTableCol fixed', async () => {
+ const onScroll = vi.fn();
+ columns[0].fixed = 'left';
+ columns[3].fixed = 'right';
+ const { container } = render(
+
,
+ );
+
+ await waitFor(() => {
+ expect(container.querySelector(`${name}__cell--fixed-left`)).toBeTruthy();
+ expect(container.querySelector(`${name}__cell--fixed-right`)).toBeTruthy();
+ });
+
+ const tableContent = container.querySelector(`${name}__content`);
+ Object.defineProperty(tableContent, 'scrollWidth', { value: 500 });
+ fireEvent.scroll(tableContent);
+
+ await waitFor(() => {
+ expect(container.querySelector(`${name}__content--scrollable-to-right`)).toBeTruthy();
+ });
+
+ fireEvent.scroll(tableContent, { target: { scrollLeft: 0 } });
+ await waitFor(() => {
+ expect(container.querySelector(`${name}__content--scrollable-to-left`)).toBeFalsy();
+ });
+ });
+
+ it(': empty', () => {
+ const { container } = render(
);
+ expect(container.querySelector(`${name}__empty`).textContent).toBe('暂无数据');
+ });
+
+ it(': cellEmptyContent', () => {
+ const columns = [
+ { colKey: 'id', title: 'ID' },
+ { colKey: 'name', title: '姓名' },
+ { colKey: 'age', title: '年龄' },
+ ];
+ const data = [
+ { id: 1, name: '' },
+ { id: 2, age: undefined },
+ ];
+ const { container, rerender } = render(
+
,
+ );
+ const cellEmptyContent = screen.getAllByText('暂无数据');
+ expect(cellEmptyContent).toHaveLength(4);
+
+ rerender(
+
);
+ expect(container.querySelector(`${name}__loading--full`)).toBeTruthy();
+ });
+
+ it(': showHeader', () => {
+ const { container } = render(
);
+ expect(container.querySelector(`${name}__header`)).toBeNull();
+ });
+
+ it(': fixedRows', () => {
+ const { container } = render(
);
+ expect(container.querySelector(`${name}__row--fixed-top`)).toBeTruthy();
+ expect(container.querySelector(`${name}__row--fixed-bottom`)).toBeTruthy();
+ expect(container.querySelector(`${name}__row--fixed-bottom-first`)).toBeTruthy();
+ });
+
+ it(': height', () => {
+ const { container, rerender } = render(
);
+ expect(container.querySelector(`${name}__content`)).toHaveStyle('height: 200px;');
+ expect(container.querySelector(`${name}__header--fixed`)).toBeTruthy();
+
+ rerender(
);
+ expect(container.querySelector(`${name}__content`)).toHaveStyle('height: 100%');
+ });
+
+ it(': verticalAlign', () => {
+ const verticalAligns = ['top', 'middle', 'bottom'] as const;
+ verticalAligns.forEach((verticalAlign) => {
+ const { container } = render(
+
,
+ );
+ expect(container.querySelector(`.t-vertical-align-${verticalAlign}`)).toBeTruthy();
+ });
+ });
+
+ it(': rowAttributes', () => {
+ const { container, rerender } = render(
+
,
+ );
+ const row = container.querySelector('tbody tr');
+ expect(row).toHaveAttribute('draggable', 'true');
+
+ rerender(
+
,
+ );
+ expect(row).toHaveAttribute('draggable', 'true');
+ expect(row).toHaveAttribute('title', '超出省略显示');
+
+ rerender( ({ draggable: 'true' })} />);
+ expect(row).toHaveAttribute('draggable', 'true');
+ });
+
+ it(': rowClassName', () => {
+ const { container, rerender } = render(
+
,
+ );
+ expect(container.querySelector('.row-test')).toHaveClass('row-test');
+
+ rerender(
);
+ expect(container.querySelector('.row-test')).toHaveClass('row-test');
+
+ rerender( 'row-test'} />);
+ expect(container.querySelector('.row-test')).toHaveClass('row-test');
+ });
+ });
+
+ describe('events', () => {
+ const columns = [
+ { colKey: 'id', title: 'ID', stopPropagation: true },
+ { colKey: 'name', title: '姓名', stopPropagation: true },
+ { colKey: 'age', title: '年龄', stopPropagation: true },
+ ];
+ const data = [
+ { id: 1, name: '' },
+ { id: 2, age: undefined },
+ ];
+ it(': onCellClick', () => {
+ const onCellClick = vi.fn();
+ const { container } = render(
);
+ fireEvent.click(container.querySelector('td'));
+ expect(onCellClick).toHaveBeenCalled();
+ });
+
+ it(': onRowClick', () => {
+ const onRowClick = vi.fn();
+ const { container } = render(
);
+ fireEvent.click(container.querySelector('tbody tr'));
+ expect(onRowClick).toHaveBeenCalled();
+ });
+
+ it(': onScroll', () => {
+ const onScroll = vi.fn();
+ const { container } = render(
);
+ fireEvent.scroll(container.querySelector(`${name}__content`));
+ expect(onScroll).toHaveBeenCalled();
+ });
+
+ it(': refreshTable', async () => {
+ const ref = React.createRef();
+ render(
);
+ expect(ref.current).toBeTruthy();
+
+ await act(async () => {
+ expect(() => ref.current?.refreshTable()).not.toThrow();
+ });
+ });
+
+ it(': resize', async () => {
+ const { container } = render(
);
+ const resizeEvent = new Event('resize');
+ window.dispatchEvent(resizeEvent);
+ await waitFor(async () => {
+ expect(container.querySelector(`${name}`)).toBeTruthy();
+ });
+ });
+ });
+});
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index bdc0730c3..a987deb20 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -528,14 +528,41 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
+
+
@@ -6554,13 +7994,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -6590,13 +8059,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -6985,13 +8483,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -7021,13 +8548,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -7164,13 +8720,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -7835,14 +9420,33 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user-add"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -7978,13 +9582,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8094,13 +9727,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8210,13 +9872,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8338,13 +10029,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8454,13 +10174,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8570,13 +10319,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -8920,13 +10698,40 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -9568,13 +11604,42 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -9627,13 +11692,42 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -9678,13 +11772,42 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -9722,13 +11845,40 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
+
+
+
csr test src/fab/_example/base.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -48051,13 +53039,38 @@ exports[`csr snapshot test > csr test src/fab/_example/collapsible.tsx 1`] = `
class="t-icon t-icon-add-circle"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/fab/_example/collapsible.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/fab/_example/collapsible.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/fab/_example/draggable.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -48410,14 +53458,21 @@ exports[`csr snapshot test > csr test src/fab/_example/index.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -48956,13 +54011,28 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-browse-off"
fill="none"
height="1em"
- viewBox="0 0 26 24"
+ style="fill: none;"
+ viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -49117,13 +54187,21 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -49191,6 +54277,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49208,6 +54295,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49225,6 +54313,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49242,6 +54331,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49259,6 +54349,7 @@ exports[`csr snapshot test > csr test src/form/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49567,13 +54658,28 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-browse-off"
fill="none"
height="1em"
- viewBox="0 0 26 24"
+ style="fill: none;"
+ viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -49728,13 +54834,21 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -49802,6 +54924,7 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49819,6 +54942,7 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49836,6 +54960,7 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49853,6 +54978,7 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -49870,6 +54996,7 @@ exports[`csr snapshot test > csr test src/form/_example/index.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -50075,13 +55202,28 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-browse-off"
fill="none"
height="1em"
- viewBox="0 0 26 24"
+ style="fill: none;"
+ viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -50232,13 +55374,21 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -50304,6 +55462,7 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -50321,6 +55480,7 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -50338,6 +55498,7 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -50355,6 +55516,7 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -50372,6 +55534,7 @@ exports[`csr snapshot test > csr test src/form/_example/vertical.tsx 1`] = `
class="t-icon t-icon-star-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -52565,14 +57728,41 @@ exports[`csr snapshot test > csr test src/grid/_example/icon.tsx 1`] = `
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -58609,85 +64217,218 @@ exports[`csr snapshot test > csr test src/icon/_example/single.tsx 1`] = ` class="t-icon t-icon-component-checkbox" fill="none" height="1em" + style="fill: none;" viewBox="0 0 24 24" width="1em" > -
+
@@ -58710,10 +64451,10 @@ exports[`csr snapshot test > csr test src/image/_example/base.tsx 1`] = `
提供 fill、contain、cover、none、scale-down 5 种填充类型。
@@ -58810,7 +64551,7 @@ exports[`csr snapshot test > csr test src/image/_example/base.tsx 1`] = `
@@ -58950,7 +64691,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
@@ -59082,7 +64823,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
@@ -59350,12 +65091,12 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
@@ -59806,7 +65538,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
@@ -59830,183 +65562,188 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
class="tdesign-mobile-demo-block__slot"
>
-
-
@@ -60161,12 +65898,12 @@ exports[`csr snapshot test > csr test src/image/_example/position.tsx 1`] = `
@@ -60481,23 +66219,13 @@ exports[`csr snapshot test > csr test src/image/_example/position.tsx 1`] = `
exports[`csr snapshot test > csr test src/image/_example/shape.tsx 1`] = `
@@ -60622,7 +66350,7 @@ exports[`csr snapshot test > csr test src/image/_example/shape.tsx 1`] = `
@@ -60634,183 +66362,188 @@ exports[`csr snapshot test > csr test src/image/_example/shape.tsx 1`] = `
exports[`csr snapshot test > csr test src/image/_example/status.tsx 1`] = `
-
-
-
-
+
+
@@ -64945,6 +70752,7 @@ exports[`csr snapshot test > csr test src/input/_example/index.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -65057,6 +70865,7 @@ exports[`csr snapshot test > csr test src/input/_example/index.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -65192,6 +71001,7 @@ exports[`csr snapshot test > csr test src/input/_example/layout.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -65376,13 +71186,28 @@ exports[`csr snapshot test > csr test src/input/_example/special.tsx 1`] = `
class="t-icon t-icon-browse-off"
fill="none"
height="1em"
- viewBox="0 0 26 24"
+ style="fill: none;"
+ viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -65682,6 +71507,7 @@ exports[`csr snapshot test > csr test src/input/_example/suffix.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -65769,13 +71595,54 @@ exports[`csr snapshot test > csr test src/input/_example/suffix.tsx 1`] = `
class="t-icon t-icon-user-avatar"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -66185,13 +72052,21 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-link"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-link"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66286,13 +72184,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66337,13 +72250,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66362,13 +72290,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66387,13 +72330,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66416,13 +72374,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66441,13 +72414,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66487,13 +72475,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66512,13 +72515,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66537,13 +72555,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66566,13 +72599,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66591,13 +72639,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66642,13 +72705,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66667,13 +72745,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66692,13 +72785,28 @@ exports[`csr snapshot test > csr test src/link/_example/index.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66729,13 +72837,28 @@ exports[`csr snapshot test > csr test src/link/_example/linkSize.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66754,13 +72877,28 @@ exports[`csr snapshot test > csr test src/link/_example/linkSize.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66779,13 +72917,28 @@ exports[`csr snapshot test > csr test src/link/_example/linkSize.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66808,13 +72961,21 @@ exports[`csr snapshot test > csr test src/link/_example/prefix.tsx 1`] = `
class="t-icon t-icon-link"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/link/_example/prefix.tsx 1`] = `
class="t-icon t-icon-link"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/link/_example/status.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66897,13 +73081,28 @@ exports[`csr snapshot test > csr test src/link/_example/status.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66922,13 +73121,28 @@ exports[`csr snapshot test > csr test src/link/_example/status.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66951,13 +73165,28 @@ exports[`csr snapshot test > csr test src/link/_example/status.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -66976,13 +73205,28 @@ exports[`csr snapshot test > csr test src/link/_example/status.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67010,13 +73254,28 @@ exports[`csr snapshot test > csr test src/link/_example/suffix.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67035,13 +73294,28 @@ exports[`csr snapshot test > csr test src/link/_example/suffix.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67069,13 +73343,28 @@ exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67094,13 +73383,28 @@ exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67119,13 +73423,28 @@ exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67148,13 +73467,28 @@ exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -67173,13 +73507,28 @@ exports[`csr snapshot test > csr test src/link/_example/theme.tsx 1`] = `
class="t-icon t-icon-jump"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69053,26 +75402,41 @@ exports[`csr snapshot test > csr test src/navbar/_example/base.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
@@ -69316,13 +75833,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69662,27 +76320,73 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69727,13 +76431,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69862,13 +76650,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70015,13 +76911,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/navbar/_example/left-title.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70213,14 +77247,33 @@ exports[`csr snapshot test > csr test src/navbar/_example/search.tsx 1`] = `
class="t-icon t-icon-search"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/navbar/_example/search.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70285,13 +77384,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/size.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
csr test src/navbar/_example/size.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70436,13 +77643,38 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-sound"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
@@ -70549,6 +77798,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/event.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70574,13 +77824,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/event.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70599,6 +77857,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/iconDemo.tsx 1`] =
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70700,6 +77959,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70746,6 +78006,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70771,13 +78032,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70808,6 +78077,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70833,13 +78103,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70870,13 +78148,38 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-sound"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
@@ -71012,6 +78332,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71041,6 +78362,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-check-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71070,6 +78392,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71099,6 +78422,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71164,6 +78488,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71194,13 +78519,38 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-sound"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
@@ -71920,13 +79317,21 @@ exports[`csr snapshot test > csr test src/picker/_example/base.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72038,13 +79443,21 @@ exports[`csr snapshot test > csr test src/picker/_example/base.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72204,13 +79617,21 @@ exports[`csr snapshot test > csr test src/picker/_example/custom-height.tsx 1`]
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72345,13 +79766,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72463,13 +79892,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72624,13 +80061,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72835,13 +80280,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72871,13 +80324,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -72974,13 +80435,21 @@ exports[`csr snapshot test > csr test src/picker/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -73085,13 +80554,21 @@ exports[`csr snapshot test > csr test src/picker/_example/with-title.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -73121,13 +80598,21 @@ exports[`csr snapshot test > csr test src/picker/_example/with-title.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -75025,14 +82510,33 @@ exports[`csr snapshot test > csr test src/popup/_example/custom-close.tsx 1`] =
color="#fff"
fill="none"
height="1em"
- style="font-size: 32px;"
+ style="fill: none; font-size: 32px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -75229,14 +82733,33 @@ exports[`csr snapshot test > csr test src/popup/_example/index.tsx 1`] = `
color="#fff"
fill="none"
height="1em"
- style="font-size: 32px;"
+ style="fill: none; font-size: 32px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -75497,13 +83020,21 @@ exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = `
class="t-icon t-icon-error t-progress__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92736,13 +101301,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92805,13 +101386,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92847,13 +101444,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92889,13 +101502,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92952,13 +101581,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -92994,13 +101639,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93036,13 +101697,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93090,13 +101767,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/min-max.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/min-max.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/min-max.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93225,13 +101892,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93267,13 +101950,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93309,13 +102008,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/size.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93360,13 +102075,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/status.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/status.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93412,13 +102143,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93454,13 +102201,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93496,13 +102259,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/stepper/_example/theme.tsx 1`] = `
class="t-icon t-icon-add t-stepper__plus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93559,13 +102338,21 @@ exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93712,14 +102499,21 @@ exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93757,14 +102551,21 @@ exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93802,14 +102603,21 @@ exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -93847,14 +102655,21 @@ exports[`csr snapshot test > csr test src/steps/_example/horizontal.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94075,13 +102890,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94228,14 +103051,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94273,14 +103103,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94318,14 +103155,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94363,14 +103207,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94554,13 +103405,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94707,14 +103566,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94752,14 +103618,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94797,14 +103670,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -94842,14 +103722,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95221,13 +104108,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95265,13 +104160,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95380,14 +104283,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95425,14 +104335,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95470,14 +104387,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95515,14 +104439,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -95727,14 +104658,21 @@ exports[`csr snapshot test > csr test src/steps/_example/index.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
@@ -96550,14 +105553,21 @@ exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -96595,14 +105605,21 @@ exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -96640,14 +105657,21 @@ exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -96685,14 +105709,21 @@ exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -96876,13 +105907,21 @@ exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -97029,14 +106068,21 @@ exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -97074,14 +106120,21 @@ exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -97119,14 +106172,21 @@ exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -97164,14 +106224,21 @@ exports[`csr snapshot test > csr test src/steps/_example/vertical.tsx 1`] = `
class="t-icon t-icon-cart"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -97985,13 +107052,33 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -98101,13 +107228,33 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -98170,13 +107317,33 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/icon.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -98757,13 +108004,33 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -98826,13 +108093,33 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/swipe-cell/_example/index.tsx 1`] = `
class="t-icon t-icon-delete"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/switch/_example/index.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -102979,13 +112294,21 @@ exports[`csr snapshot test > csr test src/switch/_example/label.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -103328,14 +112651,38 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] =
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
@@ -103734,14 +113347,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -103763,14 +113388,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -103933,14 +113586,38 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
@@ -104153,14 +113986,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104182,14 +114027,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104269,13 +114142,21 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-view-list"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
+
@@ -104606,14 +114667,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104635,14 +114708,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104695,14 +114796,38 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104724,14 +114849,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104753,14 +114924,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104782,14 +114965,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104828,14 +115039,38 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104857,14 +115092,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104886,14 +115167,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104915,14 +115208,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/pure-icon.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -104958,14 +115279,38 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104987,14 +115332,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -105016,14 +115407,26 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -105045,14 +115448,42 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/round.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -105198,13 +115629,21 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/text-spread.tsx 1`] =
class="t-icon t-icon-view-list"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
@@ -119940,13 +130657,21 @@ exports[`csr snapshot test > csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/character-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/exhibition.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/image-avatar.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `""`;
@@ -121118,11 +132027,11 @@ exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
+
,
+ );
+
+ fireEvent.click(screen.getByTestId('outside'));
+
+ expect(handleClickOutside).toHaveBeenCalled();
+ });
+
+ it('should handle data with undefined onClick', () => {
+ const data = [{ icon: ★, text: '测试', actived: false, onClick: undefined }];
+
+ render(Outside
+
-
-`;
-
-exports[`Steps > Steps specialDemo demo 1`] = `
-
- 水平带序号步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
- 2
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
- 3
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
- 4
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
- 水平带图标步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
- 水平简略步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-`;
-
-exports[`Steps > Steps statusDemo demo 1`] = `
-
- 垂直自定义步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
-
-
-
- 纯展示步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 步骤展示
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
- 步骤展示
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
- 步骤展示
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
- 步骤展示
-
-
- 可自定义此处内容
-
-
-
-
-`;
-
-exports[`Steps > Steps verticalDemo demo 1`] = `
-
- 选项卡状态
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
- 3
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
- 4
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-
-
-
-
-
-
- 未完成
-
-
- 辅助信息
-
-
-
-
-`;
diff --git a/src/steps/__tests__/__snapshots__/steps.test.tsx.snap b/src/steps/__tests__/__snapshots__/steps.test.tsx.snap
new file mode 100644
index 000000000..a6fdae786
--- /dev/null
+++ b/src/steps/__tests__/__snapshots__/steps.test.tsx.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StepItem > slot > should render children as content 1`] = `
+
- 垂直带序号步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
- 2
-
-
-
-
-
- 当前步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
- 3
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
- 4
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
- 垂直带图标步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
- 垂直简略步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
- 垂直带可自定义此处内容步骤条
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 已完成
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
-
- 当前步骤
-
-
- 可自定义此处内容
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
-
-
-
-
-
-
-
- 未完成步骤
-
-
- 可自定义此处内容
-
-
-
+
+`;
diff --git a/src/steps/__tests__/demo.test.tsx b/src/steps/__tests__/demo.test.tsx
deleted file mode 100644
index 426e1a581..000000000
--- a/src/steps/__tests__/demo.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { describe, expect, render, it } from '@test/utils';
-import React from 'react';
-
-import horizontalDemo from '../_example/horizontal';
-import verticalDemo from '../_example/vertical';
-import statusDemo from '../_example/status';
-import specialDemo from '../_example/special';
-
-const mapper = {
- horizontalDemo,
- verticalDemo,
- statusDemo,
- specialDemo,
-};
-
-describe('Steps', () => {
- Object.keys(mapper).forEach((item) => {
- it(`Steps ${item} demo`, () => {
- const DemoComponent = mapper[item];
- const { container } = render(
+
+
+
+
+ 1
+
+
+
+
+ 步骤1
+
+
+
+
+
+ React for Mobile
+
+ React元素内容
,
+ status: 'process',
+ },
+ {
+ title: () => 函数标题,
+ content: () => 函数内容,
+ status: 'finish',
+ },
+ {
+ title: React元素标题,
+ content: () => 函数内容,
+ status: 'error',
+ },
+];
+
+describe('Steps', () => {
+ describe('props', () => {
+ it(':current', () => {
+ const currentValues = [2, '2'] as const;
+
+ function checkCurrent(current: (typeof currentValues)[number]) {
+ const { container } = render(
+ Test
;
+ };
+
+ const { container } = render(
+ Test
;
+ };
+
+ const { container } = render(
+ React元素内容
');
+ expect($stepItems[2].querySelector(`.${stepItem}__title`).innerHTML).toContain('函数标题');
+ expect($stepItems[2].querySelector(`.${stepItem}__description`).innerHTML).toContain('函数内容');
+ });
+ it(':icon', () => {
+ const { container } = render(
+ React for Mobile
+ 标题
, ellipsis: true, cell: 'type-slot-name', minWidth: 50 },
+ {
+ colKey: 'status',
+ title: '标题',
+ ellipsis: true,
+ },
+ {
+ colKey: 'channel',
+ title: '标题',
+ cell: ({ col, row }) => row[col.colKey],
+ ellipsis: true,
+ },
+ {
+ colKey: 'detail.email',
+ title: '标题',
+ cell: () => '内容',
+ ellipsis: true,
+ },
+];
+
+describe('table', () => {
+ describe(' props ', () => {
+ it(': tableLayout', () => {
+ const { container, rerender } = render( csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-image"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/grid-multiple.ts
class="t-icon t-icon-image"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-edit-1"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-image"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-image"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/action-sheet/_example/index.tsx 1`] =
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -6139,13 +7550,42 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/badge/_example/base.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/badge/_example/base.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -9148,13 +11007,40 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -9340,13 +11280,40 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-shop"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -9517,13 +11524,42 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/badge/_example/theme.tsx 1`] = `
class="t-icon t-icon-notification"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/badge/_example/theme.tsx 1`] = `
class="t-icon t-icon-shop"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -10029,14 +12219,60 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47579,12 +52543,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/multiple.tsx 1`
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47558,12 +52520,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/multiple.tsx 1`
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47537,12 +52497,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/multiple.tsx 1`
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47501,12 +52459,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47459,12 +52415,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/icon.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47438,12 +52392,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47391,12 +52343,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-up-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47370,12 +52320,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-up-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47328,12 +52276,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47307,12 +52253,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47286,12 +52230,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
@@ -47244,12 +52186,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
- 带标题抽屉 + 带标题样式
csr test src/drawer/_example/index.tsx 1`] = `
>
+
+ csr test src/drawer/_example/index.tsx 1`] = `
+ - 带底部插槽抽屉 + 抽屉方向 +
+
+
+
+
+
+
+
+
+
@@ -47223,12 +52163,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/index.tsx 1`] =
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
+
+ 带底部插槽样式
csr test src/drawer/_example/index.tsx 1`] = `
class="t-button__content"
>
- 带底部插槽抽屉
+ 带底部插槽
@@ -47135,12 +52071,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/disabled.tsx 1`
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -47156,12 +52094,14 @@ exports[`csr snapshot test > csr test src/dropdown-menu/_example/disabled.tsx 1`
class="t-icon t-icon-caret-down-small t-dropdown-menu__icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/drawer/_example/index.tsx 1`] = `
`;
+exports[`csr snapshot test > csr test src/drawer/_example/placement.tsx 1`] = `
+
+
+`;
+
exports[`csr snapshot test > csr test src/drawer/_example/plugin.tsx 1`] = `
+
+
+
+
+ csr test src/grid/_example/icon.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/grid/_example/icon.tsx 1`] = `
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/grid/_example/icon.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/grid/_example/index.tsx 1`] = `
class="t-icon t-icon-share"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
csr test src/grid/_example/index.tsx 1`] = `
class="t-icon t-icon-star"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/grid/_example/index.tsx 1`] = `
class="t-icon t-icon-download"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/grid/_example/index.tsx 1`] = `
class="t-icon t-icon-edit"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/guide/_example/my-popover.tsx 1`] = `
class="t-icon t-icon-arrow-up pop-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -58178,85 +63573,218 @@ exports[`csr snapshot test > csr test src/icon/_example/index.tsx 1`] = ` class="t-icon t-icon-component-checkbox" fill="none" height="1em" + style="fill: none;" viewBox="0 0 24 24" width="1em" > -
+
@@ -58516,89 +64044,169 @@ exports[`csr snapshot test > csr test src/icon/_example/single.tsx 1`] = `
csr test src/icon/_example/index.tsx 1`] = `
+
@@ -58178,85 +63573,218 @@ exports[`csr snapshot test > csr test src/icon/_example/index.tsx 1`] = ` class="t-icon t-icon-component-checkbox" fill="none" height="1em" + style="fill: none;" viewBox="0 0 24 24" width="1em" > -
+
@@ -58609,85 +64217,218 @@ exports[`csr snapshot test > csr test src/icon/_example/single.tsx 1`] = ` class="t-icon t-icon-component-checkbox" fill="none" height="1em" + style="fill: none;" viewBox="0 0 24 24" width="1em" > -
csr test src/image/_example/base.tsx 1`] = `
csr test src/image/_example/base.tsx 1`] = `
csr test src/image/_example/base.tsx 1`] = `
csr test src/image/_example/base.tsx 1`] = `
csr test src/image/_example/base.tsx 1`] = `
csr test src/image/_example/base.tsx 1`] = `
@@ -58950,7 +64691,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
- 用于展示图片素材 + 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
csr test src/image/_example/index.tsx 1`] = `
提供 fill、contain、cover、none、scale-down 5 种填充类型。
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
@@ -59350,12 +65091,12 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = ` cover top
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = ` cover bottom
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
-
- 不同形状的图片
-
-
- 提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
-
csr test src/image/_example/index.tsx 1`] = `
csr test src/image/_example/index.tsx 1`] = `
@@ -59806,7 +65538,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
@@ -59830,183 +65562,188 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
class="tdesign-mobile-demo-block__slot"
>
- ![]()
- - 加载默认提示 -
+
+ ![]()
- + 加载默认提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
- ![]()
-
- - 加载自定义提示 -
+
+ ![]()
- + 加载自定义提示 +
-
+
+
+
+
+
- 
- - 失败默认提示 -
+
+
- + 失败默认提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
-
@@ -60018,7 +65755,7 @@ exports[`csr snapshot test > csr test src/image/_example/index.tsx 1`] = `
exports[`csr snapshot test > csr test src/image/_example/position.tsx 1`] = `
- 失败自定义提示 -
+
+
- + 失败自定义提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
csr test src/image/_example/position.tsx 1`] = `
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = ` cover top
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = ` cover bottom
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
csr test src/image/_example/position.tsx 1`] = `
-
- 不同形状的图片
-
-
- 提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
-
csr test src/image/_example/shape.tsx 1`] = `
csr test src/image/_example/shape.tsx 1`] = `
@@ -60622,7 +66350,7 @@ exports[`csr snapshot test > csr test src/image/_example/shape.tsx 1`] = `
@@ -60634,183 +66362,188 @@ exports[`csr snapshot test > csr test src/image/_example/shape.tsx 1`] = `
exports[`csr snapshot test > csr test src/image/_example/status.tsx 1`] = `
- ![]()
- - 加载默认提示 -
+
+ ![]()
- + 加载默认提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
- ![]()
- 加载自定义提示 -
+
+ ![]()
- + 加载自定义提示 +
-
+
+
+
+
+
-
- - 失败默认提示 -
+
+
- + 失败默认提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
-
@@ -61020,13 +66753,21 @@ exports[`csr snapshot test > csr test src/indexes/_example/base.tsx 1`] = `
class="t-icon t-icon-arrow-left return-indexes"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- - 失败自定义提示 -
+
+
- + 失败自定义提示 +
-
-
+ class="t-loading__dots"
+ style="animation-duration: 800ms; width: 20px; height: 20px;"
+ >
+
+
+
+
csr test src/indexes/_example/custom.tsx 1`] = `
class="t-icon t-icon-arrow-left return-indexes"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -64459,13 +70251,28 @@ exports[`csr snapshot test > csr test src/input/_example/index.tsx 1`] = `
class="t-icon t-icon-browse-off"
fill="none"
height="1em"
- viewBox="0 0 26 24"
+ style="fill: none;"
+ viewBox="0 0 24 24"
width="1em"
>
- csr test src/input/_example/bordered.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -64235,6 +69985,7 @@ exports[`csr snapshot test > csr test src/input/_example/index.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -64322,13 +70073,54 @@ exports[`csr snapshot test > csr test src/input/_example/index.tsx 1`] = `
class="t-icon t-icon-user-avatar"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/navbar/_example/base.tsx 1`] = `
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -69123,14 +75509,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/base.tsx 1`] = `
class="t-icon t-icon-chevron-left custom-capsule__icon"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/base.tsx 1`] = `
class="t-icon t-icon-home custom-capsule__icon"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69186,13 +75603,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/custom-color.tsx 1`] =
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/custom-color.tsx 1`] =
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69266,27 +75737,73 @@ exports[`csr snapshot test > csr test src/navbar/_example/img.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -69478,14 +76040,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left custom-capsule__icon"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home custom-capsule__icon"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69563,14 +76156,33 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-search"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -69778,13 +76512,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -69926,13 +76768,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/index.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70088,13 +77038,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/left-title.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/left-title.tsx 1`] = `
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
@@ -70139,13 +77119,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/left-title.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/navbar/_example/size.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70349,13 +77502,21 @@ exports[`csr snapshot test > csr test src/navbar/_example/size.tsx 1`] = `
class="t-icon t-icon-chevron-left t-navbar__left-arrow"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/notice-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70486,6 +77726,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/customization.tsx
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70524,13 +77765,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/customization.tsx
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -70932,6 +78243,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -70970,13 +78282,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/notice-bar/_example/scrolling.tsx 1`]
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71350,13 +78701,38 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/scrolling.tsx 1`]
class="t-icon t-icon-sound"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/notice-bar/_example/suffixIcon.tsx 1`]
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71484,13 +78861,21 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/suffixIcon.tsx 1`]
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -71509,6 +78894,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/theme.tsx 1`] = `
class="t-icon t-icon-info-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71538,6 +78924,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/theme.tsx 1`] = `
class="t-icon t-icon-check-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71567,6 +78954,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/theme.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71596,6 +78984,7 @@ exports[`csr snapshot test > csr test src/notice-bar/_example/theme.tsx 1`] = `
class="t-icon t-icon-error-circle-filled"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -71721,13 +79110,21 @@ exports[`csr snapshot test > csr test src/picker/_example/area.tsx 1`] = `
class="t-icon t-icon-chevron-right"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
-
@@ -92589,13 +101164,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
-
-
-
-
-
-
@@ -92673,13 +101222,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/index.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
-
-
-
-
-
-
@@ -93174,13 +101825,21 @@ exports[`csr snapshot test > csr test src/stepper/_example/min-max.tsx 1`] = `
class="t-icon t-icon-remove t-stepper__minus-icon"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
-
-
-
-
-
csr test src/steps/_example/index.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/index.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/index.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/special.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/special.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/special.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/special.tsx 1`] = `
color="rgba(0, 0, 0, .4)"
fill="none"
height="1em"
- style="font-size: 22px;"
+ style="fill: none; font-size: 22px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-check"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -96435,13 +105430,21 @@ exports[`csr snapshot test > csr test src/steps/_example/status.tsx 1`] = `
class="t-icon t-icon-close"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/tab-bar/_example/badge-props.tsx 1`] =
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/badge-props.tsx 1`] =
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tab-bar/_example/badge-props.tsx 1`] =
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/base.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tab-bar/_example/base.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/base.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tab-bar/_example/base.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -103705,14 +113272,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/custom.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104124,14 +113911,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-chat"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-user"
fill="none"
height="1em"
- style="font-size: 24px;"
+ style="fill: none; font-size: 24px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
+
+
+
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-home"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -104577,14 +114592,60 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
class="t-icon t-icon-app"
fill="none"
height="1em"
- style="font-size: 20px;"
+ style="fill: none; font-size: 20px;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/tree-select/_example/index.tsx 1`] = `
class="t-icon t-icon-check t-radio__icon-wrap"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/index.tsx 1`] = `
class="t-icon t-icon-check t-checkbox__icon-wrapper"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/index.tsx 1`] = `
class="t-icon t-icon-check t-checkbox__icon-wrapper"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/index.tsx 1`] = `
class="t-icon t-icon-check t-radio__icon-wrap"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/multiple.tsx 1`]
class="t-icon t-icon-check t-checkbox__icon-wrapper"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/multiple.tsx 1`]
class="t-icon t-icon-check t-checkbox__icon-wrapper"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/tree-select/_example/normal.tsx 1`] =
class="t-icon t-icon-check t-radio__icon-wrap"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/base.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -119852,13 +130561,21 @@ exports[`csr snapshot test > csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -120159,12 +130908,14 @@ exports[`csr snapshot test > csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-loading t-upload__progress-loading"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-loading t-upload__progress-loading"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -120349,13 +131126,33 @@ exports[`csr snapshot test > csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close-circle"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/index.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -120621,13 +131434,21 @@ exports[`csr snapshot test > csr test src/upload/_example/multiple.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/upload/_example/multiple.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/multiple.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/multiple.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -120823,12 +131668,14 @@ exports[`csr snapshot test > csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-loading t-upload__progress-loading"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-loading t-upload__progress-loading"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
@@ -121013,13 +131886,33 @@ exports[`csr snapshot test > csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-close-circle"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
- csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-close t-upload__delete-btn"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
csr test src/upload/_example/status.tsx 1`] = `
class="t-icon t-icon-add"
fill="none"
height="1em"
+ style="fill: none;"
viewBox="0 0 24 24"
width="1em"
>
-
+
@@ -121072,43 +131981,43 @@ exports[`csr snapshot test > csr test src/upload/_example/status.tsx 1`] = `
exports[`ssr snapshot test > ssr test src/action-sheet/_example/align.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `"
ActionSheet 动作面板
从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
01 类型
列表型
宫格型
02 组件状态
列表型选项状态
03 组件样式
列表型对齐方式
ActionSheet 动作面板
从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
01 类型
列表型
宫格型
02 组件状态
列表型选项状态
03 组件样式
列表型对齐方式
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"
A
8
12
A
8
12
A
A
+5
Avatar 头像
用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
01 头像类型
图片头像
字符头像
A
A
图标头像
徽标头像
A
8
12
02 特殊类型
纯展示的头像组
+5
带操作的头像组
03 组件尺寸
组件尺寸
A
A
A
Avatar 头像
用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
01 头像类型
图片头像
字符头像
A
A
图标头像
徽标头像
A
8
12
02 特殊类型
纯展示的头像组
+5
带操作的头像组
03 组件尺寸
组件尺寸
A
A
A
A
A
A
A
A
A
BackTop 返回顶部
用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
Badge 徽标
用于告知用户，该区域的状态变化或者待处理任务的数量。
01 组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
02 组件样式
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
03 组件尺寸
Large
8
Middle
8
Badge 徽标
用于告知用户，该区域的状态变化或者待处理任务的数量。
01 组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
02 组件样式
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
03 组件尺寸
Large
8
Middle
8
Large
8
Middle
8
Large
8
Middle
8
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
ssr test src/button/_example/group.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `""`;
@@ -121132,93 +132041,95 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
Button 按钮
按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 组件类型
基础按钮
图标按钮
幽灵按钮
组合按钮
通栏按钮
02 组件状态
按钮禁用态
03 组件样式
按钮尺寸
按钮形状
按钮主题
Button 按钮
按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 组件类型
基础按钮
图标按钮
幽灵按钮
组合按钮
通栏按钮
02 组件状态
按钮禁用态
03 组件样式
按钮尺寸
按钮形状
按钮主题
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text-single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/disabled.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/disabled.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/range.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/range.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/switch-mode.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/switch-mode.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/calendar/_example/without-popup.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `""`;
-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`] = `""`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/defaultExpandAll.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/color-picker/_example/format.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/multiple.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/usePopup.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/other-en.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/other-en.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/config-provider/_example/table-en.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/upload-en.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/upload-en.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `" 时分秒 带毫秒 带方形底 带圆形底 带单位 无底色带单位 "`;
@@ -121266,45 +132177,47 @@ exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `" ssr test src/drawer/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/footer.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/footer.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/drawer/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/empty/_example/imageEmpty.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/advance.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/advance.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/collapsible.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/collapsible.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/draggable.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/draggable.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/footer/_example/base.tsx 1`] = `""`;
@@ -121314,11 +132227,11 @@ exports[`ssr snapshot test > ssr test src/footer/_example/links.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/base.tsx 1`] = `"
单个选择日期
2022-2-18
单个选择日期
2022-2-18
带双行描述的日历
2022-2-18
"`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text.tsx 1`] = `"
带双行描述的日历
2022-2-18
"`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text-single.tsx 1`] = `"
带单行描述的日历
2022-2-18
带单行描述的日历
2022-2-18
含不可选的日历
2022-2-18
含不可选的日历
2022-2-18
Calendar 日历
按照日历形式展示数据或日期的容器
01 组件类型
基础日历
单个选择日期
2022-2-18
多个选择日期
2022-2-18, 2022-...
带单行描述的日历
带单行描述的日历
2022-2-18
带双行描述的日历
带双行描述的日历
2022-2-18
带翻页功能的日历
带翻页功能
2022-2-18
可选择区间日期的日历
2022-02-19
2022-02-21
02 组件样式
含不可选的日历
含不可选的日历
2022-2-18
不使用 Popup
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Calendar 日历
按照日历形式展示数据或日期的容器
01 组件类型
基础日历
单个选择日期
2022-2-18
多个选择日期
2022-2-18, 2022-...
带单行描述的日历
带单行描述的日历
2022-2-18
带双行描述的日历
带双行描述的日历
2022-2-18
带翻页功能的日历
带翻页功能
2022-2-18
可选择区间日期的日历
2022-02-19
2022-02-21
02 组件样式
含不可选的日历
含不可选的日历
2022-2-18
不使用 Popup
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
多个选择日期
2022-2-18, 2022-...
多个选择日期
2022-2-18, 2022-...
2022-02-19
2022-02-21
2022-02-19
2022-02-21
带翻页功能
2022-2-18
带翻页功能
2022-2-18
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
Cascader 级联选择器
用于多层级数据选择，主要为树形结构，可展示更多的数据。
01 基础
基础用法
地址
请选择地址
选项卡风格
地址
请选择地址
02 进阶
带初始值
地址
请选择地址
自定义keys
地址
请选择地址
使用次级标题
地址
请选择地址
选择任意一项
地址
请选择地址
Cascader 级联选择器
用于多层级数据选择，主要为树形结构，可展示更多的数据。
01 基础
基础用法
地址
请选择地址
选项卡风格
地址
请选择地址
02 进阶
带初始值
地址
请选择地址
自定义keys
地址
请选择地址
使用次级标题
地址
请选择地址
选择任意一项
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
Cell 单元格
一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容
01 类型
单行单元格
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
02
多行单元格
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
03 组件样式
卡片单元格
单行标题
单行标题
单行标题
Cell 单元格
一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容
01 类型
单行单元格
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
02
多行单元格
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
03 组件样式
卡片单元格
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
多选标题
多选标题
上限四字
多选标题
多选标题
上限四字
Checkbox 多选框
用于预设的一组选项中执行多项选择，并呈现选择结果。
01 组件类型
纵向多选框
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
横向多选框
多选标题
多选标题
上限四字
带全选多选框
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
02 组件状态
多选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
多选
多选
图片图标
勾选显示位置
多选
多选
非通栏多选样式
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
04 特殊样式
纵向卡片多选框
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
Checkbox 多选框
用于预设的一组选项中执行多项选择，并呈现选择结果。
01 组件类型
纵向多选框
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
横向多选框
多选标题
多选标题
上限四字
带全选多选框
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
02 组件状态
多选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
多选
多选
图片图标
勾选显示位置
多选
多选
非通栏多选样式
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
04 特殊样式
纵向卡片多选框
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
多选
多选
多选
多选
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
选项禁用-已选
选项禁用-默认
选项禁用-已选
选项禁用-默认
多选
多选
图片图标
多选
多选
图片图标
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
Collapse 折叠面板
可以折叠/展开的内容区域。
01 类型
基础面板
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
向上展开
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
带操作说明
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
手风琴模式
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
02 组件样式
卡片折叠面板
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
面板1
内容1
面板2
内容2
面板2
内容2
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
Collapse 折叠面板
可以折叠/展开的内容区域。
01 类型
基础折叠面板
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
带操作说明
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
手风琴式
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
02 组件样式
卡片折叠面板
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`;
-exports[`ssr snapshot test > ssr test src/color-picker/_example/format.tsx 1`] = `"
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
01 类型
RGB
02 组件状态
组件模式选择
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
01 类型
RGB
02 组件状态
组件模式选择
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
RGB
ConfigProvider 全局配置
全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
Upload
Table
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
其他组件
Rating
3 score
Single select date
ConfigProvider 全局配置
全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
Upload
Table
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
其他组件
Rating
3 score
Single select date
Rating
3 score
Single select date
Rating
3 score
Single select date
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
Drawer 抽屉
用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
01 组件类型
基础抽屉
带图标抽屉
02 组件样式
带标题样式
抽屉方向
带底部插槽样式
03 使用方式
使用命令行
Drawer 抽屉
用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
01 组件类型
基础抽屉
带图标抽屉
02 组件样式
带标题抽屉
带底部插槽抽屉
03 使用方式
使用命令行
"`;
exports[`ssr snapshot test > ssr test src/drawer/_example/plugin.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/customized.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/customized.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"
DropdownMenu 下拉菜单
菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
01 组件类型
单选下拉菜单
分栏下拉菜单
向上展开
02 组件状态
禁用状态
插槽样式
DropdownMenu 下拉菜单
菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
01 组件类型
单选下拉菜单
分栏下拉菜单
向上展开
02 组件状态
禁用状态
插槽样式
描述文字
描述文字
描述文字
描述文字
描述文字
Empty 空状态
用于空状态时的占位提示。
图标空状态
描述文字
自定义图片空状态
描述文字
带操作空状态
描述文字
Empty 空状态
用于空状态时的占位提示。
图标空状态
描述文字
自定义图片空状态
描述文字
带操作空状态
描述文字
添加
收藏
分享
添加
收藏
分享
Fab 悬浮按钮
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布
01 类型
纯图标悬浮按钮
图标加文字悬浮按钮
02 组件样式
可移动悬浮按钮
带自动收缩功能
Fab 悬浮按钮
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布
01 类型
纯图标悬浮按钮
图标加文字悬浮按钮
02 组件样式
可移动悬浮按钮
带自动收缩功能
ssr test src/footer/_example/logo.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
"`;
@@ -121330,9 +132243,9 @@ exports[`ssr snapshot test > ssr test src/grid/_example/card.tsx 1`] = `" ssr test src/grid/_example/desc.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `""`;
@@ -121346,7 +132259,7 @@ exports[`ssr snapshot test > ssr test src/guide/_example/dialog-body.tsx 1`] = `
exports[`ssr snapshot test > ssr test src/guide/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/guide/_example/my-popover.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/guide/_example/my-popover.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/guide/_example/no-mask.tsx 1`] = `" ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"![]()
![]()
"`;
+exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"![]()
![]()
"`;
-exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"![]()
![]()
"`;
+exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"![]()
![]()
"`;
exports[`ssr snapshot test > ssr test src/image-viewer/_example/align.tsx 1`] = `""`;
@@ -121382,9 +132295,9 @@ exports[`ssr snapshot test > ssr test src/image-viewer/_example/index.tsx 1`] =
exports[`ssr snapshot test > ssr test src/image-viewer/_example/operation.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/indexes/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/indexes/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/indexes/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/indexes/_example/custom.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/indexes/_example/index.tsx 1`] = `""`;
@@ -121394,25 +132307,25 @@ exports[`ssr snapshot test > ssr test src/input/_example/banner.tsx 1`] = `"
Form 表单
用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 基础类型
基础表单
Form 表单
用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 基础类型
基础表单
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
分享
收藏0
保存
编辑
分享
收藏0
保存
编辑
Grid 宫格
用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
01 组件类型
基础宫格
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
带描述宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带边框宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带徽标宫格
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
可滑动宫格
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
02 组件样式
可传图标的宫格
分享
收藏0
保存
编辑
卡片宫格
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
Grid 宫格
用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
01 组件类型
基础宫格
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
带描述宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带边框宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带徽标宫格
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
可滑动宫格
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
02 组件样式
可传图标的宫格
分享
收藏0
保存
编辑
卡片宫格
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
Guide 引导
逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
01 组件类型
基础引导
不带遮罩的引导
弹窗形式的引导
气泡与弹窗混合的引导
自定义气泡
自定义的图形或说明文案，用来解释或指导该功能使用。
自定义的图形或说明文案，用来解释或指导该功能使用。
"`;
@@ -121360,19 +132273,19 @@ exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"
Icon 图标
Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。
SVG 全量引入
SVG 按需引入
SVG 高级用法
iconfont 图标
iconfont 高级用法
Icon 图标
Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。
SVG 全量引入
SVG 按需引入
SVG 高级用法
iconfont 图标
iconfont 高级用法
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
Image 图片
用于展示图片素材
01 组件类型
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
方形
圆角方形
圆形
02 组件状态
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
Image 图片
用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
01 组件类型
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
方形
圆角方形
圆形
02 组件状态
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
方形
圆角方形
圆形
方形
圆角方形
圆形
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
A
阿坝
阿拉善
阿里
安康
安庆
鞍山
安顺
安阳
澳门
B
北京
白银
保定
宝鸡
保山
包头
巴中
北海
蚌埠
本溪
毕节
滨州
百色
亳州
C
重庆
成都
长沙
长春
沧州
常德
昌都
长治
常州
巢湖
潮州
承德
郴州
赤峰
池州
崇左
楚雄
滁州
朝阳
D
大连
东莞
大理
丹东
大庆
大同
大兴安岭
德宏
德阳
德州
定西
迪庆
东营
E
鄂尔多斯
恩施
鄂州
F
福州
防城港
佛山
抚顺
抚州
阜新
阜阳
G
广州
桂林
贵阳
甘南
赣州
甘孜
广安
广元
贵港
果洛
J
揭阳
吉林
晋江
吉安
胶州
嘉兴
济南
鸡西
荆州
江门
基隆
K
昆明
开封
康定
喀什
A
阿坝
阿拉善
阿里
安康
安庆
鞍山
安顺
安阳
澳门
B
北京
白银
保定
宝鸡
保山
包头
巴中
北海
蚌埠
本溪
毕节
滨州
百色
亳州
C
重庆
成都
长沙
长春
沧州
常德
昌都
长治
常州
巢湖
潮州
承德
郴州
赤峰
池州
崇左
楚雄
滁州
朝阳
D
大连
东莞
大理
丹东
大庆
大同
大兴安岭
德宏
德阳
德州
定西
迪庆
东营
E
鄂尔多斯
恩施
鄂州
F
福州
防城港
佛山
抚顺
抚州
阜新
阜阳
G
广州
桂林
贵阳
甘南
赣州
甘孜
广安
广元
贵港
果洛
J
揭阳
吉林
晋江
吉安
胶州
嘉兴
济南
鸡西
荆州
江门
基隆
K
昆明
开封
康定
喀什
0
0
列表内容
列表内容
列表内容
列表内容
列表内容
3
3
列表内容
列表内容
列表内容
列表内容
列表内容
4
4
列表内容
列表内容
列表内容
列表内容
列表内容
7
7
列表内容
列表内容
列表内容
列表内容
列表内容
8
8
列表内容
列表内容
列表内容
列表内容
列表内容
10
10
列表内容
列表内容
列表内容
列表内容
列表内容
#
#
列表内容
列表内容
列表内容
列表内容
列表内容
0
0
列表内容
列表内容
列表内容
列表内容
列表内容
3
3
列表内容
列表内容
列表内容
列表内容
列表内容
4
4
列表内容
列表内容
列表内容
列表内容
列表内容
7
7
列表内容
列表内容
列表内容
列表内容
列表内容
8
8
列表内容
列表内容
列表内容
列表内容
列表内容
10
10
列表内容
列表内容
列表内容
列表内容
列表内容
#
#
列表内容
列表内容
列表内容
列表内容
列表内容
Indexes 索引
用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。
01 组件类型
基础索引类型
02 组件样式
其他索引类型
ssr test src/input/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/layout.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/layout.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/maxLength.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `""`;
@@ -121422,17 +132335,17 @@ exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `" ssr test src/link/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `""`;
@@ -121474,51 +132387,51 @@ exports[`ssr snapshot test > ssr test src/message/_example/index.tsx 1`] = `" ssr test src/message/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/area.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/area.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/custom-height.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/custom-height.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/popover/_example/index.tsx 1`] = `""`;
@@ -121530,25 +132443,25 @@ exports[`ssr snapshot test > ssr test src/popover/_example/type.tsx 1`] = `"
标签文字
标签文字
标签文字
标签文字
标签文字
Input 输入框
用于单行文本信息输入。
01 类型
基础输入框
标签文字
标签文字
带字数限制输入框
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
带操作输入框
标签文字
标签文字
标签文字
带图标输入框
标签文字
特定类型输入框
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
02 组件状态
输入框状态
标签文字
辅助说明
不可编辑
信息超长状态
标签超长时最多十个字
03 组件样式
内容位置
左对齐
居中
右对齐
竖排样式
标签文字
非通栏样式
标签文字
标签外置样式
标签文字
自定义样式输入框
标签文字
Input 输入框
用于单行文本信息输入。
01 类型
基础输入框
标签文字
标签文字
带字数限制输入框
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
带操作输入框
标签文字
标签文字
标签文字
带图标输入框
标签文字
特定类型输入框
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
02 组件状态
输入框状态
标签文字
辅助说明
不可编辑
信息超长状态
标签超长时最多十个字
03 组件样式
内容位置
左对齐
居中
右对齐
竖排样式
标签文字
非通栏样式
标签文字
标签外置样式
标签文字
自定义样式输入框
标签文字
标签超长时最多十个字
标签文字
标签文字
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
标签文字
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
标签文字
辅助说明
不可编辑
标签文字
标签文字
标签文字
标签文字
标签文字
标签文字
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
Link 链接
文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
Link 链接
文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
Navbar 导航栏
用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
01 组件类型
基础导航栏
带搜索导航栏
带图片导航栏
02 组件样式
标题对齐
标题尺寸
自定义颜色
Navbar 导航栏
用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
01 组件类型
基础导航栏
带搜索导航栏
带图片导航栏
02 组件样式
标题对齐
标题尺寸
自定义颜色
大尺寸标题
"`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"大尺寸标题
"`;
exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"NoticeBar 公告栏
在导航栏下方，用于给用户显示提示消息。
01 组件类型
纯文字的公告栏
带图标静态公告栏
带关闭的公告栏
带入口的公告栏
自定样式的公告栏
自定义内容的公告栏
02 组件状态
公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
03 可滚动的公告栏
可滚动公告栏有水平 (horizontal) 和垂直 (vertical)
NoticeBar 公告栏
在导航栏下方，用于给用户显示提示消息。
01 组件类型
纯文字的公告栏
带图标静态公告栏
带关闭的公告栏
带入口的公告栏
自定样式的公告栏
自定义内容的公告栏
02 组件状态
公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
03 可滚动的公告栏
可滚动公告栏有水平 (horizontal) 和垂直 (vertical)
Overlay 遮罩层
通过遮罩层，可以强调部分内容
01 组件
基础遮罩层
选择地区
选择地区
选择地区
选择季节
选择地区
选择季节
自定义高度选择器
自定义高度选择器
Picker 选择器
用于一组预设数据中的选择。
01 组件类型
基础选择器
选择地区
选择季节
选择地区
02 组件样式
带标题选择器
无标题选择器
自定义高度选择器
Picker 选择器
用于一组预设数据中的选择。
01 组件类型
基础选择器
选择地区
选择季节
选择地区
02 组件样式
带标题选择器
无标题选择器
自定义高度选择器
带标题选择器
无标题选择器
带标题选择器
无标题选择器
Popover 弹出气泡
用于文字提示的气泡框。
01 组件类型
带箭头的弹出气泡
不带箭头的弹出气泡
自定义内容弹出气泡
02 组件样式
顶部弹出气泡
底部弹出气泡
右侧弹出气泡
左侧弹出气泡
ssr test src/popup/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/loading-texts.tsx 1`] = `""`;
@@ -121564,65 +132477,65 @@ exports[`ssr snapshot test > ssr test src/qrcode/_example/color.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"
Popup 弹窗层
由其他控件触发，屏幕滑出或弹出一块自定义内容区域
01 组件类型
基础弹出层
01 组件示例
应用示例
Popup 弹窗层
由其他控件触发，屏幕滑出或弹出一块自定义内容区域
01 组件类型
基础弹出层
01 组件示例
应用示例
80%
百分比内显
环形进度条
30%
微型环形进度条
30%
30%
Progress 进度条
用于展示任务当前的进度。
01 组件类型
线性进度条
80%
百分比内显
环形进度条
30%
微型环形进度条
02 组件状态
线性进度条
78%
78%
百分比内显进度条
环形进度条
30%
Progress 进度条
用于展示任务当前的进度。
01 组件类型
线性进度条
80%
百分比内显
环形进度条
30%
微型环形进度条
02 组件状态
线性进度条
78%
78%
百分比内显进度条
环形进度条
30%
78%
78%
78%
78%
PullDownRefresh 下拉刷新
用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
拖拽该区域演示 顶部下拉刷新
PullDownRefresh 下拉刷新
用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
拖拽该区域演示 顶部下拉刷新
已下拉0次
ssr test src/qrcode/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/qrcode/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/qrcode/_example/level.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/qrcode/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/qrcode/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`;
@@ -121632,7 +132545,7 @@ exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `" ssr test src/side-bar/_example/switch.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `""`;
@@ -121660,27 +132573,27 @@ exports[`ssr snapshot test > ssr test src/slider/_example/range.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/qrcode/_example/index.tsx 1`] = `"
QRCode 二维码
能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
01 组件类型
基本用法
带 Icon 的二维码
无边框的二维码
二维码纠错等级
02 组件状态
active
expired
二维码过期
loading
scanned
已扫描
03 组件样式
二维码颜色
二维码背景颜色
二维码尺寸
QRCode 二维码
能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
01 组件类型
基本用法
带 Icon 的二维码
无边框的二维码
二维码纠错等级
02 组件状态
active
expired
二维码过期
loading
scanned
已扫描
03 组件样式
二维码颜色
二维码背景颜色
二维码尺寸
"`;
exports[`ssr snapshot test > ssr test src/qrcode/_example/size.tsx 1`] = `"
expired
二维码过期
loading
scanned
已扫描
expired
二维码过期
loading
scanned
已扫描
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
单选标题
单选标题
上限四字
单选标题
单选标题
上限四字
单选
单选
单选
单选
Radio 单选框
用于在预设的一组选项中执行单项选择，并呈现选择结果。
01 组件类型
纵向单选框
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
横向单选框
单选标题
单选标题
上限四字
02 组件状态
单选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
单选
单选
勾选显示位置
单选
单选
非通栏单选样式
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
04 特殊样式
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
Radio 单选框
用于在预设的一组选项中执行单项选择，并呈现选择结果。
01 组件类型
纵向单选框
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
横向单选框
单选标题
单选标题
上限四字
02 组件状态
单选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
单选
单选
勾选显示位置
单选
单选
非通栏单选样式
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
04 特殊样式
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
单选
单选
单选
单选
选项禁用-已选
选项禁用-默认
选项禁用-已选
选项禁用-默认
点击或滑动
点击或滑动
实心评分
实心评分
选中及未选中颜色
仅选中颜色
选中及未选中颜色
仅选中颜色
自定义评分数量
自定义评分数量
自定义评分
自定义评分
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分大小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分大小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
顶部显示
底部显示
不显示
顶部显示
底部显示
不显示
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
大尺寸24
小尺寸20
大尺寸24
小尺寸20
可以尝试
可以尝试
自定义结果
描述文字
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
Search 搜索框
用于用户输入搜索信息，并进行页面内容搜索。
01 组件类型
基础搜索框
输入值后显示取消按钮
02 组件样式
搜索框形状
03 组件状态
默认状态其他对齐方式
Search 搜索框
用于用户输入搜索信息，并进行页面内容搜索。
01 组件类型
基础搜索框
输入值后显示取消按钮
02 组件样式
搜索框形状
03 组件状态
默认状态其他对齐方式
标题一
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题二
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题三
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题四
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题五
标题文字4
标题文字4
标题文字4
渐变加载效果
闪烁加载效果
ssr test src/slider/_example/step.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/min-max.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/min-max.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `""`;
@@ -121694,9 +132607,9 @@ exports[`ssr snapshot test > ssr test src/swipe-cell/_example/double.tsx 1`] = `
exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/swipe-cell/_example/left.tsx 1`] = `""`;
@@ -121732,37 +132645,37 @@ exports[`ssr snapshot test > ssr test src/switch/_example/base.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/base.tsx 1`] = `"
Stepper 步进器
用于数量的增减
01 类型
基础步进器
02 组件状态
最大最小状态
禁用状态
02 组件样式
步进器样式
步进器尺寸
Stepper 步进器
用于数量的增减
01 类型
基础步进器
02 组件状态
最大最小状态
禁用状态
02 组件样式
步进器样式
步进器尺寸
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
Steps 步骤条
用于任务步骤展示或任务进度展示。
01 组件类型
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
02 组件状态
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
03 特殊类型
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
Steps 步骤条
用于任务步骤展示或任务进度展示。
01 组件类型
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
02 组件状态
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
03 特殊类型
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
SwipeCell 滑动单元格
用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
右滑单操作
选择
右滑单操作
辅助信息
左右滑操作
删除
左右滑操作
辅助信息
收藏
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
SwipeCell 滑动单元格
用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
右滑单操作
选择
右滑单操作
辅助信息
左右滑操作
删除
左右滑操作
辅助信息
收藏
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
ssr test src/switch/_example/color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/switch/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/switch/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/switch/_example/label.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/switch/_example/label.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/switch/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
"`;
exports[`ssr snapshot test > ssr test src/table/_example/bordered.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/table/_example/custom-row-style.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/table/_example/custom-row-style.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"
"`;
exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
"`;
@@ -121788,15 +132701,15 @@ exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
自定义颜色开关
Switch 开关
开关用于切换当个设置项的状态，开启、关闭为两个互斥的操作
01 组件类型
基础开关
基础开关
带描述开关
带文字开关
带图标开关
自定义颜色开关
自定义颜色开关
02 状态
加载状态
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
03 组件样式
开关尺寸
大尺寸 32
中尺寸 28
小尺寸 24
Switch 开关
开关用于切换当个设置项的状态，开启、关闭为两个互斥的操作
01 组件类型
基础开关
基础开关
带描述开关
带文字开关
带图标开关
自定义颜色开关
自定义颜色开关
02 状态
加载状态
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
03 组件样式
开关尺寸
大尺寸 32
中尺寸 28
小尺寸 24
带文字开关
带图标开关
带文字开关
带图标开关
大尺寸 32
中尺寸 28
小尺寸 24
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
TabBar 标签栏
用于在不同功能模块之间进行快速切换，位于页面底部。
01 组件类型
纯文本标签栏
图标加文字标签栏
纯图标标签栏
双层级纯文本标签栏
01 组件类型
弱选中标签栏
悬浮胶囊标签栏
03 自定义
自定义样式
TabBar 标签栏
用于在不同功能模块之间进行快速切换，位于页面底部。
01 组件类型
纯文本标签栏
图标加文字标签栏
纯图标标签栏
双层级纯文本标签栏
01 组件类型
弱选中标签栏
悬浮胶囊标签栏
03 自定义
自定义样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
Table 表格
表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
01 组件类型
基础表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺可滚动表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
带斑马纹表格样式
标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
带边框表格样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
可自定义样式的表格
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
Table 表格
表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
01 组件类型
基础表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺可滚动表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
带斑马纹表格样式
标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
带边框表格样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
可自定义样式的表格
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
ssr test src/tag/_example/checkable.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `""`;
@@ -121836,12 +132749,12 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/multiple.tsx 1`]
exports[`ssr snapshot test > ssr test src/tree-select/_example/normal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/upload/_example/custom.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/upload/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `""`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index e817cd116..9ff0fb681 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -2,43 +2,43 @@
exports[`ssr snapshot test > ssr test src/action-sheet/_example/align.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/character-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/exhibition.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/avatar/_example/image-avatar.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `""`;
@@ -48,11 +48,11 @@ exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态可关闭标签
文字标签文字标签
"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"可关闭标签
文字标签文字标签
"`;
-exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"Tag 标签
用于表明主体的类目，属性或状态。
01 组件类型
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态02 组件状态
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
03 组件尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
Tag 标签
用于表明主体的类目，属性或状态。
01 组件类型
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态02 组件状态
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
03 组件尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
"`;
exports[`ssr snapshot test > ssr test src/textarea/_example/autosize.tsx 1`] = `" 标签文字
上传图片
上传图片
请上传身份证人像面
请上传身份证国徽面
Upload上传
用于相册读取或拉起拍照的图片上传功能。
01 类型
单选上传图片
上传图片
多选上传图片
多选上传
02 组件状态
加载状态
上传图片
上传中...
68%
上传失败
上传图片
上传失败
03 样式自定义
单选上传
请上传身份证人像面
请上传身份证国徽面
Upload上传
用于相册读取或拉起拍照的图片上传功能。
01 类型
单选上传图片
上传图片
多选上传图片
多选上传
02 组件状态
加载状态
上传图片
上传中...
68%
上传失败
上传图片
上传失败
03 样式自定义
单选上传
请上传身份证人像面
请上传身份证国徽面
多选上传
多选上传
上传图片
上传中...
68%
上传失败
上传图片
上传失败
上传图片
上传中...
68%
上传失败
上传图片
上传失败
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `"
ActionSheet 动作面板
从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
01 类型
列表型
宫格型
02 组件状态
列表型选项状态
03 组件样式
列表型对齐方式
ActionSheet 动作面板
从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。
01 类型
列表型
宫格型
02 组件状态
列表型选项状态
03 组件样式
列表型对齐方式
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"
A
8
12
A
8
12
A
A
+5
Avatar 头像
用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
01 头像类型
图片头像
字符头像
A
A
图标头像
徽标头像
A
8
12
02 特殊类型
纯展示的头像组
+5
带操作的头像组
03 组件尺寸
组件尺寸
A
A
A
Avatar 头像
用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
01 头像类型
图片头像
字符头像
A
A
图标头像
徽标头像
A
8
12
02 特殊类型
纯展示的头像组
+5
带操作的头像组
03 组件尺寸
组件尺寸
A
A
A
A
A
A
A
A
A
BackTop 返回顶部
用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
Badge 徽标
用于告知用户，该区域的状态变化或者待处理任务的数量。
01 组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
02 组件样式
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
03 组件尺寸
Large
8
Middle
8
Badge 徽标
用于告知用户，该区域的状态变化或者待处理任务的数量。
01 组件类型
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
02 组件样式
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
03 组件尺寸
Large
8
Middle
8
Large
8
Middle
8
Large
8
Middle
8
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
ssr test src/button/_example/group.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `""`;
@@ -62,93 +62,95 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
Button 按钮
按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 组件类型
基础按钮
图标按钮
幽灵按钮
组合按钮
通栏按钮
02 组件状态
按钮禁用态
03 组件样式
按钮尺寸
按钮形状
按钮主题
Button 按钮
按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 组件类型
基础按钮
图标按钮
幽灵按钮
组合按钮
通栏按钮
02 组件状态
按钮禁用态
03 组件样式
按钮尺寸
按钮形状
按钮主题
exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text-single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/disabled.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/disabled.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/range.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/range.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/switch-mode.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/switch-mode.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/calendar/_example/without-popup.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/theme-tab.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/with-title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `""`;
-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`] = `""`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/right.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/special.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/checkbox/_example/type.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/accordion.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/defaultExpandAll.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/collapse/_example/index.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/collapse/_example/placement.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/color-picker/_example/format.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/color-picker/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/multiple.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/color-picker/_example/usePopup.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/index.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/other-en.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/other-en.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/config-provider/_example/table-en.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/config-provider/_example/upload-en.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/config-provider/_example/upload-en.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/count-down/_example/base.tsx 1`] = `" 时分秒 带毫秒 带方形底 带圆形底 带单位 无底色带单位 "`;
@@ -196,45 +198,47 @@ exports[`ssr snapshot test > ssr test src/divider/_example/theme.tsx 1`] = `" ssr test src/drawer/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/footer.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/footer.tsx 1`] = `""`;
+
+exports[`ssr snapshot test > ssr test src/drawer/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/buttonEmpty.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/empty/_example/imageEmpty.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/empty/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/advance.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/advance.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/collapsible.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/collapsible.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/draggable.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/draggable.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/fab/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/fab/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/footer/_example/base.tsx 1`] = `""`;
@@ -244,11 +248,11 @@ exports[`ssr snapshot test > ssr test src/footer/_example/links.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/base.tsx 1`] = `"
单个选择日期
2022-2-18
单个选择日期
2022-2-18
带双行描述的日历
2022-2-18
"`;
+exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text.tsx 1`] = `"
带双行描述的日历
2022-2-18
"`;
-exports[`ssr snapshot test > ssr test src/calendar/_example/custom-text-single.tsx 1`] = `"
带单行描述的日历
2022-2-18
带单行描述的日历
2022-2-18
含不可选的日历
2022-2-18
含不可选的日历
2022-2-18
Calendar 日历
按照日历形式展示数据或日期的容器
01 组件类型
基础日历
单个选择日期
2022-2-18
多个选择日期
2022-2-18, 2022-...
带单行描述的日历
带单行描述的日历
2022-2-18
带双行描述的日历
带双行描述的日历
2022-2-18
带翻页功能的日历
带翻页功能
2022-2-18
可选择区间日期的日历
2022-02-19
2022-02-21
02 组件样式
含不可选的日历
含不可选的日历
2022-2-18
不使用 Popup
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Calendar 日历
按照日历形式展示数据或日期的容器
01 组件类型
基础日历
单个选择日期
2022-2-18
多个选择日期
2022-2-18, 2022-...
带单行描述的日历
带单行描述的日历
2022-2-18
带双行描述的日历
带双行描述的日历
2022-2-18
带翻页功能的日历
带翻页功能
2022-2-18
可选择区间日期的日历
2022-02-19
2022-02-21
02 组件样式
含不可选的日历
含不可选的日历
2022-2-18
不使用 Popup
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
多个选择日期
2022-2-18, 2022-...
多个选择日期
2022-2-18, 2022-...
2022-02-19
2022-02-21
2022-02-19
2022-02-21
带翻页功能
2022-2-18
带翻页功能
2022-2-18
Select Date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
December 2020
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
January 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
February 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
March 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
April 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
May 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
June 2021
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
Cascader 级联选择器
用于多层级数据选择，主要为树形结构，可展示更多的数据。
01 基础
基础用法
地址
请选择地址
选项卡风格
地址
请选择地址
02 进阶
带初始值
地址
请选择地址
自定义keys
地址
请选择地址
使用次级标题
地址
请选择地址
选择任意一项
地址
请选择地址
Cascader 级联选择器
用于多层级数据选择，主要为树形结构，可展示更多的数据。
01 基础
基础用法
地址
请选择地址
选项卡风格
地址
请选择地址
02 进阶
带初始值
地址
请选择地址
自定义keys
地址
请选择地址
使用次级标题
地址
请选择地址
选择任意一项
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
地址
请选择地址
Cell 单元格
一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容
01 类型
单行单元格
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
02
多行单元格
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
03 组件样式
卡片单元格
单行标题
单行标题
单行标题
Cell 单元格
一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容
01 类型
单行单元格
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
02
多行单元格
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
03 组件样式
卡片单元格
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
多选标题
多选标题
上限四字
多选标题
多选标题
上限四字
Checkbox 多选框
用于预设的一组选项中执行多项选择，并呈现选择结果。
01 组件类型
纵向多选框
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
横向多选框
多选标题
多选标题
上限四字
带全选多选框
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
02 组件状态
多选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
多选
多选
图片图标
勾选显示位置
多选
多选
非通栏多选样式
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
04 特殊样式
纵向卡片多选框
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
Checkbox 多选框
用于预设的一组选项中执行多项选择，并呈现选择结果。
01 组件类型
纵向多选框
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行
多选
描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息
横向多选框
多选标题
多选标题
上限四字
带全选多选框
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
02 组件状态
多选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
多选
多选
图片图标
勾选显示位置
多选
多选
非通栏多选样式
多选
多选
多选标题多行多选标题多行多选标题多行多选标题多行多选标题多行多选标题
04 特殊样式
纵向卡片多选框
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
多选
多选
多选
多选
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
多选
描述信息描述信息描述信息描述信息描述信息
横向卡片多选框
多选
多选
多选
选项禁用-已选
选项禁用-默认
选项禁用-已选
选项禁用-默认
多选
多选
图片图标
多选
多选
图片图标
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
Collapse 折叠面板
可以折叠/展开的内容区域。
01 类型
基础面板
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
向上展开
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
带操作说明
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
手风琴模式
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
02 组件样式
卡片折叠面板
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
折叠面板标题
单元测试
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
面板1
内容1
面板2
内容2
面板2
内容2
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
Collapse 折叠面板
可以折叠/展开的内容区域。
01 类型
基础折叠面板
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
带操作说明
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
手风琴式
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
02 组件样式
卡片折叠面板
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容
折叠面板标题
此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容
"`;
-exports[`ssr snapshot test > ssr test src/color-picker/_example/format.tsx 1`] = `"
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
01 类型
RGB
02 组件状态
组件模式选择
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
01 类型
RGB
02 组件状态
组件模式选择
CSS
HEX
RGB
HSL
HSV
CMYK
CSS
RGB
ConfigProvider 全局配置
全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
Upload
Table
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
其他组件
Rating
3 score
Single select date
ConfigProvider 全局配置
全局特性配置包含各个组件的文本语言配置及其他通用配置，可以减少重复的通用配置。
Upload
Table
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
其他组件
Rating
3 score
Single select date
Rating
3 score
Single select date
Rating
3 score
Single select date
Type | Platform | Property |
|---|---|---|
暂无数据 | ||
Drawer 抽屉
用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
01 组件类型
基础抽屉
带图标抽屉
02 组件样式
带标题样式
抽屉方向
带底部插槽样式
03 使用方式
使用命令行
Drawer 抽屉
用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。
01 组件类型
基础抽屉
带图标抽屉
02 组件样式
带标题抽屉
带底部插槽抽屉
03 使用方式
使用命令行
"`;
exports[`ssr snapshot test > ssr test src/drawer/_example/plugin.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/drawer/_example/title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/drawer/_example/title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/customized.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/customized.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/direction.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/disabled.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/dropdown-menu/_example/index.tsx 1`] = `"
DropdownMenu 下拉菜单
菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
01 组件类型
单选下拉菜单
分栏下拉菜单
向上展开
02 组件状态
禁用状态
插槽样式
DropdownMenu 下拉菜单
菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。
01 组件类型
单选下拉菜单
分栏下拉菜单
向上展开
02 组件状态
禁用状态
插槽样式
描述文字
描述文字
描述文字
描述文字
描述文字
Empty 空状态
用于空状态时的占位提示。
图标空状态
描述文字
自定义图片空状态
描述文字
带操作空状态
描述文字
Empty 空状态
用于空状态时的占位提示。
图标空状态
描述文字
自定义图片空状态
描述文字
带操作空状态
描述文字
添加
收藏
分享
添加
收藏
分享
Fab 悬浮按钮
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布
01 类型
纯图标悬浮按钮
图标加文字悬浮按钮
02 组件样式
可移动悬浮按钮
带自动收缩功能
Fab 悬浮按钮
当功能使用图标即可表示清楚时，可使用纯图标悬浮按钮，例如：添加、发布
01 类型
纯图标悬浮按钮
图标加文字悬浮按钮
02 组件样式
可移动悬浮按钮
带自动收缩功能
ssr test src/footer/_example/logo.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/form/_example/vertical.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `""`;
@@ -260,9 +264,9 @@ exports[`ssr snapshot test > ssr test src/grid/_example/card.tsx 1`] = `" ssr test src/grid/_example/desc.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `""`;
@@ -276,7 +280,7 @@ exports[`ssr snapshot test > ssr test src/guide/_example/dialog-body.tsx 1`] = `
exports[`ssr snapshot test > ssr test src/guide/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/guide/_example/my-popover.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/guide/_example/my-popover.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/guide/_example/no-mask.tsx 1`] = `" ssr test src/icon/_example/iconfont-enhanced.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/icon/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/icon/_example/single.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"![]()
![]()
"`;
+exports[`ssr snapshot test > ssr test src/image/_example/index.tsx 1`] = `"![]()
![]()
"`;
-exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/position.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/image/_example/shape.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"![]()
![]()
"`;
+exports[`ssr snapshot test > ssr test src/image/_example/status.tsx 1`] = `"![]()
![]()
"`;
exports[`ssr snapshot test > ssr test src/image-viewer/_example/align.tsx 1`] = `""`;
@@ -312,9 +316,9 @@ exports[`ssr snapshot test > ssr test src/image-viewer/_example/index.tsx 1`] =
exports[`ssr snapshot test > ssr test src/image-viewer/_example/operation.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/indexes/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/indexes/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/indexes/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/indexes/_example/custom.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/indexes/_example/index.tsx 1`] = `""`;
@@ -324,25 +328,25 @@ exports[`ssr snapshot test > ssr test src/input/_example/banner.tsx 1`] = `"
Form 表单
用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 基础类型
基础表单
Form 表单
用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
01 基础类型
基础表单
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
分享
收藏0
保存
编辑
分享
收藏0
保存
编辑
Grid 宫格
用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
01 组件类型
基础宫格
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
带描述宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带边框宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带徽标宫格
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
可滑动宫格
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
02 组件样式
可传图标的宫格
分享
收藏0
保存
编辑
卡片宫格
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
Grid 宫格
用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
01 组件类型
基础宫格
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
带描述宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带边框宫格
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
带徽标宫格
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
可滑动宫格
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
02 组件样式
可传图标的宫格
分享
收藏0
保存
编辑
卡片宫格
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
Guide 引导
逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
01 组件类型
基础引导
不带遮罩的引导
弹窗形式的引导
气泡与弹窗混合的引导
自定义气泡
自定义的图形或说明文案，用来解释或指导该功能使用。
自定义的图形或说明文案，用来解释或指导该功能使用。
"`;
@@ -290,19 +294,19 @@ exports[`ssr snapshot test > ssr test src/icon/_example/iconfont.tsx 1`] = `"
Icon 图标
Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。
SVG 全量引入
SVG 按需引入
SVG 高级用法
iconfont 图标
iconfont 高级用法
Icon 图标
Icon 作为UI构成中重要的元素，一定程度上影响UI界面整体呈现出的风格。
SVG 全量引入
SVG 按需引入
SVG 高级用法
iconfont 图标
iconfont 高级用法
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
Image 图片
用于展示图片素材
01 组件类型
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
方形
圆角方形
圆形
02 组件状态
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
Image 图片
用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
01 组件类型
不同填充模式的图片
提供 fill、contain、cover、none、scale-down 5 种填充类型。
fill
contain
cover
none
scale-down
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
方形
圆角方形
圆形
02 组件状态
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同填充位置的图片
当图片过大时，提供显示图片的局部左侧对齐、或右侧对齐的不同位置。
cover center
cover left
cover right
cover top
cover bottom
contain top
contain bottom
contain center
contain left
contain right
不同形状的图片
提供方形、圆角方形、圆角 3 种形状。 当图片长宽不相等时，无法使用 circle 展示一个正圆。
方形
圆角方形
圆形
方形
圆角方形
圆形
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
加载默认提示
加载自定义提示
失败默认提示
失败自定义提示
A
阿坝
阿拉善
阿里
安康
安庆
鞍山
安顺
安阳
澳门
B
北京
白银
保定
宝鸡
保山
包头
巴中
北海
蚌埠
本溪
毕节
滨州
百色
亳州
C
重庆
成都
长沙
长春
沧州
常德
昌都
长治
常州
巢湖
潮州
承德
郴州
赤峰
池州
崇左
楚雄
滁州
朝阳
D
大连
东莞
大理
丹东
大庆
大同
大兴安岭
德宏
德阳
德州
定西
迪庆
东营
E
鄂尔多斯
恩施
鄂州
F
福州
防城港
佛山
抚顺
抚州
阜新
阜阳
G
广州
桂林
贵阳
甘南
赣州
甘孜
广安
广元
贵港
果洛
J
揭阳
吉林
晋江
吉安
胶州
嘉兴
济南
鸡西
荆州
江门
基隆
K
昆明
开封
康定
喀什
A
阿坝
阿拉善
阿里
安康
安庆
鞍山
安顺
安阳
澳门
B
北京
白银
保定
宝鸡
保山
包头
巴中
北海
蚌埠
本溪
毕节
滨州
百色
亳州
C
重庆
成都
长沙
长春
沧州
常德
昌都
长治
常州
巢湖
潮州
承德
郴州
赤峰
池州
崇左
楚雄
滁州
朝阳
D
大连
东莞
大理
丹东
大庆
大同
大兴安岭
德宏
德阳
德州
定西
迪庆
东营
E
鄂尔多斯
恩施
鄂州
F
福州
防城港
佛山
抚顺
抚州
阜新
阜阳
G
广州
桂林
贵阳
甘南
赣州
甘孜
广安
广元
贵港
果洛
J
揭阳
吉林
晋江
吉安
胶州
嘉兴
济南
鸡西
荆州
江门
基隆
K
昆明
开封
康定
喀什
0
0
列表内容
列表内容
列表内容
列表内容
列表内容
3
3
列表内容
列表内容
列表内容
列表内容
列表内容
4
4
列表内容
列表内容
列表内容
列表内容
列表内容
7
7
列表内容
列表内容
列表内容
列表内容
列表内容
8
8
列表内容
列表内容
列表内容
列表内容
列表内容
10
10
列表内容
列表内容
列表内容
列表内容
列表内容
#
#
列表内容
列表内容
列表内容
列表内容
列表内容
0
0
列表内容
列表内容
列表内容
列表内容
列表内容
3
3
列表内容
列表内容
列表内容
列表内容
列表内容
4
4
列表内容
列表内容
列表内容
列表内容
列表内容
7
7
列表内容
列表内容
列表内容
列表内容
列表内容
8
8
列表内容
列表内容
列表内容
列表内容
列表内容
10
10
列表内容
列表内容
列表内容
列表内容
列表内容
#
#
列表内容
列表内容
列表内容
列表内容
列表内容
Indexes 索引
用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。
01 组件类型
基础索引类型
02 组件样式
其他索引类型
ssr test src/input/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/bordered.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/label.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/layout.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/layout.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/maxLength.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/prefix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/input/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/layout/_example/base.tsx 1`] = `""`;
@@ -352,17 +356,17 @@ exports[`ssr snapshot test > ssr test src/layout/_example/offset.tsx 1`] = `" ssr test src/link/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/linkSize.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/prefix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/suffix.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/link/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/link/_example/underline.tsx 1`] = `""`;
@@ -404,51 +408,51 @@ exports[`ssr snapshot test > ssr test src/message/_example/index.tsx 1`] = `" ssr test src/message/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/scrolling.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/suffixIcon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/theme.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/area.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/area.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/custom-height.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/custom-height.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/picker/_example/with-title.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/popover/_example/index.tsx 1`] = `""`;
@@ -460,25 +464,25 @@ exports[`ssr snapshot test > ssr test src/popover/_example/type.tsx 1`] = `"
标签文字
标签文字
标签文字
标签文字
标签文字
Input 输入框
用于单行文本信息输入。
01 类型
基础输入框
标签文字
标签文字
带字数限制输入框
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
带操作输入框
标签文字
标签文字
标签文字
带图标输入框
标签文字
特定类型输入框
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
02 组件状态
输入框状态
标签文字
辅助说明
不可编辑
信息超长状态
标签超长时最多十个字
03 组件样式
内容位置
左对齐
居中
右对齐
竖排样式
标签文字
非通栏样式
标签文字
标签外置样式
标签文字
自定义样式输入框
标签文字
Input 输入框
用于单行文本信息输入。
01 类型
基础输入框
标签文字
标签文字
带字数限制输入框
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
带操作输入框
标签文字
标签文字
标签文字
带图标输入框
标签文字
特定类型输入框
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
02 组件状态
输入框状态
标签文字
辅助说明
不可编辑
信息超长状态
标签超长时最多十个字
03 组件样式
内容位置
左对齐
居中
右对齐
竖排样式
标签文字
非通栏样式
标签文字
标签外置样式
标签文字
自定义样式输入框
标签文字
标签超长时最多十个字
标签文字
标签文字
标签文字
最大输入10个字符
标签文字
最大输入10个字符，汉字算两个
标签文字
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
输入密码
验证码
手机号
发送验证码
价格
元
数量
个
标签文字
辅助说明
不可编辑
标签文字
标签文字
标签文字
标签文字
标签文字
标签文字
col-8
col-8
col-8
col-4
col-16 col-offset-4
col-12 col-offset-12
Link 链接
文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
Link 链接
文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。
Navbar 导航栏
用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
01 组件类型
基础导航栏
带搜索导航栏
带图片导航栏
02 组件样式
标题对齐
标题尺寸
自定义颜色
Navbar 导航栏
用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。
01 组件类型
基础导航栏
带搜索导航栏
带图片导航栏
02 组件样式
标题对齐
标题尺寸
自定义颜色
大尺寸标题
"`;
+exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"大尺寸标题
"`;
exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/customization.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/event.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/notice-bar/_example/iconDemo.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/notice-bar/_example/mobile.tsx 1`] = `"NoticeBar 公告栏
在导航栏下方，用于给用户显示提示消息。
01 组件类型
纯文字的公告栏
带图标静态公告栏
带关闭的公告栏
带入口的公告栏
自定样式的公告栏
自定义内容的公告栏
02 组件状态
公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
03 可滚动的公告栏
可滚动公告栏有水平 (horizontal) 和垂直 (vertical)
NoticeBar 公告栏
在导航栏下方，用于给用户显示提示消息。
01 组件类型
纯文字的公告栏
带图标静态公告栏
带关闭的公告栏
带入口的公告栏
自定样式的公告栏
自定义内容的公告栏
02 组件状态
公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
03 可滚动的公告栏
可滚动公告栏有水平 (horizontal) 和垂直 (vertical)
Overlay 遮罩层
通过遮罩层，可以强调部分内容
01 组件
基础遮罩层
选择地区
选择地区
选择地区
选择季节
选择地区
选择季节
自定义高度选择器
自定义高度选择器
Picker 选择器
用于一组预设数据中的选择。
01 组件类型
基础选择器
选择地区
选择季节
选择地区
02 组件样式
带标题选择器
无标题选择器
自定义高度选择器
Picker 选择器
用于一组预设数据中的选择。
01 组件类型
基础选择器
选择地区
选择季节
选择地区
02 组件样式
带标题选择器
无标题选择器
自定义高度选择器
带标题选择器
无标题选择器
带标题选择器
无标题选择器
Popover 弹出气泡
用于文字提示的气泡框。
01 组件类型
带箭头的弹出气泡
不带箭头的弹出气泡
自定义内容弹出气泡
02 组件样式
顶部弹出气泡
底部弹出气泡
右侧弹出气泡
左侧弹出气泡
ssr test src/popup/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/pull-down-refresh/_example/loading-texts.tsx 1`] = `""`;
@@ -494,65 +498,65 @@ exports[`ssr snapshot test > ssr test src/qrcode/_example/color.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"
Popup 弹窗层
由其他控件触发，屏幕滑出或弹出一块自定义内容区域
01 组件类型
基础弹出层
01 组件示例
应用示例
Popup 弹窗层
由其他控件触发，屏幕滑出或弹出一块自定义内容区域
01 组件类型
基础弹出层
01 组件示例
应用示例
80%
百分比内显
环形进度条
30%
微型环形进度条
30%
30%
Progress 进度条
用于展示任务当前的进度。
01 组件类型
线性进度条
80%
百分比内显
环形进度条
30%
微型环形进度条
02 组件状态
线性进度条
78%
78%
百分比内显进度条
环形进度条
30%
Progress 进度条
用于展示任务当前的进度。
01 组件类型
线性进度条
80%
百分比内显
环形进度条
30%
微型环形进度条
02 组件状态
线性进度条
78%
78%
百分比内显进度条
环形进度条
30%
78%
78%
78%
78%
PullDownRefresh 下拉刷新
用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
拖拽该区域演示 顶部下拉刷新
PullDownRefresh 下拉刷新
用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。
拖拽该区域演示 顶部下拉刷新
已下拉0次
ssr test src/qrcode/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/qrcode/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/qrcode/_example/level.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/qrcode/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/qrcode/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/card.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/placement.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/radio/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/count.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/placement.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/show-text.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/rate/_example/special.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/action.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/search/_example/shape.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`;
@@ -562,7 +566,7 @@ exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `" ssr test src/side-bar/_example/switch.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `""`;
@@ -590,27 +594,27 @@ exports[`ssr snapshot test > ssr test src/slider/_example/range.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/qrcode/_example/index.tsx 1`] = `"
QRCode 二维码
能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
01 组件类型
基本用法
带 Icon 的二维码
无边框的二维码
二维码纠错等级
02 组件状态
active
expired
二维码过期
loading
scanned
已扫描
03 组件样式
二维码颜色
二维码背景颜色
二维码尺寸
QRCode 二维码
能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
01 组件类型
基本用法
带 Icon 的二维码
无边框的二维码
二维码纠错等级
02 组件状态
active
expired
二维码过期
loading
scanned
已扫描
03 组件样式
二维码颜色
二维码背景颜色
二维码尺寸
"`;
exports[`ssr snapshot test > ssr test src/qrcode/_example/size.tsx 1`] = `"
expired
二维码过期
loading
scanned
已扫描
expired
二维码过期
loading
scanned
已扫描
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
单选标题
单选标题
上限四字
单选标题
单选标题
上限四字
单选
单选
单选
单选
Radio 单选框
用于在预设的一组选项中执行单项选择，并呈现选择结果。
01 组件类型
纵向单选框
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
横向单选框
单选标题
单选标题
上限四字
02 组件状态
单选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
单选
单选
勾选显示位置
单选
单选
非通栏单选样式
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
04 特殊样式
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
Radio 单选框
用于在预设的一组选项中执行单项选择，并呈现选择结果。
01 组件类型
纵向单选框
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
单选
横向单选框
单选标题
单选标题
上限四字
02 组件状态
单选框状态
选项禁用-已选
选项禁用-默认
03 组件样式
勾选样式
单选
单选
勾选显示位置
单选
单选
非通栏单选样式
单选
单选
单选标题多行单选标题多行单选标题多行单选标题多行单选标题多行
04 特殊样式
纵向卡片单选框
单选
单选
单选
横向卡片单选框
单选
单选
单选
单选
单选
单选
单选
选项禁用-已选
选项禁用-默认
选项禁用-已选
选项禁用-默认
点击或滑动
点击或滑动
实心评分
实心评分
选中及未选中颜色
仅选中颜色
选中及未选中颜色
仅选中颜色
自定义评分数量
自定义评分数量
自定义评分
自定义评分
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分大小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
Rate 评分
用于对某行为/事物进行打分。
01 类型
实心评分
实心评分
自定义评分
自定义评分
自定义数量评分
自定义评分数量
带描述评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
评分弹框位置
顶部显示
底部显示
不显示
02 组件状态
只可选全星时
点击或滑动
可选半星时
点击或滑动
03 组件样式
评分大小
大尺寸24
小尺寸20
设置评分颜色
选中及未选中颜色
仅选中颜色
04 特殊样式
竖向带描述评分
可以尝试
顶部显示
底部显示
不显示
顶部显示
底部显示
不显示
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
带描述评分
很差
带描述评分
5 分
带描述评分
未评分
大尺寸24
小尺寸20
大尺寸24
小尺寸20
可以尝试
可以尝试
自定义结果
描述文字
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示
Result 结果
结果反馈
01类型
不同结果反馈
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
自定义结果
自定义结果
描述文字
页面位置展示
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
Search 搜索框
用于用户输入搜索信息，并进行页面内容搜索。
01 组件类型
基础搜索框
输入值后显示取消按钮
02 组件样式
搜索框形状
03 组件状态
默认状态其他对齐方式
Search 搜索框
用于用户输入搜索信息，并进行页面内容搜索。
01 组件类型
基础搜索框
输入值后显示取消按钮
02 组件样式
搜索框形状
03 组件状态
默认状态其他对齐方式
标题一
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题文字0
标题二
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题文字1
标题三
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题文字2
标题四
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题文字3
标题五
标题文字4
标题文字4
标题文字4
渐变加载效果
闪烁加载效果
ssr test src/slider/_example/step.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/min-max.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/min-max.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/size.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/stepper/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/horizontal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/special.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/steps/_example/vertical.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `""`;
@@ -624,9 +628,9 @@ exports[`ssr snapshot test > ssr test src/swipe-cell/_example/double.tsx 1`] = `
exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/swipe-cell/_example/left.tsx 1`] = `""`;
@@ -662,37 +666,37 @@ exports[`ssr snapshot test > ssr test src/switch/_example/base.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/stepper/_example/base.tsx 1`] = `"
Stepper 步进器
用于数量的增减
01 类型
基础步进器
02 组件状态
最大最小状态
禁用状态
02 组件样式
步进器样式
步进器尺寸
Stepper 步进器
用于数量的增减
01 类型
基础步进器
02 组件状态
最大最小状态
禁用状态
02 组件样式
步进器样式
步进器尺寸
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
Steps 步骤条
用于任务步骤展示或任务进度展示。
01 组件类型
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
02 组件状态
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
03 特殊类型
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
Steps 步骤条
用于任务步骤展示或任务进度展示。
01 组件类型
水平带序号步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平带图标步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
水平简略步骤条
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
02 组件状态
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
03 特殊类型
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
垂直自定义步骤条
已完成
已完成
已完成
当前步骤
纯展示步骤条
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
步骤展示
可自定义此处内容
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
选项卡状态
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
已完成
辅助信息
当前步骤
辅助信息
未完成
辅助信息
未完成
辅助信息
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带序号步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带图标步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直简略步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
垂直带可自定义此处内容步骤条
已完成
可自定义此处内容
当前步骤
可自定义此处内容
未完成步骤
可自定义此处内容
未完成步骤
可自定义此处内容
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
SwipeCell 滑动单元格
用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
右滑单操作
选择
右滑单操作
辅助信息
左右滑操作
删除
左右滑操作
辅助信息
收藏
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
SwipeCell 滑动单元格
用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
右滑单操作
选择
右滑单操作
辅助信息
左右滑操作
删除
左右滑操作
辅助信息
收藏
删除
带图标的滑动操作
图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
带二次确认的操作
编辑
删除
带二次确认的操作
辅助信息
编辑
删除
左滑单操作
左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
ssr test src/switch/_example/color.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/switch/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/switch/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/switch/_example/label.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/switch/_example/label.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/switch/_example/status.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
"`;
exports[`ssr snapshot test > ssr test src/table/_example/bordered.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/table/_example/custom-row-style.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/table/_example/custom-row-style.tsx 1`] = `"
"`;
-exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"
"`;
+exports[`ssr snapshot test > ssr test src/table/_example/index.tsx 1`] = `"
"`;
exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
"`;
@@ -718,15 +722,15 @@ exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
自定义颜色开关
Switch 开关
开关用于切换当个设置项的状态，开启、关闭为两个互斥的操作
01 组件类型
基础开关
基础开关
带描述开关
带文字开关
带图标开关
自定义颜色开关
自定义颜色开关
02 状态
加载状态
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
03 组件样式
开关尺寸
大尺寸 32
中尺寸 28
小尺寸 24
Switch 开关
开关用于切换当个设置项的状态，开启、关闭为两个互斥的操作
01 组件类型
基础开关
基础开关
带描述开关
带文字开关
带图标开关
自定义颜色开关
自定义颜色开关
02 状态
加载状态
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
03 组件样式
开关尺寸
大尺寸 32
中尺寸 28
小尺寸 24
带文字开关
带图标开关
带文字开关
带图标开关
大尺寸 32
中尺寸 28
小尺寸 24
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
TabBar 标签栏
用于在不同功能模块之间进行快速切换，位于页面底部。
01 组件类型
纯文本标签栏
图标加文字标签栏
纯图标标签栏
双层级纯文本标签栏
01 组件类型
弱选中标签栏
悬浮胶囊标签栏
03 自定义
自定义样式
TabBar 标签栏
用于在不同功能模块之间进行快速切换，位于页面底部。
01 组件类型
纯文本标签栏
图标加文字标签栏
纯图标标签栏
双层级纯文本标签栏
01 组件类型
弱选中标签栏
悬浮胶囊标签栏
03 自定义
自定义样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
Table 表格
表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
01 组件类型
基础表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺可滚动表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
带斑马纹表格样式
标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
带边框表格样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
可自定义样式的表格
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
Table 表格
表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
01 组件类型
基础表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺可滚动表格
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
带斑马纹表格样式
标题 | 标题 | 标题 | 标题 | 标题 | 标题 |
|---|---|---|---|---|---|
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 | 内容 | 内容 |
带边框表格样式
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容内容内容 |
内容 | 内容 | 内容 | 内容 |
可自定义样式的表格
申请人 | 审批状态 | 申请耗时(天) | 签署方式 | 邮箱地址 |
|---|---|---|---|---|
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
王芳 | 审批过期 | 1 | 纸质签署 | p.cumx@rampblpa.ru |
贾明 | 审批通过 | 2 | 电子签署 | w.cezkdudy@lhll.au |
张三 | 审批失败 | 10 | 纸质签署 | r.nmgw@peurezgn.sl |
标题 | 标题 | 标题 | 标题 |
|---|---|---|---|
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
内容 | 内容 | 内容 | 内容 |
横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 | 横向平铺内容不省略 |
内容 | 内容 | 内容 | 内容 |
ssr test src/tag/_example/checkable.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `""`;
@@ -766,12 +770,12 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/multiple.tsx 1`]
exports[`ssr snapshot test > ssr test src/tree-select/_example/normal.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/base.tsx 1`] = `""`;
exports[`ssr snapshot test > ssr test src/upload/_example/custom.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/index.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/index.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/multiple.tsx 1`] = `""`;
-exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `""`;
+exports[`ssr snapshot test > ssr test src/upload/_example/status.tsx 1`] = `""`;
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态可关闭标签
文字标签文字标签
"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/closable.tsx 1`] = `"可关闭标签
文字标签文字标签
"`;
-exports[`ssr snapshot test > ssr test src/tag/_example/index.tsx 1`] = `"Tag 标签
用于表明主体的类目，属性或状态。
01 组件类型
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态02 组件状态
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
03 组件尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
Tag 标签
用于表明主体的类目，属性或状态。
01 组件类型
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
可关闭标签
文字标签文字标签
可选中的标签
light
未选中态已选中态dark
未选中态已选中态outline
未选中态已选中态light-outline
未选中态已选中态02 组件状态
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
03 组件尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
加大尺寸大尺寸中尺寸小尺寸
展示型标签
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
默认主要警告危险成功
基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
"`;
+exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"基础标签
标签文字标签文字
圆弧标签
标签文字标签文字标签文字
带图标的标签
标签文字标签文字
超长文本省略标签
听说超长可以省略听说超长
"`;
exports[`ssr snapshot test > ssr test src/textarea/_example/autosize.tsx 1`] = `" 标签文字
上传图片
上传图片
请上传身份证人像面
请上传身份证国徽面
Upload上传
用于相册读取或拉起拍照的图片上传功能。
01 类型
单选上传图片
上传图片
多选上传图片
多选上传
02 组件状态
加载状态
上传图片
上传中...
68%
上传失败
上传图片
上传失败
03 样式自定义
单选上传
请上传身份证人像面
请上传身份证国徽面
Upload上传
用于相册读取或拉起拍照的图片上传功能。
01 类型
单选上传图片
上传图片
多选上传图片
多选上传
02 组件状态
加载状态
上传图片
上传中...
68%
上传失败
上传图片
上传失败
03 样式自定义
单选上传
请上传身份证人像面
请上传身份证国徽面
多选上传
多选上传
上传图片
上传中...
68%
上传失败
上传图片
上传失败
上传图片
上传中...
68%
上传失败
上传图片
上传失败