Tag 标签

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

标签用于标记事物的属性和维度，或者可以使用标签来对一组事物分类。

何时使用

  • 用于标记事物的属性和维度。

  • 进行分类。

使用注意点

  • 虽然可以设置 size 属性取值 large，但该值只是为了兼容表单场景，实际取值时 large 等同于 medium。

  • 不建议在 Tag 中使用大段文本。

API

Tag

参数说明类型默认值
size标签的尺寸（large 尺寸为兼容表单场景 large = medium）可选值:'small', 'medium', 'large'Enum'medium'
type标签的类型可选值:'normal', 'primary'Enum'normal'
animation是否开启动效Booleanfalse
afterAppear标签出现动画结束后执行的回调签名:Function() => voidFunctionfunc.noop
onClick点击回调签名:Function() => voidFunctionfunc.noop

Tag.Closeable

参数说明类型默认值
closeAreacloseable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮可选值:'tag', 'tail'Enum-
size标签的尺寸（large 尺寸为兼容表单场景 large = medium）可选值:'small', 'medium', 'large'Enum-
onClose点击关闭按钮时的回调签名:Function(from: String) => Boolean参数:from: {String} 事件来源, tag: 标签体点击, tail: 关闭按钮点击返回值:{Boolean} true则关闭, false阻止关闭Function-
afterClose标签关闭后执行的回调签名:Function() => voidFunction-
onClick点击回调签名:Function() => voidFunction-

Tag.Selectable

参数说明类型默认值
checked标签是否被选中，受控用法tag checked or not, a controlled wayBoolean-
defaultChecked标签是否默认被选中，非受控用法tag checked or not by default, a uncontrolled wayBoolean-
onChange选中状态变化时触发的事件签名:Function(checked: Boolean, e: Event) => void参数:checked: {Boolean} 是否选中e: {Event} Dom 事件对象Functionfunc.noop
disabled标签是否被禁用Boolean-

ARIA and KeyBoard

按键说明
SPACE选择,取消或删除当前标签

代码示例

基本用法

通过设置 type 属性来控制标签的展示类型，可选值包括：normal, primary

建议不要在标签中使用过长的文本，超出宽度的文本会使用 … 表示。

Tag 标签 - 图1

查看源码在线预览

  1. import { Tag, Icon } from '@alifd/next';
  3. const {Group: TagGroup} = Tag;
  5. ReactDOM.render(<div className="tag-list">
  6.     <h4>large size</h4>
  7.     <TagGroup>
  8.         <Tag type="normal" size="large">Normal large Tag</Tag>
  9.         <Tag type="primary" size="large">Primary large Tag</Tag>
  10.         <Tag size="large"><Icon type="smile" /> Tag With Icon</Tag>
  11.     </TagGroup>
  13.     <h4>medium(default) size</h4>
  14.     <TagGroup>
  15.         <Tag type="normal" size="medium">Normal Tag</Tag>
  16.         <Tag type="primary">Primary Tag</Tag>
  17.         <Tag><Icon type="smile" /> Tag With Icon</Tag>
  18.     </TagGroup>
  20.     <h4>small size</h4>
  21.     <TagGroup>
  22.         <Tag type="normal" size="small">Normal Small Tag</Tag>
  23.         <Tag type="primary" size="small">Primary Small Tag</Tag>
  24.         <Tag size="small"><Icon type="smile" /> Tag With Icon</Tag>
  25.     </TagGroup>
  27.     <h4>link tag</h4>
  28.     <TagGroup>
  29.         <Tag type="normal"><a href="//www.alibaba.com" target="_blank">normal Link Tag</a></Tag>
  30.         <Tag type="primary"><a href="//www.alibaba.com" target="_blank">primary Link Tag</a></Tag>
  31.         <Tag size="small"><a href="//www.alibaba.com" target="_blank"><Icon type="smile" /> Link Tag With Icon</a></Tag>
  32.     </TagGroup>
  33. </div>,
  34. mountNode);

可选中标签

Tag.Selectable 可以用于一些轻量的需要选中状态的场景，可作为 checkbox 使用。

该组件提供了受控和非受控两种用法，但强烈建议以受控方式使用。

SelectableTag 继承自 Tag，所以类型(type)、大小(size)、动效(animation)等参数的用法与 Tag 保持一致。

Tag 标签 - 图2

查看源码在线预览

  1. import { Tag } from '@alifd/next';
  3. const {Group: TagGroup, Selectable: SelectableTag} = Tag;
  4. const dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];
  6. class Demo extends React.Component {
  7.     state = {
  8.         value: ['I like orange', 'disabled & checked'],
  9.         singleValue: 'selectable tag'
  10.     };
  12.     handleChange(name, checked) {
  13.         const {value} = this.state;
  14.         const next = checked ? [...value, name] : value.filter(n => n !== name);
  16.         this.setState({value: next});
  17.     }
  19.     handleChangeSingle(name, checked) {
  20.         const {singleValue} = this.state;
  21.         const next = checked ? name : '';
  23.         this.setState({singleValue: next});
  24.     }
  26.     renderTagList(props) {
  27.         const {value} = this.state;
  29.         return dataSource.map((name, i) => (
  30.             <SelectableTag key={name}
  31.                 checked={value.indexOf(name) > -1}
  32.                 disabled={i > 2}
  33.                 size={i === 2 ? 'small' : undefined}
  34.                 onChange={this.handleChange.bind(this, name)}
  35.                 {...props}>{name}</SelectableTag>
  36.         ));
  37.     }
  39.     renderTagListSingle(props) {
  40.         const {singleValue} = this.state;
  42.         return dataSource.map((name, i) => (
  43.             <SelectableTag key={name}
  44.                 checked={singleValue === name}
  45.                 disabled={i > 2}
  46.                 size={i === 2 ? 'small' : undefined}
  47.                 onChange={this.handleChangeSingle.bind(this, name)}
  48.                 {...props}>{name}</SelectableTag>
  49.         ));
  50.     }
  52.     render() {
  53.         return (
  54.             <div className="tag-list">
  55.                 <h4>type: 'default'</h4>
  56.                 <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>
  57.                 <h4>type: 'primary'</h4>
  58.                 <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>
  59.                 <h4>Controlled Tags: Only one selected at a time</h4>
  60.                 <TagGroup>{this.renderTagListSingle({type: 'normal'})}</TagGroup>
  61.             </div>
  62.         );
  63.     }
  64. }
  66. ReactDOM.render(<Demo />, mountNode);

可关闭标签

Tag.Closeable 可以用于一些轻量的需要选中状态的场景。特别注意: closeArea=tail 以及在Tag.Closeable中放入a标签 都与无障碍要求不符,请谨慎使用

Tag 标签 - 图3

查看源码在线预览

  1. import { Tag } from '@alifd/next';
  3. const {Group: TagGroup, Closeable: CloseableTag} = Tag;
  5. const handler = from => {
  6.     console.log(`close from ${from}`);
  7.     return false;
  8. };
  10. class Demo extends React.Component {
  11.     renderTagList (option) {
  12.         return [
  13.             <CloseableTag key={'tag-1'} type={option.type}>{option.type}</CloseableTag>,
  14.             <CloseableTag key={'tag-2'} type={option.type} disabled>{option.type} {' disabled '}</CloseableTag>
  15.         ];
  16.     }
  18.     renderCloseAreaTags () {
  19.         return ['tag', 'tail'].reduce((prev, curr) => prev.concat([
  20.             <CloseableTag key={`tag-${curr}-1`} closeArea={curr}>closeArea {curr}</CloseableTag>,
  21.             <CloseableTag key={`tag-${curr}-2`} type="primary" closeArea={curr}>closeArea {curr}</CloseableTag>
  22.         ]), []);
  23.     }
  24.     render() {
  25.         return (
  26.             <div className="tag-list">
  27.                 <h4>type: 'normal'</h4>
  28.                 <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>
  29.                 <h4>type: 'primary'</h4>
  30.                 <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>
  31.                 <h4>closeArea: ['tag', 'tail']</h4>
  32.                 <TagGroup>
  33.                     {this.renderCloseAreaTags()}
  34.                 </TagGroup>
  35.                 <h4>close handler</h4>
  36.                 <TagGroup>
  37.                     <CloseableTag onClose={() => true}> onClose allow close</CloseableTag>
  38.                     <CloseableTag onClose={() => false}> onClose prevent close</CloseableTag>
  39.                     <CloseableTag onClose={handler}> onClose from </CloseableTag>
  40.                     <CloseableTag afterClose={() => console.log('after close')}>after Close</CloseableTag>
  41.                 </TagGroup>
  42.                 <h4>closeable link tag</h4>
  43.                 <TagGroup>
  44.                     <CloseableTag type="primary"><a href="//www.alibaba.com" target="_blank">Primary Link Tag</a></CloseableTag>
  45.                     <CloseableTag type="normal"><a href="//www.alibaba.com" target="_blank">normal Link Tag</a></CloseableTag>
  46.                 </TagGroup>
  47.             </div>
  48.         );
  49.     }
  50. }
  52. ReactDOM.render(<Demo />, mountNode);

无障碍

组件已支持无障碍。关于键盘操作请参考ARIA and KeyBoard。

Tag 标签 - 图4

查看源码在线预览

  1. import { Tag, Icon } from '@alifd/next';
  3. const {Group: TagGroup} = Tag;
  6. const dataType = ['全部', '衣服', '手机', '化妆品'];
  9. class Demo extends React.Component {
  11.     constructor(props) {
  12.         super(props);
  13.         this.state = {
  14.             name:''
  15.         };
  16.         this.onclick = this.onclick.bind(this);
  17.     }
  18.     onclick(v) {
  19.         this.setState({name: v.item});
  20.     }
  21.     render() {
  22.         return (<div>
  23.             <TagGroup>
  24.                 {dataType.map(item => <Tag type="normal" key={item} size="medium"  onClick={() => this.onclick({item})} >{ item }</Tag>) }
  25.             </TagGroup>
  26.             {this.state.name}
  27.         </div>);
  28.     }
  29. }
  30. ReactDOM.render(<Demo />, mountNode);

相关区块

Tag 标签 - 图5

暂无相关区块