at-collect

简介

收藏组件，一个小星星。

使用示例

import Collect from '@txdfe/at-collect';

class Demo extends React.Component {
  state = {
    collected: false,
    collected1: false,
    collected2: false,
    collected3: false,
    collected4: false,
  };

  onClick = () => {
    this.setState({
      collected: !this.state.collected
    });
  };

  onClick1 = () => {
    this.setState({
      collected1: !this.state.collected1
    });
  };

  onClick2 = () => {
    this.setState({
      collected2: !this.state.collected2
    });
  };

  onClick3 = () => {
    this.setState({
      collected3: !this.state.collected3
    });
  };

  onClick4 = () => {
    this.setState({
      collected4: !this.state.collected4
    });
  };

  render() {
    return (
      <div>
        <Collect
          collected={this.state.collected}
          onClick={this.onClick}
        />
        <Collect
          language="en-us"
          collected={this.state.collected1}
          onClick={this.onClick1}
        />
        <Collect
          collected={this.state.collected3}
          onClick={this.onClick3}
          hoverCollectedText="hover收藏"
          hoverUncollectedText="hover取消收藏"
        />
        <Collect
          language="en-us"
          type="button"
          collected={this.state.collected2}
          onClick={this.onClick2}
        />
        <Collect
          type="button"
          collected={this.state.collected4}
          buttonCollectedText="收藏了"
          buttonUncollectedText="还没有收藏"
          onClick={this.onClick4}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

| 参数 | 类型 | 可选值 | 默认值 | 说明 | | :--- | :--- | :--- | :--- | :--- | | collected | bool | true/false | false | 是否收藏 | | onClick | function | | () => {} | 点击回调 | | type | 枚举值 | icon, button | icon | icon模式或button模式 | | language | string | zh-cn, en-us | zh-cn | 选择语言 | | hoverCollectedText | string | | 无 | 收藏状态下icon模式hover文案，设置了这个参数，language就会失效 | | hoverUncollectedText | string | | 无 | 未收藏状态下icon模式hover文案，设置了这个参数，language就会失效 | | buttonCollectedText | string | | 无 | 收藏状态下button模式文案，设置了这个参数，language就会失效 | | buttonUncollectedText | string | | 无 | 未收藏状态下button模式文案，设置了这个参数，language就会失效 |