@txdfe/at-collect

0.2.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/at-collect

Weekly Downloads

4

Version

0.2.0

License

ISC

Unpacked Size

1.7 MB

Total Files

12

Last publish

Collaborators

  • jiangyuanzhi
  • zhzxang
  • purple-force
  • zuoqi
  • tod.zx
  • 2ehao
  • bowei.jbw
  • teamaxy
  • cyris
  • saviio