react-lite-dropdown

KO | EN

gitlite — search

#python #react #typescript #golang #go #android #rust #linux #macos #nodejs #java #awesome #cli #pytorch

react-lite-dropdown

(★ 46)

Dropdown menu from Talk by Teambition

react-lite-dropdown 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

React Lite Dropdown
----

Dropdown component from Talk by Teambition.

Demo http://ui.talk.ai/react-lite-dropdown/

### Properties

####Dropdown

* `displayText` `(string)`

Text to display when selected. You will get `is-chosen` in `className` of root element when it's specified.

* `defaultText` `(string.isRequired)`

Text to display when `displayText` is `undefined`.

* `name` `(string)`

CSS hook for this components, defaults to `default`. Suppose it's `x`, the generated `className` is `is-for-x`.

* `show` `(bool.isRequired)`

Defines whether `DropdownMenu` is shown or not.

* `onToggle` `(func.isRequired)`

Things happened when toggle dropdown.

* `this.props.children`

Content to render in the menu opened after clicked.

### Supposition

This component suppose you are using it in such scenarios:

* it looks like `<select>`, with default text and selected
* but you need to render arbitrary view, rather than list of items
* click events bubbles to `window` and menu is then closed

In chinese. 中文表达更明确一些, 这个组件做了一些假定, 使用需要注意:

* 基本界面类似 `<select>`, 有 选中/未选中 状态, 用 CSS hook 修改颜色
* 打开菜单具体界面不在 Component 中控制, 要以 `this.props.children` 传入
* 通过监听 window 的 click 事件关闭菜单, 注意不好截断

### Usage

```bash
npm i --save react-lite-dropdown
```

Read [src/main.jsx](main)(compiles with Babel) for details:

[main]: https://github.com/teambition/react-lite-dropdown/blob/gh-pages/src/main.jsx

```jsx
import {default as React} from 'react';
import './demo.css';

import {default as LiteDropdown} from 'react-lite-dropdown';
import 'react-lite-dropdown/src/style.css'; // CSS if you need

var languages = 'CoffeeScript PureScript Elm CirruScript'.split(' ');

var PageApp = React.createFactory(App);

var demo = document.querySelector('.demo');

React.render(PageApp(), demo);
```

### Develop

```text
npm i
```

You need a static file server for the HTML files. Personally I suggest using Nginx.

Develop:

```bash
gulp html # regenerate index.html
webpack-dev-server --hot # enable live-reloading
```

Build (Pack and optimize js, reivision js and add entry in `index.html`):

```bash
gulp build
```

### License

MIT

react-lite-dropdown

react-lite-dropdown 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-lite-dropdown

react-lite-dropdown 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README