column-view-component

KO | EN

gitlite — search

#javascript #python #react #typescript #golang #android #machine-learning #rust #linux #docker #java #awesome #cli #kubernetes

column-view-component

(★ 20)

Web Component for Miller columns (aka. Column View)

column-view-component 최신버젼 다운로드

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# &lt;column-view&gt;

A Polymer Web Component for Miller columns (aka. Column View) with keyboard navigation.

### [Docs & Demo](http://jupiterrr.github.io/column-view-component/components/column-view/)
[demo page only](http://jupiterrr.github.io/column-view-component/components/column-view/demo/demo.html)

## Install

Install the component using [Bower](http://bower.io/):

```sh
bower install column-view --save
```

## Usage

1. Import Web Components' polyfill:

```html
    <script src="bower_components/platform/platform.js"></script>
    ```

2. Import Custom Element:

```html
    <link rel="import" href="bower_components/column-view/dist/column-view.html">
    ```

3. Insert Custom Element

```html
    <column-view ondata="sourceFn"></column-view>
    ```

4. Set up your data source

Example:

```html
    <script type="text/javascript">
      var data = {
        0: {name: "root", childIDs: [1,2]}, // not vissible
        1: {name: "Item 1", childIDs: [3,4,5]},
        2: {name: "Item 2"},
        3: {name: "Item 3"},
        4: {name: "Item 4"},
        5: {name: "Item 5"}
      };

## &lt;column-view&gt;

### Attributes

Attribute | Options | Default | Description
--- | --- | --- | ---
`ondata` | *Function(String value, Function callback)* | None. | A function to be called for each selected item. This function can either pass child items or an HTML element to the callback function.<br><br>Callback:<br>`callback({dom: <HTMLElement>})` <br> `callback({items: [{name: <String>, value: <String, Number>}, ...]})`
`data` | *JSON* | None. | \*work in progress\* <br>`{"fruits": {"apple": "<b>Apple</b>", "grape": "<b>Grape</b>"}}`
`path` | *String* | `""` | Defines the path of items the column-view is initialized with. When the element is ready the `ondata` method is called with each item ID. Each call results in a new column. <br><br>IDs are speareated by `/`.<br><br>Example: `path="1/2/3"`

### Methods

Method | Parameters | Returns | Description
--- | --- | --- | ---
`back()`  | None. | Nothing. | Deselects last selected item

### Properties

Method | Returns | Description
--- | --- | ---
`canMoveBack` | *Boolean* | ...

### Events

Event | Description
--- | ---
`change` | Fires when selection changes.

## &lt;button is="column-view-back"&gt;

With `is="column-view-back"` you can extend a button so that when you click it you move the selection one column to the left.

```html
<button is="column-view-back" for="columnViewID">back</button>
<column-view id="columnViewID"></column-view>
```

### Attributes

Attribute | Options | Default | Description
--- | --- | --- | ---
`for` | *ID* | None. | The ID of a column-view

<!--

## Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

1. Install [Bower](http://bower.io/) & [Grunt](http://gruntjs.com/):

```sh
    $ [sudo] npm install -g bower grunt-cli
    ```

2. Install local dependencies:

```sh
    $ bower install && npm install
    ```

3. To test your project, start the development server and open `http://localhost:8000`.

```sh
    $ grunt server
    ```

4. To build the distribution files before releasing a new version.

```sh
    $ grunt build
    ```

5. To provide a live demo, send everything to `gh-pages` branch.

```sh
    $ grunt deploy
    ```
-->

## Setup (run it locally)

1. Install dependencies: `bower install`
* Start development server: `polyserve` <br>(`npm install polyserve -g`)
* open [http://localhost:8080/components/column-view/demo/demo.html](http://localhost:8080/components/column-view/demo/demo.html)

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License

[MIT License](http://opensource.org/licenses/MIT)

column-view-component

column-view-component 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

column-view-component

column-view-component 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README