121 lines
3.8 KiB
TypeScript
121 lines
3.8 KiB
TypeScript
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;
|