Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@txdfe/at-collect

Package Overview
Dependencies
Maintainers
3
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@txdfe/at-collect

AT业务组件 - 收藏

  • 0.2.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
7
increased by75%
Maintainers
3
Weekly downloads
 
Created
Source

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

参数类型可选值默认值说明
collectedbooltrue/falsefalse是否收藏
onClickfunction() => {}点击回调
type枚举值icon, buttoniconicon模式或button模式
languagestringzh-cn, en-uszh-cn选择语言
hoverCollectedTextstring收藏状态下icon模式hover文案,设置了这个参数,language就会失效
hoverUncollectedTextstring未收藏状态下icon模式hover文案,设置了这个参数,language就会失效
buttonCollectedTextstring收藏状态下button模式文案,设置了这个参数,language就会失效
buttonUncollectedTextstring未收藏状态下button模式文案,设置了这个参数,language就会失效

FAQs

Package last updated on 28 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc