@kne/antd-taro

v1.0.40

Published

2 days ago

Downloads

807

0High
0Medium
0Low

antd-taro

安装

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/>);

API

Avatar 头像

属性

| 属性名 | 说明 | 类型 | 默认值 | |------|------------------------------|--------|-----| | src | 头像的图片地址 | string | - | | size | 大小，宽度和高度，等效于设置 --size CSS 变量 | number | 48 |

CSS 变量

| 属性名 | 说明 | 默认值 | 全局变量 | |-----------------|----------|------|----------------------------| | --border-radius | 圆角 | 50% | --adm-avatar-border-radius | | --size | 大小，宽度和高度 | 48px | --adm-avatar-size |

Badge 徽标

属性

| 属性名 | 说明 | 类型 | 默认值 | |------------------|------------------------------------------------------------|--------------------------------------|-------| | 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 | - |

CSS 变量

| 属性名 | 说明 | 默认值 | 全局变量 | |---------|---------------|---------|-------------------| | --color | 徽标背景色 | #ff411c | --adm-badge-color | | --right | 相对于最右边，向左的偏移量 | 0 | - | | --top | 相对于最上边，向下的偏移量 | 0 | - |

Button 按钮

属性

| 属性名 | 说明 | 类型 | 默认值 | |-------------|--------------------------------------------------------|--------------------------------------------------------------|-------------------------------------| | 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。

CSS 变量

| 属性名 | 说明 | 默认值 | 全局变量 | |--------------------|------|-------------------------------------|-------------------------------| | --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 |

Card 卡片

属性

| 属性名 | 说明 | 类型 | 默认值 | |-----------------|---------------|-----------------------------------|-----| | 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 | - |

CheckList 可勾选列表

属性

| 属性名 | 说明 | 类型 | 默认值 | |--------------|--------|--------------------------------|------------------| | 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 属性

CheckListItem

属性

| 属性名 | 说明 | 类型 | 默认值 | |----------|------|----------|-------| | disabled | 是否禁用 | boolean | false | | readOnly | 是否只读 | boolean | false | | value | 选项值 | string[] | [] |

CSS 变量

同 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 |

Collapse 折叠面板

属性

| 属性名 | 说明 | 类型 | 默认值 | |------------------|--------------------------------------------------|-------------------------------------------------------------------------------------|----------------------------------------------| | accordion | 是否开启手风琴模式 | boolean | false | | activeKey | 当前展开面板的 key | 手风琴模式：string | null 非手风琴模式：string[] | - | | arrow |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

antd-taro

安装

概述

示例

示例代码

API

Avatar 头像

属性

CSS 变量

Badge 徽标

属性

CSS 变量

Button 按钮

属性

CSS 变量

Card 卡片

属性

CheckList 可勾选列表

属性

CheckListItem

属性

CSS 变量

Collapse 折叠面板

属性