@txdfe/at-collect

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就会失效