Code Monkey home page Code Monkey logo

cascader's Introduction

rc-cascader


React Cascader Component

NPM version build status Test coverage Dependencies DevDependencies npm download

Browser Support

IE Chrome Firefox Opera Safari
IE 8+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

Screenshots

Example

http://react-component.github.io/cascader/

Install

rc-cascader

$ npm install rc-cascader --save

Usage

import React from 'react';
import Cascader from 'rc-cascader';

const options = [{
  'label': '福建',
  'value': 'fj',
  'children': [{
    'label': '福州',
    'value': 'fuzhou',
    'children': [{
      'label': '马尾',
      'value': 'mawei',
    }],
  }, {
    'label': '泉州',
    'value': 'quanzhou',
  }],
}, {
  'label': '浙江',
  'value': 'zj',
  'children': [{
    'label': '杭州',
    'value': 'hangzhou',
    'children': [{
      'label': '余杭',
      'value': 'yuhang',
    }],
  }],
}, {
  'label': '北京',
  'value': 'bj',
  'children': [{
    'label': '朝阳区',
    'value': 'chaoyang',
  }, {
    'label': '海淀区',
    'value': 'haidian',
  }],
}];

React.render(
  <Cascader options={options}>
    ...
  </Cascader>
, container);

API

props

name type default description
options Object The data options of cascade
value Array selected value
defaultValue Array initial selected value
onChange Function(value, selectedOptions) callback when finishing cascader select
changeOnSelect Boolean false change value on each selection
loadData Function(selectedOptions) callback when click any option, use for loading more options
expandTrigger String 'click' expand current item when click or hover
popupVisible Boolean visibility of popup overlay
onPopupVisibleChange Function(visible) callback when popup overlay's visibility changed
transitionName String transition className like "slide-up"
prefixCls String rc-cascader prefix className of popup overlay
popupClassName String additional className of popup overlay
popupPlacement String bottomLeft use preset popup align config from builtinPlacements:bottomRight topRight bottomLeft topLeft
getPopupContainer function(trigger:Node):Node () => document.body container which popup select menu rendered into
dropdownMenuColumnStyle Object style object for each cascader pop menu
fieldNames Object { label: 'label', value: 'value', children: 'children' } custom field name for label and value and children
expandIcon ReactNode > specific the default expand icon
loadingIcon ReactNode > specific the default loading icon

option

name type default description
label String option text to display
value String option value as react key
disabled Boolean disabled option
children Array children options

Development

$ npm install
$ npm start

Test Case

$ npm test

Coverage

$ npm run coverage

License

rc-cascader is released under the MIT license.

cascader's People

Contributors

07akioni avatar adispring avatar afc163 avatar amortj avatar benjycui avatar ddcat1115 avatar dependabot-preview[bot] avatar dependabot-support avatar heskeybaozi avatar hotoo avatar loogeek avatar luolonghao avatar mdedetrich avatar mighty-phoenix avatar mrheer avatar shaodahong avatar xiabingwu avatar yesmeck avatar yiminghe avatar zombiej avatar ztplz avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.