npm i --save @kne/antd-taro
antd-taro 是一个参考 antd-mobile api和组件设计样式实现的用于Taro框架进行微信小程序的开发的组件库。
注意事项：
-
antd-taro并不是antd-mobile的官方迁移，是我们参考antd-mobile源代码去除Taro微信小程序无法兼容部分和部分使用频率较低的组件
-
antd-taro的API和antd-mobile有很多差异，所以使用时请参考我们提供的API文档
-
antd-taro目前只测试了在微信小程序下以react模式进行开发，其他类似支付宝小程序等尚未进行测试，具体表现未知
- @kne/mini-core 是依赖antd-taro的更加上层的实现，提供了微信小程序开发的整套开发流程，组件规范和更大粒度的复杂组件实现，可以搭配一起进行使用
- Avatar 头像
- Avatar 头像
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Avatar, Space} = antdTaro;
const {View, Text} = taroComponent;
const demoAvatarImages = [
'https://github.githubassets.com/assets/app-icon-512-7f9c4ff2e960.png',
'https://avatars.githubusercontent.com/u/37367461?v=4',
];
const BaseExample = ()=>{
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Space>
<Avatar src={demoAvatarImages[0]} />
<Avatar src={demoAvatarImages[1]} />
</Space>
</Space>
<Space direction={'vertical'}>
<View>占位头像</View>
<Avatar />
<Text style={{color: '#666', fontSize: '14px'}}>如果你不传图片，或者不传性别，或者图片加载失败，那么会显示一个默认的图像</Text>
</Space>
<Space direction={'vertical'}>
<View>性别默认头像</View>
<Space>
<Avatar gender={'F'} />
<Avatar gender={'f'} />
<Avatar gender={'female'} />
</Space>
<Space>
<Avatar gender={'M'} />
<Avatar gender={'m'} />
<Avatar gender={'male'} />
</Space>
</Space>
<Space direction={'vertical'}>
<View>自定义尺寸</View>
<Space>
<Avatar gender={'F'} />
<Avatar gender={'f'} size={64} />
<Avatar gender={'female'} size={80} />
</Space>
</Space>
<Space direction={'vertical'}>
<View>自定义圆角</View>
<Space>
<Avatar src={demoAvatarImages[0]} style={{'--border-radius': '10%'}} />
<Avatar src={demoAvatarImages[1]} style={{'--border-radius': '12px'}} />
</Space>
</Space>
</Space>
);
};
render(<BaseExample />);
- Badge 徽标
- Badge 徽标
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Badge, Space} = antdTaro;
const {View} = taroComponent;
const style = `
{
display: block;
background: #666666;
width: 40px;
height: 40px;
border-radius: 8px;
}
`;
const BaseExample = ()=>{
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Space>
<Badge content={1}>Badge</Badge>
<Badge content={'新'}><View style={style}/></Badge>
<Badge content={Badge.dot}><View style={style}/></Badge>
</Space>
</Space>
<Space direction={'vertical'}>
<View>带边框</View>
<Badge content={'更新啦'} bordered><View style={style}/></Badge>
</Space>
<Space direction={'vertical'}>
<View>独立使用</View>
<Space>
<Badge content='99+' />
<Badge content='新消息!' />
</Space>
</Space>
<Space direction={'vertical'}>
<View>自定义颜色</View>
<Space>
<Badge color='#108ee9' content={Badge.dot}><View style={style}/></Badge>
<Badge color='#87d068' content={Badge.dot}><View style={style}/></Badge>
<Badge content={Badge.dot}><View style={style}/></Badge>
<Badge color='orange' content={Badge.dot}><View style={style}/></Badge>
</Space>
</Space>
</Space>
);
};
render(<BaseExample />);
- Button 按钮
- Button 按钮
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Button, Space, DotLoading, Icon} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<Space direction={'vertical'}>
<View>按钮尺寸</View>
<Space>
<Button size={'small'}>small</Button>
<Button size={'middle'}>default middle</Button>
<Button size={'large'}>large</Button>
</Space>
<View>填充模式</View>
<Space>
<Button fill={'solid'}>default</Button>
<Button fill={'outline'}>outline</Button>
<Button fill={'none'}>none</Button>
</Space>
<View>加载状态</View>
<Space>
<Button loading loadingIcon={<DotLoading />}/>
<Button loading loadingText={'loadingText'}>loading</Button>
<Button loading loadingIcon={<Icon className={"adm-component"} type="clockCircleFill"/>}>loading</Button>
</Space>
<View>禁用状态</View>
<Space>
<Button disabled>disabled</Button>
</Space>
<View>形状</View>
<Space>
<Button shape={'rounded'}>rounded</Button>
<Button shape={'rectangular'}>rectangular</Button>
</Space>
<View>语义按钮</View>
<Space>
<Button color={'primary'}>primary</Button>
<Button color={'success'}>success</Button>
<Button color={'danger'}>danger</Button>
<Button color={'warning'}>warning</Button>
</Space>
</Space>
);
};
render(<BaseExample />);
- Card 卡片
- Card 卡片
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {Card, Space, Icon, Button} = antdTaro;
const {View} = taroComponent;
const {showToast} = tarojsTaro;
const styles = {
content: {
height: '50px'
},
footer: {
paddingTop: '11px',
borderTop: '1px solid #e5e5e5',
display: 'flex',
justifyContent: 'flex-end'
},
customBody: {
color: '#00b578'
},
};
const BaseExample = () => {
const onClick = () => {
showToast({title: '点击了卡片', icon: 'none'});
};
const onHeaderClick = () => {
showToast({title: '点击了卡片Header区域', icon: 'none'});
};
const onBodyClick = () => {
showToast({title: '点击了卡片Body区域', icon: 'none'});
};
return (
<Space direction={'vertical'} size={30} style={{backgroundColor: '#ddd', padding: '20px', boxSizing: 'border-box'}}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Card title="我是title">我是Card内容</Card>
</Space>
<Space direction={'vertical'}>
<View>没有卡片标题</View>
<Card>我是Card内容</Card>
</Space>
<Space direction={'vertical'}>
<View>自定义卡片样式</View>
<Card
headerStyle={{color: '#1677ff'}}
title='卡片标题'
>
<View style={styles.customBody}>我是Card内容</View>
</Card>
</Space>
<Space direction={'vertical'}>
<View>自定义卡片内容</View>
<Card
title={<View><Icon className={"adm-component"} type="informationCircleFill"/>卡片标题</View>}
extra={<Icon className={"adm-component"} type="right-outline"/>}
onBodyClick={onBodyClick}
onHeaderClick={onHeaderClick}
>
<View style={styles.content}>我是Card内容</View>
<View style={styles.footer} onClick={e => e.stopPropagation()}>
<Button
color='primary'
onClick={() => {
showToast({title: '点击了底部按钮', icon: 'none'});
}}
>
底部按钮
</Button>
</View>
</Card>
</Space>
</Space>
);
};
render(<BaseExample/>);
- CheckList 可勾选列表
- CheckList 可勾选列表
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View} = taroComponent;
const {CheckList, Space, Icon} = antdTaro;
const options = [
{label: 'A', value: 'A'},
{label: 'B', value: 'B'},
{label: 'C', value: 'C', disabled: true},
{label: 'D', value: 'D', readOnly: true},
{label: 'E', value: 'E'},
];
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<CheckList options={options} />
</Space>
<Space direction={'vertical'}>
<View>多选</View>
<CheckList multiple options={options.slice(0, 2)} />
</Space>
<Space direction={'vertical'}>
<View>自定义选中图标</View>
<CheckList options={options} defaultValue={['B']} activeIcon={<Icon className={"adm-component"} type="checkCircleFill"/>}/>
</Space>
<Space direction={'vertical'}>
<View>整组只读</View>
<CheckList options={options.slice(0, 2)} defaultValue={['B']} readOnly/>
</Space>
<Space direction={'vertical'}>
<View>整组禁用</View>
<CheckList options={options.slice(0, 2)} defaultValue={['B']} disabled/>
</Space>
</Space>;
};
render(<BaseExample/>);
- Collapse 折叠面板
- Collapse 折叠面板
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Collapse, Space, Icon} = antdTaro;
const {View} = taroComponent;
const items = [{
key: '1', title: '第一项', children: '第一项第一项第一项第一项第一项第一项第一项第一项'
}, {
key: '2', title: '第二项', children: '第二项第二项第二项第二项第二项第二项第二项第二项'
}, {
key: '3', title: '第三项', children: '第三项第三项第三项第三项第三项第三项第三项第三项第三项'
}];
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Collapse defaultActiveKey={['1']} items={items}/>
</Space>
<Space direction={'vertical'}>
<View>手风琴模式</View>
<Collapse accordion items={items}/>
</Space>
<Space direction={'vertical'}>
<View>禁用</View>
<Collapse accordion items={items.slice(0, 2).concat([Object.assign({}, items[2], {disabled: true})])}/>
</Space>
<Space direction={'vertical'}>
<View>自定义折叠图标</View>
<Collapse
arrow={active => <Icon type={active ? "checkCircleFill" : 'closeCircleFill'} className="adm-component"/>}
items={[
items[0],
Object.assign({}, items[1], {arrow: <Icon type='exclamationCircleFill' className="adm-component"/>}),
Object.assign({}, items[2], {
arrow: active => <Icon type={active ? "informationCircleFill" : 'clockCircleFill'}
className="adm-component"/>
}),
]}
/>
</Space>
</Space>;
};
render(<BaseExample/>);
- DatePicker 日期选择器
- DatePicker 日期选择器
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {Button, View} = taroComponent;
const {useState} = React;
const {DatePicker, Space} = antdTaro;
const {showToast} = tarojsTaro;
const BaseExample = () => {
const [open, setOpen] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
const [open4, setOpen4] = useState(false);
const [value, setValue] = useState('');
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Button onClick={() => {
setOpen(true);
}}>打开</Button>
<DatePicker
title='时间选择'
open={open}
onOpenChange={setOpen}
onChange={val => {
showToast({icon: 'none', title: val.toDateString()})
}}
/>
</Space>
<Space direction={'vertical'}>
<View>渲染所选值</View>
<Space>
<Button onClick={() => {
setOpen2(true);
}}>打开</Button>
<View>{value}</View>
</Space>
<DatePicker
open={open2}
onOpenChange={setOpen2}
onChange={val => setValue(val.toDateString())}
/>
</Space>
<Space direction={'vertical'}>
<View>控制选择精度</View>
<Button onClick={() => {
setOpen3(true);
}}>年-月</Button>
<DatePicker
title='时间选择'
open={open3}
onOpenChange={setOpen3}
precision='month'
onChange={val => {
showToast({icon: 'none', title: val.toDateString()})
}}
/>
<Button onClick={() => {
setOpen4(true);
}}>年-月-日-时-分</Button>
<DatePicker
title='时间选择'
open={open4}
onOpenChange={setOpen4}
precision='minute'
onChange={val => {
showToast({icon: 'none', title: val.toDateString()})
}}
/>
</Space>
</Space>;
};
render(<BaseExample/>);
- DateRangePicker 日期范围选择器
- DateRangePicker 日期范围选择器
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {Button, View} = taroComponent;
const {useState} = React;
const {DateRangePicker, Space} = antdTaro;
const {showToast} = tarojsTaro;
const BaseExample = () => {
const [open, setOpen] = useState(false);
const [open2, setOpen2] = useState(false);
const [open3, setOpen3] = useState(false);
const [open4, setOpen4] = useState(false);
const [value, setValue] = useState([]);
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Button onClick={() => {
setOpen(true);
}}>打开</Button>
<DateRangePicker
title='时间选择'
open={open}
onOpenChange={setOpen}
onChange={val => {
showToast({icon: 'none', title: val?.map(item => item.toDateString())?.join(' ~ ')})
}}
/>
</Space>
<Space direction={'vertical'}>
<View>渲染所选值</View>
<Space>
<Button onClick={() => {
setOpen2(true);
}}>打开</Button>
<View>{(value || [])?.map(item => item.toLocaleDateString())?.join(' ~ ')}</View>
</Space>
<DateRangePicker
open={open2}
onOpenChange={setOpen2}
onChange={val => setValue(val)}
/>
</Space>
<Space direction={'vertical'}>
<View>控制选择精度</View>
<Button onClick={() => {
setOpen3(true);
}}>年-月</Button>
<DateRangePicker
title='时间选择'
open={open3}
onOpenChange={setOpen3}
precision='month'
onChange={val => {
showToast({icon: 'none', title: val?.map(item => item.toLocaleDateString())?.join(' ~ ')})
}}
/>
<Button onClick={() => {
setOpen4(true);
}}>年-月-日-时-分</Button>
<DateRangePicker
title='时间选择'
open={open4}
onOpenChange={setOpen4}
precision='minute'
onChange={val => {
showToast({icon: 'none', title: val?.map(item => item.toTimeString())?.join(' ~ ')})
}}
/>
</Space>
</Space>;
};
render(<BaseExample/>);
- Divider 分隔线
- Divider 分隔线
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Divider, Space} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础分割线</View>
<Divider />
</Space>
<Space direction={'vertical'}>
<View>带内容的分割线</View>
<Divider>内容在中间</Divider>
<Divider contentPosition='left'>左侧内容</Divider>
<Divider contentPosition='right'>右侧内容</Divider>
</Space>
<Space direction={'vertical'}>
<View>竖向分割线1</View>
<Space>
<View>Text1</View>
<Divider direction={'vertical'} />
<View>Text2</View>
<Divider direction={'vertical'} />
<View>Text3</View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>自定义样式</View>
<Divider
style={{
color: '#1677ff',
borderColor: '#1677ff',
borderStyle: 'dashed',
}}
>
自定义样式
</Divider>
</Space>
</Space>
);
};
render(<BaseExample />);
- DotLoading 点状加载图标
- DotLoading 点状加载图标
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {DotLoading, Space, Button} = antdTaro;
const {View} = taroComponent;
const BaseExample = () => {
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>默认颜色 Loading</View>
<DotLoading/>
<View>主题色 Loading</View>
<DotLoading color='primary'/>
<View>白色 Loading</View>
<View style={{backgroundColor: '#ddd'}}>
<DotLoading color='white'/>
</View>
</Space>
<Space direction={'vertical'}>
<View>自定义颜色 Loading</View>
<Space>
<DotLoading color='#155ACF'/>
<DotLoading color='#00b578'/>
<DotLoading color='#ff8f1f'/>
<DotLoading color='#ff3141'/>
</Space>
</Space>
<Space direction={'vertical'}>
<View>自动适配字号</View>
<Space>
<View style={{fontSize: 14}}><DotLoading/></View>
<View style={{fontSize: 18}}><DotLoading/></View>
<View style={{fontSize: 24}}><DotLoading/></View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>在 Button 中使用</View>
<Space>
<Button><DotLoading color='#ff3141'/></Button>
<Button color={'primary'}><DotLoading /></Button>
</Space>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Dropdown 下拉菜单
- Dropdown 下拉菜单
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Dropdown, Space, Icon} = antdTaro;
const {View} = taroComponent;
const items = [
{key: 'apple', title: 'apple', children: 'apple'},
{key: 'banana', title: 'banana', children: 'banana'},
{key: 'orange', title: 'orange', children: 'orange'}
];
const BaseExample = () => {
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>一列</View>
<Dropdown items={items.slice(0, 1)}/>
</Space>
<Space direction={'vertical'}>
<View>两列</View>
<Dropdown items={items.slice(0, 2)}/>
</Space>
<Space direction={'vertical'} closeOnMaskClick={false}>
<View>三列</View>
<Dropdown items={items}/>
</Space>
<Space direction={'vertical'} closeOnMaskClick={false}>
<View>自定义箭头</View>
<Dropdown
arrow={<Icon className={"adm-component"} type="check-mark"/>}
items={[...items.slice(0, 2), Object.assign({}, items[2], {arrow: <Icon className={"adm-component"} type="checkCircleFill"/>})]}
/>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Ellipsis 文本省略
- Ellipsis 文本省略
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View, Text} = taroComponent;
const {Ellipsis, Space} = antdTaro;
const content = 'antd-taro 是一个基于@tarojs/components的高级组件库，它提供基础的UI交互组件，它旨在解决小程序应用中的复杂场景问题。Ellipsis是一个文本省略组件，展示空间不足时，隐去部分内容并用“...”替代。当文本内容长度或高度超过列宽或行高、图表中空间有限、文本内容无法完全显示、自适应调整时宽度变小时就可以考虑使用该组件。'
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<Text>单行省略</Text>
<Ellipsis content={content} />
</Space>
<Space direction={'vertical'}>
<Text>展开收起文本</Text>
<Ellipsis expandText='展开文本' collapseText='收起文本' content={content} />
</Space>
<Space direction={'vertical'}>
<Text>取消展开收起</Text>
<Ellipsis showAction={false} content={content} />
</Space>
<Space direction={'vertical'}>
<Text>默认展开</Text>
<Ellipsis defaultExpanded content={content} />
</Space>
</Space>;
};
render(<BaseExample/>);
- Empty 空状态
- Empty 空状态
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Empty, Space, Icon} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Empty />
</Space>
<Space direction={'vertical'}>
<View>描述文字</View>
<Empty description={'空状态'} />
</Space>
<Space direction={'vertical'}>
<View>自定义样式</View>
<Empty description={'暂无数据'} imageStyle={{ width: 128 }} />
</Space>
<Space direction={'vertical'}>
<View>自定义图片</View>
<Empty description={'暂无数据'} image={<Icon className={"adm-component"} type="check-mark" size={'64px'} color={'#ff6700'} />}/>
</Space>
</Space>
);
};
render(<BaseExample />);
- Grid 栅格
- Grid 栅格
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Grid, Space} = antdTaro;
const {View} = taroComponent;
const style = `{
background: #EEE;
text-align: center;
color: #999999;
height: 100%;
padding: 10px;
box-sizing: border-box;
border: solid 2px #999;
}`;
const BaseExample = ()=>{
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Grid gap={[10, 20]}>
<Grid.Item span={12}>
<View style={style}>A</View>
</Grid.Item>
<Grid.Item span={12}>
<View style={style}>B</View>
</Grid.Item>
<Grid.Item span={8}>
<View style={style}>C</View>
</Grid.Item>
<Grid.Item span={8}>
<View style={style}>D</View>
</Grid.Item>
<Grid.Item span={8}>
<View style={style}>E</View>
</Grid.Item>
</Grid>
</Space>
<Space direction={'vertical'}>
<View>控制格子的跨度</View>
<Grid gap={[10, 20]}>
<Grid.Item span={8}>
<View style={style}>A</View>
</Grid.Item>
<Grid.Item span={16}>
<View style={style}>B</View>
</Grid.Item>
<Grid.Item span={16}>
<View style={style}>C</View>
</Grid.Item>
<Grid.Item span={8}>
<View style={style}>D</View>
</Grid.Item>
<Grid.Item span={24}>
<View style={style}>E</View>
</Grid.Item>
</Grid>
</Space>
</Space>
);
};
render(<BaseExample />);
- Icon 图标
- Icon 图标
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Icon, Space} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<Space direction={'vertical'}>
<Space direction = {'vertical'}>
<View>基础用法</View>
<Space>
<Icon type={'clockCircleFill'} className="adm-component" />
<Icon type={'informationCircleFill'} className="adm-component" />
<Icon type={'checkCircleFill'} className="adm-component" />
</Space>
</Space>
<Space direction = {'vertical'}>
<View>自定义尺寸</View>
<Space>
<Icon type={'clockCircleFill'} className="adm-component" size={'24px'} />
<Icon type={'informationCircleFill'} className="adm-component" size={'32px'} />
<Icon type={'checkCircleFill'} className="adm-component" size={'40px'} />
</Space>
</Space>
<Space direction = {'vertical'}>
<View>自定义颜色</View>
<Space>
<Icon type={'clockCircleFill'} className="adm-component" color={'#2db7f5'} />
<Icon type={'informationCircleFill'} className="adm-component" color={'#87d068'} />
<Icon type={'checkCircleFill'} className="adm-component" color={'#ff6430'} />
</Space>
</Space>
</Space>
);
};
render(<BaseExample />);
- Input 输入框
- Input 输入框
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Input, Space, Button} = antdTaro;
const {View, Text} = taroComponent;
const {useState} = React;
const BaseExample = () => {
const [value, setValue] = useState('');
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<Text>可以自动聚焦的 input</Text>
<Input type='text' placeholder='将会获取焦点' focus/>
</Space>
<Space direction={'vertical'}>
<Text>受控状态，通过props.value赋值</Text>
<Input type='text' placeholder='属性赋值' value={value} onChange={setValue}/>
<Button onClick={() => {
setValue('value赋值');
}}>value赋值</Button>
</Space>
<Space direction={'vertical'}>
<Text>控制最大输入长度的 input</Text>
<Input type='text' placeholder='最大输入长度为 10' maxLength={10}/>
</Space>
<Space direction={'vertical'}>
<Text>数字输入的 input</Text>
<Input type='number' placeholder='这是一个数字输入框'/>
</Space>
<Space direction={'vertical'}>
<Text>密码输入的 input</Text>
<Input type='password' password placeholder='这是一个密码输入框'/>
</Space>
<Space direction={'vertical'}>
<Text>带小数点的 input</Text>
<Input type='digit' placeholder='带小数点的数字键盘'/>
</Space>
<Space direction={'vertical'}>
<Text>身份证输入的 input</Text>
<Input type='idcard' placeholder='身份证输入键盘'/>
</Space>
<Space direction={'vertical'}>
<Text>控制占位符颜色的 input</Text>
<Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
</Space>
</Space>;
};
render(<BaseExample/>);
- InputNumber 数字输入框
- InputNumber 数字输入框
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {InputNumber, Space, Button} = antdTaro;
const {Text} = taroComponent;
const {useState} = React;
const BaseExample = () => {
const [value, setValue] = useState(0);
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<Text>非受控状态数字输入</Text>
<InputNumber placeholder='数字输入'/>
</Space>
<Space direction={'vertical'}>
<Text>受控状态数字输入并赋值</Text>
<InputNumber placeholder='数字输入' value={value} onChange={setValue}/>
<Button onClick={() => {
setValue(100);
}}>value赋值</Button>
</Space>
<Space direction={'vertical'}>
<Text>隐藏控制按钮</Text>
<InputNumber placeholder='数字输入' hiddenController/>
</Space>
<Space direction={'vertical'}>
<Text>设置最大值为5和最小值为2</Text>
<InputNumber placeholder='数字输入' min={2} max={5}/>
</Space>
<Space direction={'vertical'}>
<Text>带有小数点的数字键盘</Text>
<InputNumber placeholder='数字输入' type="digit"/>
</Space>
<Space direction={'vertical'}>
<Text>step间隔</Text>
<InputNumber placeholder='数字输入' type="digit" step={0.1}/>
</Space>
</Space>;
};
render(<BaseExample/>);
- List 列表
- List 列表
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {List,Switch,Icon} = antdTaro;
const {View} = taroComponent;
const BaseExample = () => {
return <View style={{ background: '#eee' }}>
<List header='基础用法'>
<List.Item>1</List.Item>
<List.Item>2</List.Item>
<List.Item>3</List.Item>
</List>
<List header='可点击列表'>
<List.Item prefix={<Icon className={"adm-component"} type="informationCircleFill"/>} onClick={() => {
}}>
账单
</List.Item>
<List.Item prefix={<Icon className={"adm-component"} type="informationCircleFill"/>} onClick={() => {
}}>
总资产
</List.Item>
<List.Item prefix={<Icon className={"adm-component"} type="informationCircleFill"/>} onClick={() => {
}}>
设置
</List.Item>
</List>
<List header='复杂列表' mode="card">
<List.Item extra={<Switch defaultChecked/>}>新消息通知</List.Item>
<List.Item extra='未开启' clickable>
大字号模式
</List.Item>
<List.Item description='管理已授权的产品和设备' clickable>
授权管理
</List.Item>
<List.Item title='副标题信息A' description='副标题信息B' clickable>
这里是主信息
</List.Item>
</List>
<List header='禁用状态'>
<List.Item disabled clickable prefix={<Icon className={"adm-component"} type="informationCircleFill"/>}>
账单
</List.Item>
<List.Item disabled prefix={<Icon className={"adm-component"} type="informationCircleFill"/>}>
总资产
</List.Item>
</List>
</View>;
};
render(<BaseExample/>);
- Navbar 导航栏
- Navbar 导航栏
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {NavBar, Space} = antdTaro;
const {View} = taroComponent;
const {showToast} = tarojsTaro;
const BaseExample = () => {
const back = () => showToast({
title: '点击了返回区域',
duration: 1000,
icon: 'none'
})
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<NavBar onBack={back}>标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>不展示返回按钮</View>
<NavBar backArrow={false}>标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>返回按钮显示文字</View>
<NavBar onBack={back} back='返回'>标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>自定义左侧区域</View>
<NavBar onBack={back} back='返回' left={'关闭'}>标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>自定义右侧区域</View>
<NavBar onBack={back} back='返回' left={'关闭'} right={'关闭'}>标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>标题超长</View>
<NavBar onBack={back}>一条长长长长长长长长长长长长长长的标题</NavBar>
</Space>
<Space direction={'vertical'}>
<View>显示副标题</View>
<NavBar onBack={back}>
<View>
<View>标题</View>
<View style={{fontSize: '12px'}}>副标题</View>
</View>
</NavBar>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Picker 选择器
- Picker 选择器
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Button, View} = taroComponent;
const {useState} = React;
const {Space, Picker} = antdTaro;
const basicColumns = [
[
{ label: '周一', value: 'Mon' },
{ label: '周二', value: 'Tues' },
{ label: '周三', value: 'Wed' },
{ label: '周四', value: 'Thur' },
{ label: '周五', value: 'Fri' },
],
[
{ label: '上午', value: 'am' },
{ label: '下午', value: 'pm' },
],
];
const BaseExample = () => {
const [open,setOpen] = useState(false);
const [open2,setOpen2] = useState(false);
const [value, setValue] = useState([]);
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Button onClick={()=>{
setOpen(true);
}}>打开</Button>
<Picker
open={open}
onOpenChange={setOpen}
columns={basicColumns}
/>
</Space>
<Space direction={'vertical'}>
<View>渲染所选值</View>
<Space>
<Button onClick={()=>{
setOpen2(true);
}}>打开</Button>
<View>{value ? value.join(',') : '未选择'}</View>
</Space>
<Picker
open={open2}
onOpenChange={setOpen2}
onChange={setValue}
columns={basicColumns}
value={value}
/>
</Space>
</Space>;
};
render(<BaseExample/>);
- Popup 弹出菜单
- Popup 弹出菜单
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Popup, Button, Space} = antdTaro;
const {useState} = React;
const {Text} = taroComponent;
const BaseExample = () => {
const [open, setOpen] = useState('');
const [open2, setOpen2] = useState('');
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<Text>基础用法</Text>
<Space wrap>
{['center', 'top', 'bottom', 'left', 'right'].map((position) => {
return <>
<Button onClick={() => {
setOpen(position);
}}>从{position}打开</Button>
<Popup open={open === position} onOpenChange={(open) => {
if (open) {
setOpen(position);
} else {
setOpen('');
}
}} position={position}>
popup窗口{position}
</Popup>
</>
})}
</Space>
</Space>
<Space direction={'vertical'}>
<Text>显示关闭按钮</Text>
<Button onClick={() => {
setOpen2('bottom');
}}>从底部打开</Button>
<Popup showCloseButton open={open2 === 'bottom'} onOpenChange={(open) => {
if (open) {
setOpen2('bottom');
} else {
setOpen2('');
}
}} position={'bottom'}>
popup窗口
</Popup>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Result 结果
- Result 结果
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Result, Space} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<Space direction={'vertical'}>
<Space wrap direction={'vertical'}>
<View>Status</View>
<Result status={'success'} description={'success'}/>
<Result status={'error'} description={'error'}/>
<Result status={'info'} description={'info'}/>
<Result status={'waiting'} description={'waiting'}/>
<Result status={'warning'} description={'warning'}/>
</Space>
<Space wrap direction={'vertical'}>
<View>Title</View>
<Result status={'success'} description={'success'} title={'success'}/>
<Result status={'error'} description={'error'} title={'error'}/>
<Result status={'info'} description={'info'} title={'info'}/>
<Result status={'waiting'} description={'waiting'} title={'waiting'}/>
<Result status={'warning'} description={'warning'} title={'warning'}/>
</Space>
</Space>
);
};
render(<BaseExample />);
- SafeArea 安全区
- SafeArea 安全区
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {SafeArea, Space} = antdTaro;
const {View} = taroComponent;
const BaseExample = ()=>{
return (
<View>
<View style={{background: '#eee'}}><SafeArea position={'top'}/></View>
<View>Aliqua consectetur enim commodo labore Lorem in cillum fugiat amet fugiat nulla laboris nulla. Exercitation mollit do culpa deserunt. Culpa ad dolor culpa sunt adipisicing magna nostrud pariatur aliqua et est ullamco. Enim voluptate ea cillum minim et commodo qui officia. Nisi labore laborum consectetur culpa ut. Esse dolor culpa officia elit nisi amet eiusmod sunt ipsum. Ut ex Lorem consectetur cupidatat duis do. Ad officia duis laborum enim veniam fugiat elit eu cillum anim reprehenderit. Ex quis est amet cupidatat laboris nisi nisi veniam ea voluptate culpa. Do nisi fugiat laboris. Dolore ut laborum sint exercitation eiusmod consectetur anim. Esse reprehenderit ex aute tempor eiusmod do proident minim cillum incididunt. Est aliquip aute non id tempor aliqua. Culpa labore id elit velit qui minim reprehenderit. Voluptate esse aliquip ullamco fugiat occaecat Lorem non pariatur cupidatat ullamco esse ex. Quis exercitation enim aliquip proident magna occaecat sint quis. Fugiat pariatur ad nisi eiusmod culpa dolor. Enim in aliquip magna anim duis adipisicing duis quis fugiat ad nulla. Ullamco eu reprehenderit exercitation eu aliqua aliquip. Cupidatat consectetur cupidatat dolore eiusmod do tempor sint in deserunt velit amet id excepteur pariatur. Irure nostrud labore cupidatat consectetur cupidatat qui non ullamco cupidatat cillum. Labore Lorem proident fugiat occaecat laborum sint sint in pariatur sit irure. Velit aliquip occaecat magna id aliqua laboris adipisicing amet eiusmod do sint consectetur culpa culpa. Culpa nostrud ad occaecat consequat. Mollit irure voluptate in reprehenderit Lorem duis nisi velit duis. Sunt veniam et cupidatat tempor laborum sint deserunt eiusmod cillum commodo cupidatat Lorem sit ut. Qui dolor ea do aliquip dolore esse culpa minim velit qui nulla nisi est. Dolor Lorem eiusmod aliquip fugiat aliqua sint irure qui esse aliquip in ut ad. Ipsum ullamco culpa non incididunt Lorem labore occaecat. Nostrud enim ipsum sit. Ipsum quis occaecat consequat amet incididunt amet veniam ea dolor ullamco reprehenderit est quis nisi reprehenderit. Ipsum occaecat mollit voluptate sint est culpa elit magna dolor id occaecat veniam eiusmod ad proident. Sit adipisicing elit est culpa laborum magna nostrud aliqua laboris sint eiusmod elit nulla. Voluptate fugiat dolore dolore pariatur ut. Eiusmod cillum duis deserunt culpa eiusmod aliqua amet Lorem esse amet est est. Do fugiat pariatur eiusmod labore. Sint anim dolore amet aliquip enim labore commodo veniam esse consectetur culpa mollit proident et velit. Eiusmod ut duis eiusmod aliqua dolore exercitation elit voluptate ipsum voluptate incididunt consectetur adipisicing. Ad id et mollit aliqua elit elit ut in tempor consectetur dolore pariatur velit reprehenderit duis. Nulla occaecat velit aliquip in. Incididunt eiusmod minim ea fugiat esse fugiat fugiat enim amet. Incididunt ipsum in labore esse aliqua exercitation ex elit id ullamco. Laborum ipsum sint mollit aliqua incididunt labore cillum anim et exercitation ullamco Lorem mollit. Sit enim enim consequat sit id elit non. Dolor mollit nisi qui elit minim minim velit ex incididunt elit ullamco et dolore dolor. Aliqua magna non id minim mollit est et irure duis aliqua. Ut sint amet et sint. Aliqua reprehenderit duis sit labore. Nostrud eu velit aute et qui. Quis sit ullamco deserunt excepteur. Eiusmod est Lorem quis incididunt aute ipsum elit ea sit culpa velit quis ullamco aliqua. Laboris aute sit quis non. Exercitation ullamco elit et minim. Excepteur veniam incididunt ex nisi ex sint non. Quis sit aute aliqua sunt in voluptate sint velit sit laboris ipsum. Commodo labore dolor fugiat ex. Do officia cillum adipisicing velit commodo minim cupidatat cillum dolor exercitation magna consequat sunt commodo aute. Veniam non reprehenderit enim est amet laborum nisi duis ut deserunt aute eu. Laboris mollit sit aliquip elit laboris mollit nisi eu voluptate minim cillum. Do incididunt reprehenderit nisi anim ad. Qui reprehenderit non laboris. Sint proident proident commodo laboris sit ullamco. Minim dolore sunt ut nostrud.</View>
<View style={{background: '#eee'}}><SafeArea position={'bottom'}/></View>
</View>
);
};
render(<BaseExample />);
- ScrollHeader 滚动标头
- ScrollHeader 滚动标头
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View,Text} = taroComponent;
const {ScrollHeader, Space, Icon} = antdTaro;
const {useId, useState} = React;
const ScrollHeaderComponent = (props) => {
const containerId = useId().replace(/:/g, '_');
const [activeKey, setActiveKey] = useState('0');
return (
<ScrollHeader className={`${containerId}-scroll-header-scroll-view`} {...props}>
{
({scrollTo}) => Array(10).fill('').map((_item, index) => (
<View
key={`index-${index}`}
id={`${containerId}_${index}`}
style={Object.assign({padding: '20px', textAlign: 'center', display: 'inline-block'}, index.toString() === activeKey ? {color: '#ff6700', border: '1px solid #ff6700'} : {})}
onClick={() => {
setActiveKey(index.toString());
scrollTo(`${containerId}_${index.toString()}`);
}}
>
View-{index}
</View>
))
}
</ScrollHeader>
);
};
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<Text>基础用法</Text>
<ScrollHeaderComponent />
</Space>
<Space direction={'vertical'}>
<Text>不展示更多按钮</Text>
<ScrollHeaderComponent showMore={false} />
</Space>
<Space direction={'vertical'}>
<Text>自定义更多按钮</Text>
<ScrollHeaderComponent showMore icon={<Icon className={"adm-component"} type="right-outline"/>} />
</Space>
<Space direction={'vertical'}>
<Text>默认打开更多选项</Text>
<ScrollHeaderComponent defaultOpen/>
</Space>
</Space>;
};
render(<BaseExample/>);
- SearchBar 搜索框
- SearchBar 搜索框
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {SearchBar, Space, Button} = antdTaro;
const {View} = taroComponent;
const {useRef} = React;
const {showToast} = tarojsTaro;
const BaseExample = ()=>{
const searchRef = useRef(null);
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<SearchBar placeholder='请输入内容' />
</Space>
<Space direction={'vertical'}>
<View>不显示搜索按钮</View>
<SearchBar showSearchButton={false} />
</Space>
<Space direction={'vertical'}>
<View>自定义搜索按钮</View>
<SearchBar autoFocus searchText='立即搜索' />
</Space>
<Space direction={'vertical'}>
<View>搜索按钮长显</View>
<SearchBar placeholder='请输入内容' showSearchButton={() => true} />
</Space>
<Space direction={'vertical'}>
<View>事件监听和 Ref</View>
<SearchBar
ref={searchRef}
placeholder='请输入内容'
onSearch={val => {
console.log('你搜索了')
showToast({title: `你搜索了：${val}`, icon: 'none'})
}}
onFocus={() => {
console.log('获得焦点')
setTimeout(() => searchRef.current?.focus(), 300)
}}
onBlur={() => {
console.log('失去焦点')
}}
onCancel={() => {
console.log('取消搜索')
}}
/>
<Space>
<Button
onClick={() => {
searchRef.current?.clear()
}}
>
清空内容
</Button>
<Button
onClick={() => {
searchRef.current?.focus()
}}
>
激活
</Button>
</Space>
</Space>
</Space>
);
};
render(<BaseExample />);
- Selector 选择组
- Selector 选择组
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Selector} = antdTaro;
const {View} = taroComponent;
const BaseExample = () => {
return <View>
<Selector options={[{label: '男', value: '0'}, {label: '女', value: '1'}]}/>
<View style={{height: '20px'}}></View>
<Selector multiple options={[
{label: '选项1', value: '0'},
{label: '选项2', value: '1'},
{label: '选项3', value: '2'},
{label: '选项4', value: '3'},
{label: '选项5', value: '5'}
]}/>
</View>;
};
render(<BaseExample/>);
- Slider 滑动输入条
- Slider 滑动输入条
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components),tarojsTaro(@tarojs/taro)
const {Slider, Space} = antdTaro;
const {View} = taroComponent;
const {showToast} = tarojsTaro;
const BaseExample = ()=>{
const toastValue = (value) => {
let text = ''
if (typeof value === 'number') {
text = `${value}`
} else {
text = `[${value.join(',')}]`
}
showToast({icon: 'none', title: `当前选中值为：${text}`});
console.log(value);
}
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Slider onChange={toastValue} />
</Space>
<Space direction={'vertical'}>
<View>设置 step</View>
<Slider ticks step={10} />
</Space>
<Space direction={'vertical'}>
<View>显示当前 value</View>
<Slider step={1} value={50} showValue/>
</Space>
<Space direction={'vertical'}>
<View>设置最小/最大值</View>
<Slider step={1} value={100} showValue min={50} max={200}/>
</Space>
</Space>
);
};
render(<BaseExample />);
- Space 间距
- Space 间距
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Space, Button} = antdTaro;
const {View} = taroComponent;
const style = `{
font-size: 12px;
background: #ddd;
padding: 20px;
box-sizing: border-box;
}`;
const styleWidth = `{
font-size: 12px;
max-width: 80px;
}`;
const BaseExample = () => {
return (
<Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>水平方向的间距</View>
<Space>
<View style={style}>horizontal</View>
<View style={style}>horizontal</View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>换行</View>
<Space wrap>
{
Array(10).fill().map((_item, index) => (
<View style={style} key={`view${index}`}>view{index}</View>
))
}
</Space>
</Space>
<Space direction={'vertical'}>
<View>垂直方向的间距</View>
<Space direction={'vertical'}>
<View style={style}>vertical</View>
<View style={style}>vertical</View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>自定义间距大小</View>
<Space size={16} wrap>
<View style={style}>horizontal</View>
<View style={style}>horizontal</View>
<View style={style}>horizontal</View>
<View style={style}>horizontal</View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>渲染为块级元素</View>
<Space direction='vertical' block>
<Button>按钮1</Button>
<Button>按钮2</Button>
<Button>按钮3</Button>
</Space>
</Space>
<Space direction={'vertical'}>
<View>主轴对齐方式</View>
<Space justify='center' block>
<View style={style + styleWidth}>1</View>
<View style={style + styleWidth}>2{`\n`}2{`\n`}2</View>
<View style={style + styleWidth}>3{`\n`}3{`\n`}3{`\n`}3{`\n`}3</View>
</Space>
</Space>
<Space direction={'vertical'}>
<View>交叉轴对齐方式</View>
<Space justify='center' block>
<View style={style + styleWidth}>1</View>
<View style={style + styleWidth}>2{`\n`}2{`\n`}2</View>
<View style={style + styleWidth}>3{`\n`}3{`\n`}3{`\n`}3{`\n`}3</View>
</Space>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Steps 步骤条
- Steps 步骤条
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Steps, Space} = antdTaro;
const {Text} = taroComponent;
const items = [
{title: '第一步', description: '完成时间：2020-12-01 12:30'},
{title: '第二步', description: '完成时间：2020-12-01 12:30'},
{title: '第三步', description: '完成时间：2020-12-01 12:30'},
{title: '第四步', description: '完成时间：2020-12-01 12:30'}
];
const BaseExample = () => {
return (
<Space direction='vertical'>
<Space direction='vertical'>
<Text>横向步骤条</Text>
<Steps current={2} items={items}/>
</Space>
<Space direction='vertical'>
<Text>横向步骤条失败</Text>
<Steps current={2} items={[...items.slice(0, 3), Object.assign({}, items[3], {status: 'error'})]}/>
</Space>
<Space direction='vertical'>
<Text>纵向步骤条</Text>
<Steps direction='vertical' current={2} items={items}/>
</Space>
<Space direction='vertical'>
<Text>纵向步骤条失败</Text>
<Steps direction='vertical' current={2} items={[...items.slice(0, 3), Object.assign({}, items[3], {status: 'error'})]}/>
</Space>
</Space>
);
};
render(<BaseExample/>);
- Switch 开关
- Switch 开关
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View} = taroComponent;
const {Switch, Space} = antdTaro;
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Switch />
</Space>
<Space direction={'vertical'}>
<View>有默认值</View>
<Switch checked />
</Space>
<Space direction={'vertical'}>
<View>禁用</View>
<Switch disabled />
</Space>
<Space direction={'vertical'}>
<View>type 为 checkbox</View>
<Switch checked type={'checkbox'} />
</Space>
<Space direction={'vertical'}>
<View>color</View>
<Switch checked color={'#04BE02'} />
</Space>
</Space>;
};
render(<BaseExample/>);
- TabBar 标签栏
- TabBar 标签栏
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View} = taroComponent;
const {useState} = React;
const {TabBar, Space, Icon, Badge} = antdTaro;
const tabs = [
{key: 'index', title: '首页', icon: <Icon type={'clockCircleFill'} className="adm-component" />},
{key: 'info', title: '信息', icon: <Icon type={'informationCircleFill'} className="adm-component" />},
{key: 'question', title: '问题', icon: <Icon type={'exclamationCircleFill'} className="adm-component" />},
];
const tabsPath = [
{key: 'index', title: '首页', icon: <Icon type={'clockCircleFill'} className="adm-component" />, path: '/'},
{key: 'info', title: '信息', icon: <Icon type={'informationCircleFill'} className="adm-component" />, path: '/info'},
{key: 'question', title: '问题', icon: <Icon type={'exclamationCircleFill'} className="adm-component" />, path: '/question'},
];
const tabsBadge = [
{key: 'index', title: '首页', icon: <Icon type={'clockCircleFill'} className="adm-component" />, badge: Badge.dot},
{key: 'info', title: '信息', icon: <Icon type={'informationCircleFill'} className="adm-component" />, badge: 5},
{key: 'question', title: '问题', icon: <Icon type={'exclamationCircleFill'} className="adm-component" />, badge: '99+'},
{key: 'check', title: 'Check', icon: <Icon type={'checkCircleFill'} className="adm-component" />},
];
const BaseExample = () => {
const [activeKey, setActiveKey] = useState('info')
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<TabBar items={tabs}/>
</Space>
<Space direction={'vertical'}>
<View>带有路由</View>
<TabBar items={tabsPath}/>
</Space>
<Space direction={'vertical'}>
<View>徽标</View>
<TabBar items={tabsBadge} style={{'--tab-bar-padding-top': '4px'}}/>
</Space>
<Space direction={'vertical'}>
<View>仅图标</View>
<TabBar items={tabs.map(({title, ...item}) => item)}/>
</Space>
<Space direction={'vertical'}>
<View>仅标题</View>
<TabBar items={tabs.map(({icon, ...item}) => item)}/>
</Space>
<Space direction={'vertical'}>
<View>受控组件</View>
<TabBar items={tabs} activeKey={activeKey} onChange={setActiveKey}/>
</Space>
<Space direction={'vertical'}>
<View>开启安全区</View>
<TabBar items={tabs} safeArea/>
</Space>
</Space>;
};
render(<BaseExample/>);
- Tabs 选项卡
- Tabs 选项卡
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {Tabs, Space, Icon, Badge} = antdTaro;
const {View} = taroComponent;
const {useState} = React;
const BaseExample = () => {
const [activeKey, setActiveKey] = useState('tab2');
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Tabs swiperOpen items={[{
key: 'tab1', title: 'tab1', children: <View>
哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈
</View>
}, {key: 'tab2', title: 'tab2', children: <>tab2</>}]}/>
</Space>
<Space direction={'vertical'}>
<View>没有内容区</View>
<Tabs.Header items={[{key: 'tab1', title: 'tab1'}, {key: 'tab2', title: 'tab2'}]}/>
</Space>
<Space direction={'vertical'}>
<View>禁用状态</View>
<Tabs.Header items={[{key: 'tab1', title: 'tab1'}, {key: 'tab2', title: 'tab2', disabled: true}]}/>
</Space>
<Space direction={'vertical'}>
<View>超长自动滚动</View>
<Tabs
swiperOpen
items={[
{key: 'tab1', title: '超长自动滚动tab1', children: <>tab1</>},
{key: 'tab2', title: '超长自动滚动tab2', children: <>tab2</>},
{key: 'tab3', title: '超长自动滚动tab3', children: <>tab3</>},
{key: 'tab4', title: '超长自动滚动tab4', children: <>tab4</>},
]}
/>
</Space>
<Space direction={'vertical'}>
<View>默认选中值</View>
<Tabs.Header
defaultActiveKey={activeKey}
onChange={setActiveKey}
items={[
{key: 'tab1', title: '超长自动滚动tab1', children: <>tab1</>},
{key: 'tab2', title: '超长自动滚动tab2', children: <>tab2</>},
{key: 'tab3', title: '超长自动滚动tab3', children: <>tab3</>},
{key: 'tab4', title: '超长自动滚动tab4', children: <>tab4</>},
]}
/>
</Space>
<Space direction={'vertical'}>
<View>自定义拓展图标</View>
<Tabs
showMore
moreIcon={<Icon className={"adm-component"} type="right-outline"/>}
items={[
{key: 'tab1', title: '超长自动滚动tab1', children: <>tab1</>},
{key: 'tab2', title: '超长自动滚动tab2', children: <>tab2</>},
{key: 'tab3', title: '超长自动滚动tab3', children: <>tab3</>},
{key: 'tab4', title: '超长自动滚动tab4', children: <>tab4</>},
]}
/>
</Space>
<Space direction={'vertical'}>
<View>搭配 Badge 使用</View>
<Tabs
items={[
{key: 'tab1', title: 'tab1', children: <>tab1</>},
{key: 'tab2', title: 'tab2', children: <>tab2</>},
{key: 'tab3', title: 'tab3', children: <>tab3</>},
{key: 'tab4', title: <Badge content={1}>tab4</Badge>, children: <>tab4</>},
]}
/>
</Space>
</Space>;
};
render(<BaseExample/>);
- Tag 标签
- Tag 标签
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View} = taroComponent;
const {Tag, Space} = antdTaro;
const BaseExample = () => {
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基础用法</View>
<Tag>123</Tag>
</Space>
<Space direction={'vertical'}>
<View>线框标签</View>
<Space wrap>
<Tag color='primary' fill='outline'>Primary</Tag>
<Tag color='#87d068' fill='outline'>#87d068</Tag>
<Tag color='#ff6430' fill='outline'>#ff6430</Tag>
</Space>
</Space>
<Space direction={'vertical'}>
<View>语义标签</View>
<Space wrap>
<Tag color='default'>Default</Tag>
<Tag color='primary'>测试</Tag>
<Tag color='success'>Success</Tag>
<Tag color='warning'>Warning</Tag>
<Tag color='danger'>Danger</Tag>
</Space>
</Space>
<Space direction={'vertical'}>
<View>圆角标签</View>
<Tag round color='#2db7f5'>圆角标签</Tag>
</Space>
<Space direction={'vertical'}>
<View>自定义颜色</View>
<Space>
<Tag color='#2db7f5'>#2db7f5</Tag>
<Tag color='#87d068'>#87d068</Tag>
<Tag color='#108ee9'>#108ee9</Tag>
</Space>
</Space>
<Space direction={'vertical'}>
<View>背景色透明度</View>
<Space>
<Tag color='#2db7f5' opacity>#2db7f5</Tag>
<Tag color='#87d068' opacity>#87d068</Tag>
<Tag color='#108ee9' opacity>#108ee9</Tag>
</Space>
</Space>
<Space direction={'vertical'}>
<View>通过 CSS 变量个性化</View>
<Space>
<Tag color='primary' fill='outline' style={{ '--border-radius': '6px' }}>Primary</Tag>
<Tag color='success' fill='outline' style={{ '--background-color': '#c8f7cFFF' }}>Success</Tag>
<Tag color='warning' style={{ '--text-color': 'var(--adm-color-text)' }}>Warning</Tag>
<Tag color='danger' fill='outline' style={{ '--border-color': 'var(--adm-color-weak)' }}>Danger</Tag>
</Space>
</Space>
</Space>;
};
render(<BaseExample/>);
- TextArea 文本域
- TextArea 文本域
- antdTaro(@kne/antd-taro),taroComponent(@tarojs/components)
const {View} = taroComponent;
const {TextArea, Space} = antdTaro;
const {useState} = React;
const content = 'antd-taro 是一个基于@tarojs/components的高级组件库，它提供基础的UI交互组件，它旨在解决小程序应用中的复杂场景问题。Ellipsis是一个文本省略组件，展示空间不足时，隐去部分内容并用“...”替代。当文本内容长度或高度超过列宽或行高、图表中空间有限、文本内容无法完全显示、自适应调整时宽度变小时就可以考虑使用该组件。'
const BaseExample = () => {
const [value, setValue] = useState(content)
return <Space direction={'vertical'} size={30}>
<Space direction={'vertical'}>
<View>基本的输入框组件</View>
<TextArea value={value} onChange={setValue} maxLength={-1} />
</Space>
<Space direction={'vertical'}>
<View>字数限制</View>
<TextArea placeholder='请输入内容' maxLength={500} />
</Space>
<Space direction={'vertical'}>
<View>禁用状态</View>
<TextArea placeholder='请输入内容' value={'北极星垂地，\n东山月满川。'} disabled/>
</Space>
<Space direction={'vertical'}>
<View>输入区域高度自适应，不会出现滚动条</View>
<TextArea placeholder='请输入内容' autoSize maxLength={-1}/>
</Space>
</Space>;
};
render(<BaseExample/>);
| 属性名 |
说明 |
类型 |
默认值 |
| src |
头像的图片地址 |
string |
- |
| size |
大小，宽度和高度，等效于设置 --size CSS 变量 |
number |
48 |
| 属性名 |
说明 |
默认值 |
全局变量 |
| --border-radius |
圆角 |
50% |
--adm-avatar-border-radius |
| --size |
大小，宽度和高度 |
48px |
--adm-avatar-size |
| 属性名 |
说明 |
类型 |
默认值 |
| bordered |
是否增加描边 |
boolean |
false |
| color |
徽标背景色，等效于设置 --color CSS 变量 |
string |
- |
| content |
徽标内容：如果传 null undefined '' 或不传，则不显示徽标；如果传 Badge.dot，会显示小红点 |
React.ReactNode | typeof Badge.dot |
- |
| wrapperClassName |
Badge wrap 自定义类名 |
string |
- |
| wrapperStyle |
Badge wrap 自定义样式 |
React.CSSProperties |
- |
| 属性名 |
说明 |
默认值 |
全局变量 |
| --color |
徽标背景色 |
#ff411c |
--adm-badge-color |
| --right |
相对于最右边，向左的偏移量 |
0 |
- |
| --top |
相对于最上边，向下的偏移量 |
0 |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| block |
是否是块级元素 |
boolean |
false |
| color |
按钮的颜色 |
'default' | 'primary' | 'success' | 'warning' | 'danger' |
'default' |
| disabled |
是否禁用 |
boolean |
false |
| fill |
填充模式 |
'solid' | 'outline' | 'none' |
'solid' |
| loading |
是否处于加载状态，'auto' 模式会监听 onClick 的 Promise 状态自动更新 loading |
boolean | 'auto' |
false |
| loadingIcon |
加载状态下的 icon 图标 |
ReactNode |
|
| loadingText |
加载状态下额外展示的文字 |
string |
- |
| shape |
按钮的形状 |
'default' | 'rounded' | 'rectangular' |
'default' |
| size |
大小 |
'mini' | 'small' | 'middle' | 'large' |
'middle' |
| type |
原生 button 元素的 type 属性 |
'submit' | 'reset' | 'button' |
'button' |
| onClick |
点击事件 |
(event: React.MouseEvent) => void | Promise |
- |
此外，还支持原生 button 元素的以下属性：onMouseDown onMouseUp onTouchStart onTouchEnd。
| 属性名 |
说明 |
默认值 |
全局变量 |
| --background-color |
背景颜色 |
var(--adm-color-background) #ffffff |
--adm-button-background-color |
| --border-color |
边框颜色 |
var(--adm-color-border) #f1f1f1 |
--adm-button-border-color |
| --border-radius |
圆角大小 |
8px |
--adm-button-border-radius |
| --border-style |
边框样式 |
solid |
--adm-button-border-style |
| --border-width |
边框样式 |
2px |
--adm-button-border-width |
| --text-color |
文字颜色 |
var(--adm-color-text) '#333333' |
--adm-button-text-color |
| 属性名 |
说明 |
类型 |
默认值 |
| bodyClassName |
body 自定义类名 |
string |
- |
| bodyStyle |
body 自定义样式 |
React.CSSProperties |
- |
| extra |
header 右边区域 |
ReactNode |
- |
| headerClassName |
header 自定义类名 |
string |
- |
| headerStyle |
header 自定义样式 |
React.CSSProperties |
- |
| onBodyClick |
body 区域点击事件 |
(event: React.MouseEvent) => void |
- |
| onClick |
卡片点击事件 |
(event: React.MouseEvent) => void |
- |
| onHeaderClick |
header 区域点击事件 |
(event: React.MouseEvent) => void |
- |
| title |
header 左边区域 |
ReactNode |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| activeIcon |
选中图标 |
ReactNode |
|
| extra |
列表右侧区域 |
(active: boolean) => ReactNode |
- |
| defaultValue |
默认项 |
string[] |
[] |
| disabled |
是否禁用 |
boolean |
false |
| multiple |
是否允许多选 |
boolean |
false |
| onChange |
选项改变时触 |
(value: string[]) => void |
false |
| readOnly |
是否只读 |
boolean |
false |
| value |
选中项 |
string[] |
[] |
此外，还支持 List 的 mode 属性
| 属性名 |
说明 |
类型 |
默认值 |
| disabled |
是否禁用 |
boolean |
false |
| readOnly |
是否只读 |
boolean |
false |
| value |
选项值 |
string[] |
[] |
同 List.Item
| 属性名 |
说明 |
默认值 |
| --active-background-color |
点击时的背景颜色 |
var(--adm-color-border) |
| --align-items |
列表项的 align-item |
center |
| --border-bottom |
列表容器底部的边框样式 |
solid 2px var(--adm-color-border) |
| --border-inner |
列表项底部的边框样式 |
solid 2px var(--adm-color-border) |
| --border-top |
列表容器顶部的边框样式 |
solid 2px var(--adm-color-border) |
| --extra-max-width |
extra 部分的最大宽度 |
70% |
| --font-size |
Body 内容的字体大小 |
var(--adm-font-size-9) 34px |
| --header-font-size |
头部的字体大小 |
var(--adm-font-size-7) 30px |
| --padding-left |
列表项和列表头部左侧的 padding |
24px |
| --padding-right |
列表项和列表头部右侧的 padding |
24px |
| --prefix-padding-right |
prefix 部分的右侧 padding |
24px |
| --prefix-width |
prefix 部分的宽度 |
auto |
| 属性名 |
说明 |
类型 |
默认值 |
| accordion |
是否开启手风琴模式 |
boolean |
false |
| activeKey |
当前展开面板的 key |
手风琴模式：string | null
非手风琴模式：string[] |
- |
| arrow |
自定义箭头，如果是 ReactNode，那么 antd-mobile 会自动为你增加旋转动画效果 |
ReactNode |
((active: boolean) => React.ReactNode) | [] |
| defaultActiveKey |
默认展开面板的 key |
手风琴模式：string | null
非手风琴模式：string[] | [] |
- |
| onChange |
切换面板时触发 |
手风琴模式：(activeKey: string | null) => void
非手风琴模式：(activeKey: string[]) => void |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| arrow |
自定义箭头 |
ReactNode | ((active: boolean) => React.ReactNode) |
- |
| destroyOnClose |
不可见时是否销毁 DOM 结构 |
boolean |
false |
| disabled |
是否为禁用状态 |
boolean |
false |
| forceRender |
被隐藏时是否渲染 DOM 结构 |
boolean |
false |
| key |
唯一标识符 |
string |
- |
| onClick |
标题栏的点击事件 |
(event: React.MouseEvent) => void |
- |
| title |
标题栏左侧内容 |
ReactNode |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| defaultValue |
默认选中值 |
PickerDate |
new Date() 今天 |
| max |
最大值 |
PickerDate |
new Date() 今天 |
| min |
最小值 |
PickerDate |
new Date('1949-10-01') |
| onChange |
确认时触发 |
(value: PickerDate) => void |
- |
| precision |
精度 |
'month' | 'day' | 'hour' | 'minute' |
- |
| renderLabel |
自定义渲染每列展示的内容。其中 type 参数为 precision 中的任意值或 now，data 参数为默认渲染的数字 |
(type: Precision | 'now', data: number) => ReactNode |
- |
| value |
选中值 |
PickerDate |
- |
此外还支持 Picker 的以下属性：onCancel onClose confirmText cancelText title loading loadingContent。
| 属性名 |
说明 |
类型 |
默认值 |
| defaultValue |
默认选中值 |
[PickerDate, PickerDate] |
[new Date(), new Date()] 今天 |
| max |
最大值 |
PickerDate |
new Date() 今天 |
| min |
最小值 |
PickerDate |
new Date('1949-10-01') |
| onChange |
确认时触发 |
(value: PickerDate) => void |
- |
| precision |
精度 |
'month' | 'day' | 'hour' | 'minute' |
- |
| renderLabel |
自定义渲染每列展示的内容。其中 type 参数为 precision 中的任意值或 now，data 参数为默认渲染的数字 |
(type: Precision | 'now', data: number) => ReactNode |
- |
| value |
选中值 |
[PickerDate, PickerDate] |
- |
此外还支持 Picker 的以下属性：onCancel onClose confirmText cancelText title loading loadingContent。
| 属性名 |
说明 |
类型 |
默认值 |
| color |
线条颜色，等效于手动设置 --color CSS 变量 |
'default' | 'primary' | 'white' | string |
'default' |
DotLoading 的大小会自动根据当前的文字大小进行调整。
| 属性名 |
说明 |
默认值 |
| --color |
线条颜色 |
var(--adm-color-weak) |
| --size |
大小 |
32px |
| 属性名 |
说明 |
类型 |
默认值 |
| arrow |
自定义 arrow |
React.ReactNode |
- |
| onChange |
activeKey 变化时触发 |
(activeKey: string | null)=> void |
- |
| items |
列 |
DropdownItem[] |
- |
| 属性 |
说明 |
类型 |
| close |
关闭下拉菜单 |
() => void |
| 属性名 |
说明 |
类型 |
默认值 |
| arrow |
自定义 arrow |
React.ReactNode |
- |
| highlight |
高亮 |
boolean |
false |
| key |
唯一值 |
string |
- |
| title |
标题 |
ReactNode |
- |
| onClick |
点击事件 |
(event: React.MouseEvent) => void |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| collapseText |
收起操作的文案 |
React.ReactNode |
'收起' |
| content |
文本内容 |
string |
- |
| expandText |
展开操作的文案 |
ReactNode |
'展开' |
| rows |
展示几行 |
number |
1 |
| defaultExpanded |
是否默认展开 |
boolean |
false |
| showAction |
是否显示展开收起操作 |
boolean |
false |
| 属性名 |
说明 |
类型 |
默认值 |
| description |
图片下方的描述文字 |
ReactNode |
- |
| image |
自定义图片，为 string 时表示图片 URL |
ReactNode |
- |
| imageStyle |
图片样式 |
CSSProperties |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| columns |
列数 |
number |
- |
| gap |
格子之间的间距 |
number | string | [number | string, number | string] |
0 |
| 属性名 |
说明 |
默认值 |
| --gap |
间距大小 |
0 |
| --gap-horizontal |
水平方向的间距大小 |
var(--gap) |
| --gap-vertical |
垂直方向的间距大小 |
var(--gap) |
| 属性名 |
说明 |
类型 |
默认值 |
| onClick |
点击事件 |
(event: React.MouseEvent) => void |
- |
| span |
跨度 |
number |
1 |
| 属性名 |
说明 |
类型 |
默认值 |
| type |
图标类型 |
ReactNode |
- |
| image |
自定义图片，为 string 时表示图片 URL |
ReactNode |
- |
| imageStyle |
图片样式 |
CSSProperties |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| value |
输入框的初始内容 |
string |
- |
| type |
input 的类型 |
"number" | "text" | "idcard" | "digit" |
"text" |
| password |
是否是密码类型 |
boolean |
- |
| placeholder |
输入框为空时占位符 |
string |
- |
| placeholderStyle |
指定 placeholder 的样式 |
string |
- |
| placeholderClass |
指定 placeholder 的样式类 |
string |
"input-placeholder" |
| disabled |
是否禁用 |
boolean |
false |
| maxLength |
最大输入长度，设置为 -1 的时候不限制最大长度 |
number |
140 |
| cursorSpacing |
指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
number |
0 |
| autoFocus |
(即将废弃，请直接使用 focus )自动聚焦，拉起键盘 |
boolean |
false |
| focus |
获取焦点 |
boolean |
false |
| confirmType |
设置键盘右下角按钮的文字 |
"send" | "search" | "next" | "go" | "done" |
done |
| confirmHold |
点击键盘右下角按钮时是否保持键盘不收起 |
boolean |
false |
| cursor |
指定focus时的光标位置 |
number |
|
| selectionStart |
光标起始位置，自动聚集时有效，需与selection-end搭配使用 |
number |
-1 |
| selectionEnd |
光标结束位置，自动聚集时有效，需与selection-start搭配使用 |
number |
-1 |
| adjustPosition |
键盘弹起时，是否自动上推页面 |
boolean |
true |
| holdKeyboard |
focus 时，点击页面的时候不收起键盘 |
boolean |
false |
| onInput |
当键盘输入时，触发input事件，event.detail = {value, cursor, keyCode}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 |
BaseEventOrigFunction: inputEventDetail |
- |
| onFocus |
输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 |
BaseEventOrigFunction: inputForceEventDetail |
- |
| onBlur |
输入框失去焦点时触发 event.detail = {value: value} |
BaseEventOrigFunction: inputValueEventDetail |
- |
| onConfirm |
点击完成按钮时触发 event.detail = {value: value} |
BaseEventOrigFunction: inputValueEventDetail |
- |
| onKeyboardHeightChange |
键盘高度发生变化的时候触发此事件 event.detail = {height: height, duration: |
BaseEventOrigFunction: onKeyboardHeightChangeEventDetail |
- |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
| cursor |
number |
光标位置 |
| keyCode |
number |
键值 |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
| height |
number |
键盘高度 |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
onKeyboardHeightChangeEventDetail
| 属性名 |
类型 |
说明 |
| height |
number |
键盘高度 |
| duration |
number |
持续时间 |
| 属性名 |
类型 |
说明 |
| blur |
() => void |
让输入框失去焦点 |
| clear |
() => void |
清空输入内容 |
| focus |
() => void |
让输入框获得焦点 |
| 属性名 |
说明 |
类型 |
默认值 |
| header |
标题内容 |
ReactNode |
- |
| mode |
支持默认和卡片两种模式 |
'default' | 'card' |
'default' |
| 属性名 |
说明 |
默认值 |
| --active-background-color |
点击时的背景颜色 |
var(--adm-border-color) |
| --align-items |
列表项的 align-item |
center |
| --border-bottom |
列表容器底部的边框样式 |
solid 1px var(--adm-border-color) |
| --border-inner |
列表项底部的边框样式 |
solid 1px var(--adm-border-color) |
| --border-top |
列表容器顶部的边框样式 |
solid 1px var(--adm-border-color) |
| --extra-max-width |
extra 部分的最大宽度 |
70% |
| --font-size |
Body 内容的字体大小 |
34px |
| --header-font-size |
头部的字体大小 |
30px |
| --padding-left |
列表项和列表头部左侧的 padding |
24px |
| --padding-right |
列表项和列表头部右侧的 padding |
24px |
| --prefix-padding-right |
prefix 部分的右侧 padding |
24px |
| --prefix-width |
prefix 部分的宽度 |
auto |
| 属性名 |
说明 |
类型 |
默认值 |
| arrow |
右侧是否显示箭头图标，也支持传入 ReactNode 来自定义图标 |
boolean | ReactNode |
默认和 clickable 的值保持一致 |
| children |
列表项中间的主内容区域 |
ReactNode |
- |
| clickable |
是否显示点击效果 |
boolean |
当 onClick 属性存在时，默认为 true，否则默认为 false |
| description |
列表项中间下部的描述区域 |
ReactNode |
- |
| disabled |
是否禁用 |
boolean |
false |
| extra |
列表项右侧区域 |
ReactNode |
- |
| onClick |
列表项的点击事件，当设置了 onClick 属性时，列表项会有点击效果 |
(e: React.MouseEvent) => void |
- |
| prefix |
列表项左侧区域 |
ReactNode |
- |
| title |
列表项中间上部的标题区域 |
ReactNode |
- |
支持 List 中的 --prefix-width、--active-background-color、--align-items
| 属性名 |
说明 |
类型 |
默认值 |
| back |
返回区域的文字，如果为 null 的话，backArrow 也不会渲染 |
ReactNode | null |
'' |
| backArrow |
支持默认和卡片两种模式 |
boolean | ReactNode |
true |
| children |
标题 |
ReactNode |
ReactNode |
| left |
左侧内容，渲染在返回区域的右侧 |
ReactNode |
- |
| onBack |
点击返回区域后的回调 |
ReactNode |
() => void |
| right |
右侧内容 |
ReactNode |
ReactNode |
| 属性名 |
说明 |
默认值 |
| --border-bottom |
导航栏下边框 |
none |
| --height |
导航栏高度 |
90px |
| 属性名 |
说明 |
类型 |
默认值 |
| cancelText |
取消按钮的文字 |
ReactNode |
'取消' |
| columns |
配置每一列的选项 |
PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]) |
- |
| confirmText |
确定按钮的文字 |
ReactNode |
'确定' |
| defaultValue |
默认选中项 |
PickerValue[] |
[] |
| onCancel |
取消时触发 |
() => void |
- |
| onClose |
确认和取消时都会触发关闭事件 |
() => void |
- |
| popupClassName |
Popup 弹层容器的自定义类名 |
string |
- |
| popupStyle |
Popup 弹层容器的自定义样式 |
React.CSSProperties |
- |
| renderLabel |
自定义渲染每列展示的内容 |
(item: PickerColumnItem) => ReactNode |
(item) => item.label |
| title |
标题 |
PickerValue[] |
- |
| value |
选中项 |
PickerValue[] |
- |
| open |
是否显示选择器 |
boolean |
false |
| onOpenChange |
确认时触发 |
(value: boolean) => void |
- |
| loading |
是否处于加载状态 |
boolean |
boolean |
此外还支持 Popup 的以下属性：getContainer onClick stopPropagation
***请留意，columns 属性的类型是二级数组，第一级对应的是每一列，而第二级对应的是某一列中的每一个选项。因此，下面的这种写法是错误的：
<Picker
columns={[
{label: 'Foo', value: 'foo'},
{label: 'Bar', value: 'bar'},
]}
/>需要写成：
<Picker
columns={[
[
{label: 'Foo', value: 'foo'},
{label: 'Bar', value: 'bar'},
]
]}
/>
| 属性名 |
说明 |
默认值 |
| --header-button-font-size |
确定和取消按钮的字号 |
30px |
| --item-font-size |
选择项的字号 |
32px |
| --item-height |
选项的高度，仅支持 px rem 和 vw 单位 |
34px |
| --title-font-size |
标题的字号 |
30px |
Popup 弹出层
| 属性名 |
说明 |
类型 |
默认值 |
| afterClose |
完全关闭后触发 |
() => void |
- |
| afterShow |
完全展示后触发 |
() => void |
- |
| bodyClassName |
内容区域类名 |
string |
- |
| bodyStyle |
内容区域样式 |
React.CSSProperties |
- |
| className |
容器类名 |
string |
- |
| closeOnMaskClick |
点击背景蒙层后是否关闭 |
boolean |
false |
| mask |
是否展示蒙层 |
boolean |
true |
| maskClassName |
遮罩类名 |
string |
- |
| onClick |
点击时触发，常用于阻止事件冒泡 |
(event: React.MouseEvent) => void |
- |
| onClose |
关闭时触发 |
() => void |
- |
| onMaskClick |
点击蒙层触发 |
(event: React.MouseEvent) => void |
- |
| position |
指定弹出的位置 |
'bottom' | 'top' | 'left' | 'right' |
'bottom' |
| showCloseButton |
是否显示关闭按钮 |
boolean |
false |
| stopPropagation |
阻止某些事件的冒泡 |
PropagationEvent[] |
['click'] |
| style |
容器样式 |
React.CSSProperties |
- |
| open |
是否可见 |
boolean |
false |
| 属性名 |
说明 |
默认值 |
全局变量 |
| --z-index |
元素的 z-index |
1000 |
--adm-popup-z-index |
| 属性名 |
说明 |
类型 |
默认值 |
| description |
描述 |
ReactNode |
- |
| icon |
自定义 icon |
ReactNode |
ReactNode |
| status |
状态类型 |
'success' | 'error' | 'info' | 'waiting' | 'warning' |
'info' |
| title |
标题 |
ReactNode |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| position |
安全区的位置 |
'top' |
'bottom' |
| 属性名 |
说明 |
默认值 |
全局变量 |
| --multiple |
显示的倍数 |
1 |
--adm-safe-area-multiple |
ScrollHeader 滚动标头
| 属性名 |
说明 |
类型 |
默认值 |
| showMore |
是否展示更多按钮 |
boolean |
true |
| icon |
更多按钮 |
ReactNode |
Icon type="gengduo2" className="iconfont" |
| defaultOpen |
默认打开更多选项 |
boolean |
false |
| 属性名 |
说明 |
类型 |
默认值 |
| searchText |
搜索按钮的文案 |
string |
'搜索' |
| clearOnCancel |
点击取消按钮后是否清空输入框 |
boolean |
true |
| clearable |
是否启用清除图标，点击清除图标后会清空输入框 |
boolean |
true |
| icon |
图标 |
ReactNode |
Icon type="searchOutline" className="adm-component" |
| maxLength |
输入的最大字符数 |
number |
- |
| onBlur |
输入框失去焦点时触发 |
(e: React.FocusEvent) => void |
- |
| onChange |
输入框内容变化时触发 |
(value: string) => void |
- |
| onClear |
点击清除按钮后触发 |
() => void |
- |
| onFocus |
输入框获得焦点时触发 |
(e: React.FocusEvent) => void |
- |
| onSearch |
输入框回车时触发或点击搜索按钮时触发 |
(value: string) => void |
- |
| onlyShowClearWhenFocus |
如果 true，那么只有输入框聚焦时才会显示清除按钮；如果为 false，那么输入框失去焦点后依旧会显示清除按钮 |
boolean |
false |
| placeholder |
提示文本 |
string |
- |
| showSearchButton |
是否在搜索框右侧显示搜索按钮 |
boolean | ((focus: boolean, value: string) => boolean) |
false |
| value |
输入值 |
string |
- |
| 属性名 |
说明 |
默认值 |
| --background |
背景色 |
#f5f5f5 |
| --border-radius |
圆角 |
12px |
| --height |
高度 |
64px |
| --padding-left |
搜索框的左侧 padding |
16x |
| --placeholder-color |
placeholder 文字颜色 |
var(--adm-color-weak) |
同Input。
| 属性名 |
说明 |
类型 |
默认值 |
| columns |
列数（注意 grid 布局在 IOS 9 下不支持） |
number |
- |
| defaultValue |
默认项 |
SelectorValue[] |
[] |
| disabled |
是否全部禁止选中 |
boolean |
false |
| multiple |
是否允许多选 |
boolean |
false |
| onChange |
选项改变时触发 |
(value: SelectorValue[], extend: { items: SelectorOption[] }) => void |
- |
| options |
可选项 |
SelectorOption[] |
- |
| showCheckMark |
是否显示对勾角标 |
boolean |
true |
| value |
选中项 |
SelectorValue[] |
- |
| 属性名 |
说明 |
默认值 |
| --border |
边框样式 |
none |
| --border-radius |
选项的圆角 |
4px |
| --checked-border |
选中时的边框样式 |
none |
| --checked-color |
选中时的背景色 |
#e7f1ff |
| --checked-text-color |
选中时的文字颜色 |
var(--adm-color-primary) |
| --color |
背景色 |
#f5f5f5 |
| --padding |
选项的 padding |
16px 32px |
| --text-color |
文字颜色 |
var(--adm-color-text) |
| --gap |
间距大小，仅在 columns 存在时生效 |
16px |
| --gap-horizontal |
水平方向的间距大小，，仅在 columns 存在时生效 |
var(--gap) |
| --gap-vertical |
垂直方向的间距大小，仅在 columns 存在时生效 |
var(--gap) |
type SelectorValue = string | number
| 属性名 |
说明 |
类型 |
默认值 |
| description |
描述 |
ReactNode |
- |
| disabled |
是否禁用 |
boolean |
false |
| label |
文字 |
ReactNode |
- |
| value |
选项的值 |
SelectorValue |
- |
Selector 支持泛型，你可以通过下面的这种方式手动控制 value onChange 等属性的类型：
<Selector
options={options}
defaultValue={['a']}
onChange={arr => console.log(arr)}
/>
| 属性名 |
说明 |
类型 |
默认值 |
| min |
最小值 |
number |
0 |
| max |
最大值 |
number |
100 |
| step |
步长，取值必须大于 0，并且可被(max - min)整除 |
number |
1 |
| disabled |
是否禁用 |
boolean |
false |
| value |
当前取值 |
number |
0 |
| color |
背景条的颜色（请使用 backgroundColor） |
string |
"#e9e9e9" |
| selectedColor |
已选择的颜色（请使用 activeColor） |
string |
"#1aad19" |
| activeColor |
已选择的颜色 |
string |
"#1aad19" |
| backgroundColor |
背景条的颜色 |
string |
"#1aad19" |
| blockSize |
滑块的大小，取值范围为 12 - 28 |
number |
28 |
| blockColor |
滑块的颜色 |
string |
"#ffffff" |
| showValue |
是否显示当前 value |
boolean |
false |
| onChange |
完成一次拖动后触发的事件 |
aseEventOrigFunction:onChangeEventDetail |
- |
| onChanging |
拖动过程中触发的事件 |
aseEventOrigFunction:onChangeEventDetail |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| align |
交叉轴对齐方式 |
'start' | 'end' | 'center' | 'baseline' |
- |
| block |
是否渲染为块级元素 |
boolean |
false |
| direction |
间距方向 |
'vertical' | 'horizontal' |
'horizontal' |
| justify |
主轴对齐方式 |
'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch' |
- |
| onClick |
点击事件 |
(event: React.MouseEvent) => void |
- |
| wrap |
是否自动换行，仅在 horizontal 时有效 |
boolean |
false |
| 属性名 |
说明 |
默认值 |
| --gap |
间距大小 |
16px |
| --gap-horizontal |
水平方向的间距大小 |
var(--gap) |
| --gap-vertical |
垂直方向的间距大小 |
var(--gap) |
| 属性名 |
说明 |
类型 |
默认值 |
| current |
指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态 |
number |
0 |
| direction |
指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 |
'horizontal' | 'vertical' |
'horizontal' |
| items |
参数项 |
StepsItem[] |
[] |
| 属性名 |
说明 |
默认值 |
| --description-font-size |
描述的字号 |
24px |
| --icon-size |
指示器上图标的大小 |
36px |
| --indicator-margin-right |
左边的指示器和右边的文字内容之间的额外间距 |
0 |
| --title-font-size |
标题的字号 |
26px |
| 属性名 |
说明 |
类型 |
默认值 |
| description |
步骤的详情描述，可选 |
ReactNode |
- |
| title |
标题 |
ReactNode |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| checked |
是否选中 |
boolean |
false |
| disabled |
是否禁用 |
boolean |
false |
| type |
样式，有效值：switch, checkbox |
"switch" | "checkbox" |
"switch" |
| value |
checked 改变时触发 change 事件 |
BaseEventOrigFunction:onChangeEventDetail |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| activeKey |
当前激活 item 的 key |
string | null |
- |
| defaultActiveKey |
初始化选中 item 的 key，如果没有设置 activeKey |
string | null |
第一个 TabBar.Item 的 key |
| onChange |
切换面板的回调 |
(key: string) => void |
- |
| safeArea |
是否开启安全区适配 |
boolean |
false |
| items |
参数项 |
TabBarItem[] |
[] |
| 属性名 |
说明 |
类型 |
默认值 |
| badge |
徽标，同 Badge 的 content 属性 |
React.ReactNode | typeof Badge.dot |
- |
| icon |
图标 |
ReactNode | ((active: boolean) => ReactNode) |
- |
| key |
对应 activeKey |
string |
- |
| title |
标题 |
ReactNode | ((active: boolean) => ReactNode) |
- |
| 属性名 |
说明 |
默认值 |
| --tab-bar-padding-top |
距顶部间距 |
0 |
| 属性名 |
说明 |
类型 |
默认值 |
| activeKey |
当前激活 tab 面板的 key |
string | null |
- |
| defaultActiveKey |
初始化选中面板的 key，如果没有设置 activeKey |
string | null |
第一个面板的 key |
| onChange |
切换面板的回调 |
(key: string) => void |
- |
| stretch |
选项卡头部是否拉伸 |
boolean |
true |
| swiperOpen |
选项卡面板内容是否可滑动 |
boolean |
false |
| showMore |
选项卡是否展示更多按钮 |
boolean |
false |
| items |
标签项 |
TabsItem[] |
[] |
| 属性名 |
说明 |
类型 |
默认值 |
| key |
选项卡面板的唯一标识，对应 activeKey |
string |
- |
| title |
选项卡头显示文字 |
string | ReactNode |
- |
| disabled |
是否禁用 |
boolean |
false |
| children |
选项卡面板内容 |
string | ReactNode |
- |
| 属性名 |
说明 |
默认值 |
| --active-line-border-radius |
当前激活 tab 下划线的圆角 |
var(--active-line-height) |
| --active-line-color |
当前激活 tab 下划线的颜色 |
var(--adm-color-primary) |
| --active-line-height |
当前激活 tab 下划线的高度 |
4px |
| --active-title-color |
当前激活 tab 选项文字颜色 |
var(--adm-color-primary) |
| --content-padding |
tab 内容区的 padding |
24px |
| --title-font-size |
选项卡头文字的大小 |
34px |
Tabs.Header
| 属性名 |
说明 |
类型 |
默认值 |
| activeKey |
当前激活 tab 面板的 key |
string | null |
- |
| defaultActiveKey |
初始化选中面板的 key，如果没有设置 activeKey |
string | null |
第一个面板的 key |
| onChange |
切换面板的回调 |
(key: string) => void |
- |
| stretch |
选项卡头部是否拉伸 |
boolean |
false |
| showMore |
选项卡是否展示更多按钮 |
boolean |
false |
| 属性名 |
说明 |
类型 |
默认值 |
| color |
标签色 |
'default' | 'primary' | 'success' | 'warning' | 'danger' | string |
'default' |
| fill |
填充模式 |
'solid' | 'outline' |
'solid' |
| onClick |
标签点击事件 |
(event: React.MouseEvent) => void |
- |
| round |
是否圆角 |
boolean |
false |
| 属性名 |
说明 |
默认值 |
全局变量 |
| --background-color |
背景颜色 |
当 fill=solid 时，默认值为 color 属性对应的颜色；当 fill=outline 时，默认值为 #ffffff |
- |
| --border-color |
边框颜色 |
color 属性对应的颜色 |
- |
| --border-radius |
round=false 时的圆角大小 |
4px |
--adm-tag-border-radius |
| --text-color |
文字颜色 |
当 fill=solid 时，默认值为 #ffffff；当 fill=outline 时，默认值为 color 属性对应的颜色 |
- |
| 属性名 |
说明 |
类型 |
默认值 |
| value |
输入框的内容 |
string |
- |
| placeholder |
输入框为空时占位符 |
string |
- |
| placeholderStyle |
指定 placeholder 的样式 |
string |
- |
| placeholderClass |
指定 placeholder 的样式类 |
string |
"textarea-placeholder" |
| disabled |
是否禁用 |
boolean |
false |
| maxLength |
最大输入长度，设置为 -1 的时候不限制最大长度 |
number |
140 |
| autoFocus |
自动聚焦，拉起键盘 |
boolean |
false |
| focus |
获取焦点 |
boolean |
false |
| autoHeight |
是否自动增高，设置 autoHeight 时，style.height不生效 |
boolean |
false |
| fixed |
如果 Textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true |
boolean |
false |
| cursorSpacing |
指定光标与键盘的距离，单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离 |
number |
0 |
| cursor |
指定 focus 时的光标位置 |
number |
1 |
| showConfirmBar |
是否显示键盘上方带有”完成“按钮那一栏 |
boolean |
true |
| selectionStart |
光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用 |
number |
-1 |
| selectionEnd |
光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用 |
number |
-1 |
| adjustPosition |
键盘弹起时，是否自动上推页面 |
boolean |
true |
| holdKeyboard |
focus 时，点击页面的时候不收起键盘 |
boolean |
false |
| disableDefaultPadding |
是否去掉 iOS 下的默认内边距 |
boolean |
false |
| onFocus |
输入框聚焦时触发 |
BaseEventOrigFunction:onFocusEventDetail |
- |
| onBlur |
输入框失去焦点时触发 |
BaseEventOrigFunction:onBlurEventDetail |
- |
| onLineChange |
输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0} |
BaseEventOrigFunction:onLineChangeEventDetail |
- |
| onInput |
当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode} onInput 处理函数的返回值并不会反映到 textarea 上
|
BaseEventOrigFunction:onInputEventDetail |
- |
| onConfirm |
点击完成时， 触发 confirm 事件，event.detail = {value: value} |
BaseEventOrigFunction:onConfirmEventDetail |
- |
| onKeyboardHeightChange |
键盘高度发生变化的时候触发此事件 |
BaseEventOrigFunction:onKeyboardHeightChangeEventDetail |
- |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
| height |
number |
键盘高度 |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
| cursor |
number |
光标位置 |
| 属性名 |
类型 |
| height |
string |
| heightRpx |
number |
| lineCount |
number |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
| cursor |
number |
光标位置 |
| keyCode |
number |
键值 |
| 属性名 |
类型 |
说明 |
| value |
string |
输入值 |
onKeyboardHeightChangeEventDetail
| 属性名 |
类型 |
说明 |
| height |
number |
键盘高度 |
| duration |
number |
持续时间 |
