uxcore-collapsed-button

uxcore-collapsed-button component for uxcore.

Usage no npm install needed!

<script type="module">
  import uxcoreCollapsedButton from 'https://cdn.skypack.dev/uxcore-collapsed-button';
</script>

README

uxcore-collapsed-button

React collapsed button

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

Development

git clone https://github.com/uxcore/uxcore-collapsed-button
cd uxcore-collapsed-button
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-collapsed-button
cd uxcore-collapsed-button
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/collapsed-button

Contribute

Yes please! See the CONTRIBUTING for details.

API

Props

Name Type Required Default Comments
type string - '' 触发下拉的元素的类型，默认是文字，‘button’是按钮
onClick function - - CollapsedButton.Item 的点击回调
maxLength number - 3 超过 maxLength 将会变成下拉形式，否则平铺

使用方法


import CollapsedButton from 'uxcore-collapsed-button';

handleClick() {}

render() {
  return (
    <CollapsedButton type="button">
      <CollapsedButton.Item onClick={this.handleClick.bind(this)}>
        按钮一
      </CollapsedButton.Item>
      <CollapsedButton.Item onClick={this.handleClick.bind(this)}>
        按钮二
      </CollapsedButton.Item>
      <CollapsedButton.Item>
        按钮三
      </CollapsedButton.Item>
    </CollapsedButton>
  );
}