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