Tag 标签

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

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

何时使用

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

• 进行分类。

使用注意点

• 目前 0.x 版本的 tag 存在一个默认的 margin，如果你不想要有，可以在配置平台中配置移除。1.x 版本会默认移除。

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

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

API

标签

代码示例

关闭动效

默认情况下 Tag 使用了出现和关闭的动效，如果某些情况下，您不需要动效，可以使用 animation 属性进行关闭。

查看源码在线预览

import { Tag } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Tag shape="deletable">默认有动效的 Tag</Tag> <br />
    <Tag shape="deletable" animation={false}>
      关闭动效的 Tag
    </Tag>
  </div>,
  mountNode
);

受控型可选择标签

defaultSelected 提供了非受控的选中状态，selected 提供了受控的选中状态。对于可选择标签而言，除了使用组件提供的默认行为，用户还可以通过自行控制组件状态来实现自定义组件的选择行为。

查看源码在线预览

import { Tag, Button } from "@icedesign/base";
class ControlledTag extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      select: false
    };
  }
  onClick() {
    this.setState(prevState => {
      return {
        select: !prevState.select
      };
    });
  }
  render() {
    const label = this.state.select ? "反选 Tag" : "选中 Tag";
    return (
      <div>
        <Button onClick={::this.onClick} type="normal">
          {label}
        </Button>
        <Tag shape="selectable" selected={this.state.select}>
          Controlled Selectable Tag
        </Tag>
      </div>
    );
  }
}
ReactDOM.render(<ControlledTag />, mountNode);

自定义的可关闭标签

组件提供了 closed 属性用于实现关闭行为的受控。对于可关闭标签而言，除了使用组件提供的默认行为，用户还可以实现自定义的组件关闭行为。

查看源码在线预览

import { Tag } from "@icedesign/base";
class ControlledClosableTag extends React.Component {
  static propTypes = {
    value: React.PropTypes.string
  };
  constructor(props) {
    super(props);
    this.state = {
      closed: false
    };
  }
  onClose() {
    this.setState(prevState => {
      return { closed: !prevState.closed };
    });
  }
  render() {
    const { value } = this.props;
    return (
      <Tag
        shape="deletable"
        closed={this.state.closed}
        onClose={::this.onClose}
        value={value}
      >
        Controlled Deletable Tag
      </Tag>
    );
  }
}
ReactDOM.render(<ControlledClosableTag value="hello world" />, mountNode);

标签形态

closable 和 interactive 则会直接隐藏超出区域的文本。建议不要在标签中使用过长的文本，对于 selectable, link, readonly 这三种 tag 而言，超出宽度的文本会使用 … 表示。可以通过 type 属性来控制标签在某种形态下的类型。readonly 只读型标签：无交互行为。并且，只读型标签没有级别。link 跳转型标签interactive 可互动标签closable 可关闭标签selectable 可选择标签通过设置 shape 属性值来更改标签的类型，可选值包括：标签有四种类型：可选择标签、可关闭标签、可互动标签、跳转型标签和只读型标签。

查看源码在线预览

import { Tag } from "@icedesign/base";
function onClose(value, closed) {
  console.log(value, closed);
}
function onChange(count) {
  console.log(count);
}
ReactDOM.render(
  <div className="tag-list">
    <div className="tag-list-item">
      <Tag shape="selectable" type="normal">
        Normal Selectable Tag
      </Tag>
      <Tag shape="selectable" type="primary">
        Primary Selectable Tag
      </Tag>
      <Tag shape="selectable" type="secondary">
        Secondary Selectable Tag
      </Tag>
    </div>
    <div className="tag-list-item">
      <Tag
        shape="deletable"
        type="normal"
        value="Normal Deletable Tag"
        onClose={onClose}
      >
        Normal Deletable Tag
      </Tag>
      <Tag
        shape="deletable"
        type="primary"
        value="Primary Deletable Tag"
        onClose={onClose}
      >
        Primary Deletable Tag
      </Tag>
      <Tag
        shape="deletable"
        type="secondary"
        value="Secondary Deletable Tag"
        onClose={onClose}
      >
        Secondary Deletable Tag
      </Tag>
    </div>
    <div className="tag-list-item">
      <Tag shape="interactive" count={2} onChange={onChange}>
        Interfactive Tag
      </Tag>
    </div>
    <div className="tag-list-item">
      <Tag shape="link" type="normal">
        <a href="//www.alibaba.com" target="_blank">
          Normal Link Tag
        </a>
      </Tag>
      <Tag shape="link" type="primary">
        <a href="//www.alibaba.com" target="_blank">
          Primary Link Tag
        </a>
      </Tag>
      <Tag shape="link" type="secondary">
        <a href="//www.alibaba.com" target="_blank">
          Secondary Link Tag
        </a>
      </Tag>
    </div>
    <div className="tag-list-item">
      <Tag shape="readonly">Readonly Tag</Tag>
    </div>
  </div>,
  mountNode
);

尺寸

则默认使用 medium 尺寸的值。需要注意的，large 尺寸只是为了兼容表单场景而存在，实际并不存在 large 尺寸，如果用户设置了 size='large'，通过设置 size 为 small medium 可分别创建小标签、中等标签，若不设置 type 值则为中等标签。

查看源码在线预览

import { Tag } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Tag shape="selectable">Medium Tag</Tag>
    <Tag shape="selectable" size="small">
      Small Tag
    </Tag>
  </div>,
  mountNode
);

相关区块

暂无相关区块