feat: import animal-island-ui snapshot
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Checkbox } from '../../../src';
|
||||
import {
|
||||
labelStyle,
|
||||
ApiTable,
|
||||
CodeBlock,
|
||||
ApiRow,
|
||||
sectionStyle,
|
||||
sectionTitleStyle,
|
||||
tagStyle,
|
||||
demoBoxStyle,
|
||||
} from '../../tools';
|
||||
|
||||
const CHECKBOX_API: ApiRow[] = [
|
||||
{ prop: 'options', desc: '选项列表', type: 'CheckboxOption[]', defaultVal: '-', required: true },
|
||||
{ prop: 'value', desc: '受控选中值列表', type: 'Array<string | number>', defaultVal: '-' },
|
||||
{ prop: 'defaultValue', desc: '默认选中值列表', type: 'Array<string | number>', defaultVal: '[]' },
|
||||
{ prop: 'size', desc: '尺寸', type: "'small' | 'middle' | 'large'", defaultVal: "'middle'" },
|
||||
{ prop: 'disabled', desc: '禁用全部选项', type: 'boolean', defaultVal: 'false' },
|
||||
{ prop: 'direction', desc: '排列方向', type: "'horizontal' | 'vertical'", defaultVal: "'horizontal'" },
|
||||
{ prop: 'onChange', desc: '选中值变化回调', type: '(values: Array<string | number>) => void', defaultVal: '-' },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'React.CSSProperties', defaultVal: '-' },
|
||||
];
|
||||
|
||||
const islandOptions = [
|
||||
{ label: '🌊 海滩', value: 'beach' },
|
||||
{ label: '🌳 森林', value: 'forest' },
|
||||
{ label: '🌸 花园', value: 'garden' },
|
||||
{ label: '🏡 村庄', value: 'village' },
|
||||
];
|
||||
|
||||
const critterOptions = [
|
||||
{ label: '🦋 蝴蝶', value: 'butterfly' },
|
||||
{ label: '🐟 鲈鱼', value: 'bass' },
|
||||
{ label: '🦀 螃蟹', value: 'crab', disabled: true },
|
||||
{ label: '🐛 毛毛虫', value: 'caterpillar' },
|
||||
{ label: '🌊 水母', value: 'jellyfish' },
|
||||
];
|
||||
|
||||
const CheckboxDemo: React.FC = () => {
|
||||
const [selected1, setSelected1] = useState<Array<string | number>>(['beach', 'garden']);
|
||||
const [selected2, setSelected2] = useState<Array<string | number>>([]);
|
||||
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Checkbox <span style={tagStyle}>基础用法</span>
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>默认水平排列（受控）</div>
|
||||
<div style={{ marginBottom: 8, fontSize: 13, color: '#a08060' }}>
|
||||
已选中:{' '}
|
||||
<span style={{ color: '#19c8b9', fontWeight: 600 }}>
|
||||
{selected1.length > 0
|
||||
? islandOptions
|
||||
.filter((o) => selected1.includes(o.value))
|
||||
.map((o) => o.label)
|
||||
.join('、')
|
||||
: '无'}
|
||||
</span>
|
||||
</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox options={islandOptions} value={selected1} onChange={setSelected1} style={{ gap: 20 }} />
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>垂直排列 + 含禁用选项</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox
|
||||
options={critterOptions}
|
||||
value={selected2}
|
||||
onChange={setSelected2}
|
||||
direction="vertical"
|
||||
style={{ gap: 12 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>小尺寸</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox options={islandOptions} defaultValue={['forest']} size="small" />
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>中尺寸（默认）</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox options={islandOptions} defaultValue={['beach']} size="middle" />
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>大尺寸</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox options={islandOptions.slice(0, 3)} defaultValue={['beach']} size="large" />
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>全部禁用</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Checkbox options={islandOptions} defaultValue={['garden', 'village']} disabled />
|
||||
</div>
|
||||
|
||||
<CodeBlock
|
||||
code={`import React, { useState } from 'react';
|
||||
import { Checkbox } from 'animal-island-ui';
|
||||
|
||||
const options = [
|
||||
{ label: '🌊 海滩', value: 'beach' },
|
||||
{ label: '🌳 森林', value: 'forest' },
|
||||
{ label: '🌸 花园', value: 'garden' },
|
||||
];
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 非受控 */}
|
||||
<Checkbox options={options} defaultValue={['beach']} />
|
||||
{/* 受控 */}
|
||||
<Checkbox options={options} value={values} onChange={setValues} />
|
||||
{/* 垂直排列 */}
|
||||
<Checkbox options={options} direction="vertical" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
<ApiTable rows={CHECKBOX_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CheckboxDemo;
|
||||
@@ -0,0 +1,97 @@
|
||||
import React from 'react';
|
||||
import { CodeBlock } from '../../../src';
|
||||
import {
|
||||
labelStyle,
|
||||
ApiTable,
|
||||
ApiRow,
|
||||
sectionStyle,
|
||||
sectionTitleStyle,
|
||||
tagStyle,
|
||||
demoBoxStyle,
|
||||
CodeBlock as CodeBlockBase,
|
||||
} from '../../tools';
|
||||
|
||||
const CODEBLOCK_API: ApiRow[] = [
|
||||
{ prop: 'code', desc: '代码字符串', type: 'string', defaultVal: '-', required: true },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
];
|
||||
|
||||
const CodeBlockDemo: React.FC = () => {
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
CodeBlock <span style={tagStyle}>代码高亮</span>
|
||||
</div>
|
||||
<div style={labelStyle}>基础用法</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { Button } from 'animal-island-ui';
|
||||
|
||||
const App = () => (
|
||||
<Button type="primary">按钮</Button>
|
||||
);
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={labelStyle}>自定义样式</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { CodeBlock } from 'animal-island-ui';
|
||||
|
||||
<CodeBlock
|
||||
code={codeString}
|
||||
style={{ borderRadius: 5, backgroundColor: '#242c46ff' }}
|
||||
className="custom-code"
|
||||
/>`}
|
||||
style={{ borderRadius: 5, backgroundColor: '#242c46ff' }}
|
||||
/>
|
||||
</div>
|
||||
<CodeBlockBase
|
||||
code={`import React from 'react';
|
||||
import { CodeBlock } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 基础用法 */}
|
||||
<CodeBlock code={'
|
||||
import React from 'react';
|
||||
import { Footer } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* sea 类型（默认） */}
|
||||
<Footer type="sea" />
|
||||
{/* tree 类型 */}
|
||||
<Footer type="tree" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;'}
|
||||
/>
|
||||
{/* 自定义样式 */}
|
||||
<CodeBlock
|
||||
code={codeString}
|
||||
style={{ borderRadius: 5, backgroundColor: '#242c46ff' }}
|
||||
className="custom-code"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
|
||||
<ApiTable rows={CODEBLOCK_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlockDemo;
|
||||
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { Footer as FooterComponent } from '../../../src';
|
||||
import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
|
||||
|
||||
const FooterDemo: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Footer <span style={tagStyle}>底部装饰</span>
|
||||
</div>
|
||||
<div style={labelStyle}>
|
||||
Footer 组件 — 页面底部装饰图片，支持 sea（海）和 tree（树）两种类型。
|
||||
</div>
|
||||
<div style={{ ...demoBodyStyle, padding: '40px 0' }}>
|
||||
<div style={labelStyle}>tree 类型（默认）</div>
|
||||
<FooterComponent />
|
||||
</div>
|
||||
<div style={{ ...demoBodyStyle, padding: '40px 0' }}>
|
||||
<div style={labelStyle}>sea 类型</div>
|
||||
<FooterComponent type="sea" />
|
||||
</div>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { Footer } from 'animal-island-ui';
|
||||
|
||||
const App = () => (
|
||||
<div>
|
||||
<Footer />
|
||||
<Footer type="sea" />
|
||||
</div>
|
||||
);`}
|
||||
/>
|
||||
<ApiTable rows={FOOTER_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FOOTER_API: ApiRow[] = [
|
||||
{ prop: 'type', desc: 'Footer 类型', type: "'sea' | 'tree'", defaultVal: "'tree'" },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||||
];
|
||||
|
||||
export default FooterDemo;
|
||||
@@ -0,0 +1,120 @@
|
||||
import React from 'react';
|
||||
import { Icon, ICON_LIST } from '../../../src';
|
||||
import { ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, CodeBlock, labelStyle } from '../../tools';
|
||||
|
||||
const ICON_API: ApiRow[] = [
|
||||
{
|
||||
prop: 'name',
|
||||
desc: '图标名称',
|
||||
type: 'IconName',
|
||||
defaultVal: '-',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
prop: 'size',
|
||||
desc: '图标尺寸',
|
||||
type: 'number | string',
|
||||
defaultVal: '24',
|
||||
},
|
||||
{
|
||||
prop: 'bounce',
|
||||
desc: '弹跳动画',
|
||||
type: 'boolean',
|
||||
defaultVal: 'false',
|
||||
},
|
||||
{
|
||||
prop: 'className',
|
||||
desc: '自定义类名',
|
||||
type: 'string',
|
||||
defaultVal: '-',
|
||||
},
|
||||
{
|
||||
prop: 'style',
|
||||
desc: '自定义样式',
|
||||
type: 'CSSProperties',
|
||||
defaultVal: '-',
|
||||
},
|
||||
];
|
||||
|
||||
const IconDemo: React.FC = () => (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Icon <span style={tagStyle}>10 icons</span>
|
||||
</div>
|
||||
<div style={labelStyle}>基础用法</div>
|
||||
<div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' as const, alignItems: 'center' }}>
|
||||
<Icon name="icon-miles" size={32} />
|
||||
<Icon name="icon-camera" size={32} />
|
||||
<Icon name="icon-chat" size={32} />
|
||||
<Icon name="icon-design" size={32} />
|
||||
<Icon name="icon-map" size={32} />
|
||||
</div>
|
||||
<div style={labelStyle}>size 尺寸</div>
|
||||
<div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
|
||||
<Icon name="icon-miles" size={16} />
|
||||
<Icon name="icon-miles" size={24} />
|
||||
<Icon name="icon-miles" size={32} />
|
||||
<Icon name="icon-miles" size={48} />
|
||||
</div>
|
||||
<div style={labelStyle}>bounce 弹跳动画（鼠标悬停查看效果）</div>
|
||||
<div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
|
||||
<Icon name="icon-miles" size={32} bounce />
|
||||
<Icon name="icon-camera" size={32} bounce />
|
||||
<Icon name="icon-chat" size={32} bounce />
|
||||
</div>
|
||||
<div style={labelStyle}>图标列表</div>
|
||||
<div style={{
|
||||
border: '1px solid #e8e2d6',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
padding: '5px 16px',
|
||||
}}>
|
||||
{ICON_LIST.map((icon, index) => (
|
||||
<div
|
||||
key={icon.name}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
padding: '12px 5px',
|
||||
borderBottom: index < ICON_LIST.length - 1 ? '1px dashed #f0e8d8' : 'none',
|
||||
background: '#fff',
|
||||
}}
|
||||
>
|
||||
<Icon name={icon.name} size={32} />
|
||||
<span style={{ fontSize: 14, color: '#725d42', fontFamily: 'inherit' }}>
|
||||
{icon.label}
|
||||
</span>
|
||||
<span style={{
|
||||
marginLeft: 'auto',
|
||||
fontSize: 12,
|
||||
color: '#a0936e',
|
||||
fontFamily: "'SF Mono', 'Fira Code', Consolas, monospace",
|
||||
}}>
|
||||
{icon.name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { Icon } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 基础用法 */}
|
||||
<Icon name="icon-miles" size={32} />
|
||||
{/* 弹跳动画 */}
|
||||
<Icon name="icon-camera" size={48} bounce />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
<ApiTable rows={ICON_API} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default IconDemo;
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Loading as LoadingComponent, Button } from '../../../src';
|
||||
import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
|
||||
|
||||
const LoadingDemo: React.FC = () => {
|
||||
const [active, setActive] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Loading <span style={tagStyle}>加载动画</span>
|
||||
</div>
|
||||
<div style={labelStyle}>
|
||||
动森风格小岛 Loading 动画组件，带有漂浮的小岛、摇曳的树叶和游动的鱼。关闭时会从中间圆形透明扩散，露出底层内容。
|
||||
</div>
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<Button type={active ? 'default' : 'primary'} onClick={() => setActive(!active)}>
|
||||
{active ? '关闭 Loading' : '开启 Loading'}
|
||||
</Button>
|
||||
</div>
|
||||
<div style={{ ...demoBodyStyle, position: 'relative', height: 800, padding: 0, overflow: 'hidden' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
background: 'linear-gradient(135deg, #ffd6a5 0%, #fdffb6 25%, #caffbf 50%, #9bf6ff 75%, #a0c4ff 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: 28,
|
||||
fontWeight: 600,
|
||||
color: '#333',
|
||||
}}
|
||||
>
|
||||
底层内容 · Underlying Content
|
||||
</div>
|
||||
<LoadingComponent
|
||||
active={active}
|
||||
style={{ height: '100%', position: 'absolute', inset: 0 }}
|
||||
/>
|
||||
</div>
|
||||
<CodeBlock
|
||||
code={`import React, { useState } from 'react';
|
||||
import { Loading } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
const [active, setActive] = useState(true);
|
||||
return (
|
||||
<div style={{ position: 'relative', height: 800 }}>
|
||||
{/* 底层内容 */}
|
||||
<div style={{ position: 'absolute', inset: 0 }}>Underlying Content</div>
|
||||
{/* Loading 覆盖层，关闭时透明圆形扩散露出底层 */}
|
||||
<Loading
|
||||
active={active}
|
||||
style={{ position: 'absolute', inset: 0, height: '100%' }}
|
||||
/>
|
||||
<button onClick={() => setActive(!active)}>
|
||||
{active ? '关闭 Loading' : '开启 Loading'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};`}
|
||||
/>
|
||||
<ApiTable rows={LOADING_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LOADING_API: ApiRow[] = [
|
||||
{ prop: 'active', desc: '是否显示加载动画', type: 'boolean', defaultVal: 'true' },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||||
];
|
||||
|
||||
export default LoadingDemo;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Phone } from '../../../src';
|
||||
import {
|
||||
CodeBlock,
|
||||
ApiTable,
|
||||
ApiRow,
|
||||
sectionStyle,
|
||||
sectionTitleStyle,
|
||||
tagStyle,
|
||||
demoBodyStyle,
|
||||
labelStyle,
|
||||
} from '../../tools';
|
||||
|
||||
const PhoneDemo: React.FC = () => (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Phone <span style={tagStyle}>手机</span>
|
||||
</div>
|
||||
<div style={labelStyle}>
|
||||
Phone 组件 — 手机界面组件。
|
||||
</div>
|
||||
<div style={{ ...demoBodyStyle, transform: 'scale(0.6)', transformOrigin: 'top left', height: 473 }}>
|
||||
<Phone />
|
||||
</div>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { Phone } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 手机界面 */}
|
||||
<Phone />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
<ApiTable rows={PHONE_API} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const PHONE_API: ApiRow[] = [
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
];
|
||||
|
||||
export default PhoneDemo;
|
||||
@@ -0,0 +1,182 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Table, Button } from '../../../src';
|
||||
import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
|
||||
|
||||
const TableDemo: React.FC = () => {
|
||||
const [striped, setStriped] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '岛民',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
width: 80,
|
||||
align: 'center' as const,
|
||||
},
|
||||
{
|
||||
title: '岛屿',
|
||||
dataIndex: 'island',
|
||||
},
|
||||
{
|
||||
title: '喜欢的水果',
|
||||
dataIndex: 'fruit',
|
||||
},
|
||||
{
|
||||
title: '爱好',
|
||||
dataIndex: 'hobby',
|
||||
render: (value: unknown) => {
|
||||
const hobby = value as string;
|
||||
const tagStyles: Record<string, { bg: string; color: string }> = {
|
||||
'音乐': { bg: 'rgba(147, 112, 219, 0.15)', color: '#9370db' },
|
||||
'运动': { bg: 'rgba(255, 140, 0, 0.15)', color: '#ff8c00' },
|
||||
'唱歌': { bg: 'rgba(255, 99, 71, 0.15)', color: '#ff6347' },
|
||||
'钓鱼': { bg: 'rgba(30, 144, 255, 0.15)', color: '#1e90ff' },
|
||||
'画画': { bg: 'rgba(255, 105, 180, 0.15)', color: '#ff69b4' },
|
||||
};
|
||||
const style = tagStyles[hobby] || { bg: 'rgba(25, 200, 185, 0.15)', color: '#19c8b9' };
|
||||
return (
|
||||
<span style={{
|
||||
padding: '4px 12px',
|
||||
background: style.bg,
|
||||
borderRadius: 20,
|
||||
color: style.color,
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
}}>
|
||||
{hobby}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource = [
|
||||
{ key: '1', name: '豆狸', age: 26, island: '彩虹岛', fruit: '苹果', hobby: '音乐' },
|
||||
{ key: '2', name: '粒狸', age: 24, island: '彩虹岛', fruit: '橘子', hobby: '运动' },
|
||||
{ key: '3', name: '西施惠', age: 28, island: '好评岛', fruit: '樱桃', hobby: '唱歌' },
|
||||
{ key: '4', name: '喻哥', age: 30, island: '无人岛', fruit: '梨', hobby: '钓鱼' },
|
||||
{ key: '5', name: '小润', age: 22, island: '摸鱼岛', fruit: '桃子', hobby: '画画' },
|
||||
] as Record<string, unknown>[];
|
||||
|
||||
const handleLoading = () => {
|
||||
setLoading(true);
|
||||
setTimeout(() => setLoading(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Table <span style={tagStyle}>表格</span>
|
||||
</div>
|
||||
<div style={labelStyle}>
|
||||
数据表格组件，支持斑马纹、边框、加载状态等常用功能。
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<Button type={striped ? 'primary' : 'default'} onClick={() => setStriped(!striped)}>
|
||||
斑马纹 {striped ? '✓' : '✗'}
|
||||
</Button>
|
||||
<Button type="primary" onClick={handleLoading} disabled={loading}>
|
||||
{loading ? '加载中...' : '模拟加载'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ ...demoBodyStyle, padding: 0, overflow: 'hidden' }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={dataSource}
|
||||
striped={striped}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CodeBlock
|
||||
code={`import React, { useState } from 'react';
|
||||
import { Table } from 'animal-island-ui';
|
||||
|
||||
interface Person {
|
||||
key: string;
|
||||
name: string;
|
||||
age: number;
|
||||
island: string;
|
||||
fruit: string;
|
||||
hobby: string;
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '岛民',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '岛屿',
|
||||
dataIndex: 'island',
|
||||
},
|
||||
{
|
||||
title: '喜欢的水果',
|
||||
dataIndex: 'fruit',
|
||||
},
|
||||
{
|
||||
title: '爱好',
|
||||
dataIndex: 'hobby',
|
||||
render: (value) => (
|
||||
<span style={{
|
||||
padding: '4px 12px',
|
||||
background: 'rgba(25, 200, 185, 0.15)',
|
||||
borderRadius: 20,
|
||||
color: '#19c8b9',
|
||||
}}>
|
||||
{value}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ key: '1', name: '豆狸', age: 26, island: '彩虹岛', fruit: '苹果', hobby: '音乐' },
|
||||
{ key: '2', name: '粒狸', age: 24, island: '彩虹岛', fruit: '橘子', hobby: '运动' },
|
||||
{ key: '3', name: '西施惠', age: 28, island: '好评岛', fruit: '樱桃', hobby: '唱歌' },
|
||||
];
|
||||
|
||||
const App = () => {
|
||||
const [striped, setStriped] = useState(true);
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
striped={striped}
|
||||
/>
|
||||
);
|
||||
};`}
|
||||
/>
|
||||
<ApiTable rows={TABLE_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TABLE_API: ApiRow[] = [
|
||||
{ prop: 'columns', desc: '表格列配置', type: 'TableColumn[]', defaultVal: '[]' },
|
||||
{ prop: 'dataSource', desc: '表格数据源', type: 'T[]', defaultVal: '[]' },
|
||||
{ prop: 'rowKey', desc: '行唯一标识字段名或函数', type: 'string | (record) => string', defaultVal: 'key' },
|
||||
{ prop: 'striped', desc: '是否显示斑马纹', type: 'boolean', defaultVal: 'true' },
|
||||
{ prop: 'showHeader', desc: '是否显示表头', type: 'boolean', defaultVal: 'true' },
|
||||
{ prop: 'loading', desc: '加载状态', type: 'boolean', defaultVal: 'false' },
|
||||
{ prop: 'emptyText', desc: '空数据显示文本', type: 'ReactNode', defaultVal: '暂无数据' },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||||
];
|
||||
|
||||
export default TableDemo;
|
||||
@@ -0,0 +1,110 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs } from '../../../src';
|
||||
import type { TabItem } from '../../../src';
|
||||
import { labelStyle, ApiTable, CodeBlock, sectionStyle, sectionTitleStyle, tagStyle, demoBoxStyle } from '../../tools';
|
||||
|
||||
const TABS_API = [
|
||||
{ prop: 'items', desc: '标签页配置列表', type: 'TabItem[]', defaultVal: '-', required: true },
|
||||
{ prop: 'defaultActiveKey', desc: '默认激活的标签', type: 'string', defaultVal: '第一个标签' },
|
||||
{ prop: 'activeKey', desc: '受控模式当前激活标签', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'onChange', desc: '标签切换回调', type: '(key: string) => void', defaultVal: '-' },
|
||||
{ prop: 'shadow', desc: '是否显示选中状态阴影', type: 'boolean', defaultVal: 'true' },
|
||||
{ prop: 'leafAnimation', desc: '是否启用叶子动画', type: 'boolean', defaultVal: 'true' },
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
{ prop: 'style', desc: '自定义样式', type: 'CSSProperties', defaultVal: '-' },
|
||||
];
|
||||
|
||||
const TabsDemo: React.FC = () => {
|
||||
const [activeKey, setActiveKey] = useState('tab1');
|
||||
const items: TabItem[] = [
|
||||
{
|
||||
key: 'tab1',
|
||||
label: '岛屿概况',
|
||||
children: (
|
||||
<div>
|
||||
<p style={{ marginBottom: 12 }}>这里是一座无人岛，环境优美，气候宜人。</p>
|
||||
<p>可以钓鱼、捉虫、种植各种植物。</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
label: '商店',
|
||||
children: (
|
||||
<div>
|
||||
<p style={{ marginBottom: 12 }}>狸然超市营业中！</p>
|
||||
<p>各种商品应有尽有，价格实惠。</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'tab3',
|
||||
label: '服务台',
|
||||
children: (
|
||||
<div>
|
||||
<p style={{ marginBottom: 12 }}>欢迎来到服务台！</p>
|
||||
<p>可以办理各种服务业务。</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>Tab <span style={tagStyle}>基础用法</span></div>
|
||||
<div style={labelStyle}>shadow 阴影控制</div>
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={[{ key: 'a', label: '鱼类', children: <p>鲈鱼、鲷鱼...</p> }, { key: 'b', label: '昆虫', children: <p>蝴蝶、瓢虫...</p> }]} defaultActiveKey="a" />
|
||||
</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={[{ key: 'a', label: '鱼类', children: <p>鲈鱼、鲷鱼...</p> }, { key: 'b', label: '昆虫', children: <p>蝴蝶、瓢虫...</p> }]} defaultActiveKey="a" shadow={false} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={labelStyle}>非受控模式</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={[{ key: 'a', label: '鱼类', children: <p>鲈鱼、鲷鱼、河童...</p> }, { key: 'b', label: '昆虫', children: <p>蝴蝶、瓢虫、蜻蜓...</p> }, { key: 'c', label: '海洋生物', children: <p>海星、珊瑚、小丑鱼...</p> }]} defaultActiveKey="a" />
|
||||
</div>
|
||||
<div style={labelStyle}>受控模式</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={items} activeKey={activeKey} onChange={setActiveKey} />
|
||||
</div>
|
||||
<div style={{ marginTop: 16, fontSize: 13, color: '#a08060' }}>当前选中: <span style={{ color: '#19c8b9', fontWeight: 600 }}>{items.find(i => i.key === activeKey)?.label}</span></div>
|
||||
<div style={labelStyle}>leafAnimation 叶子动画控制</div>
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={[{ key: 'a', label: '鱼类', children: <p>鲈鱼、鲷鱼...</p> }, { key: 'b', label: '昆虫', children: <p>蝴蝶、瓢虫...</p> }]} defaultActiveKey="a" leafAnimation={true} />
|
||||
<div style={{ fontSize: 12, color: '#a0936e', marginTop: 8 }}>leafAnimation=true (默认)</div>
|
||||
</div>
|
||||
<div style={demoBoxStyle}>
|
||||
<Tabs items={[{ key: 'a', label: '鱼类', children: <p>鲈鱼、鲷鱼...</p> }, { key: 'b', label: '昆虫', children: <p>蝴蝶、瓢虫...</p> }]} defaultActiveKey="a" leafAnimation={false} />
|
||||
<div style={{ fontSize: 12, color: '#a0936e', marginTop: 8 }}>leafAnimation=false</div>
|
||||
</div>
|
||||
</div>
|
||||
<CodeBlock code={`import React, { useState } from 'react';
|
||||
import { Tabs } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 非受控模式 */}
|
||||
<Tabs
|
||||
items={[
|
||||
{ key: 'tab1', label: '标签一', children: <p>内容一</p> },
|
||||
{ key: 'tab2', label: '标签二', children: <p>内容二</p> },
|
||||
]}
|
||||
defaultActiveKey="tab1"
|
||||
/>
|
||||
{/* 受控模式 */}
|
||||
<Tabs items={items} activeKey={activeKey} onChange={setActiveKey} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`} />
|
||||
<ApiTable rows={TABS_API} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TabsDemo;
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { Time as TimeComponent } from '../../../src';
|
||||
import { CodeBlock, ApiTable, ApiRow, sectionStyle, sectionTitleStyle, tagStyle, demoBodyStyle, labelStyle } from '../../tools';
|
||||
|
||||
const TimeDemo: React.FC = () => (
|
||||
<div style={sectionStyle}>
|
||||
<div style={sectionTitleStyle}>
|
||||
Time <span style={tagStyle}>时间</span>
|
||||
</div>
|
||||
<div style={labelStyle}>
|
||||
Time 组件 — 动森经典 HUD 风格的时间显示组件，实时更新时间，支持星期、日期和时间显示。
|
||||
</div>
|
||||
<div style={demoBodyStyle}>
|
||||
<TimeComponent />
|
||||
</div>
|
||||
<CodeBlock
|
||||
code={`import React from 'react';
|
||||
import { Time } from 'animal-island-ui';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
{/* 时间显示 */}
|
||||
<Time />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;`}
|
||||
/>
|
||||
<ApiTable rows={TIME_API} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const TIME_API: ApiRow[] = [
|
||||
{ prop: 'className', desc: '自定义类名', type: 'string', defaultVal: '-' },
|
||||
];
|
||||
|
||||
export default TimeDemo;
|
||||
Reference in New Issue
Block a user