This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0 1.1.0
ELM tree view component
version 2.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 2.0.0
Committed At 2018-02-14 08:33:51 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

Modules

README

elm-treeview

Build Status

A customizable ELM treeview component.

DEMOS

Example

Basic example with defaut options:

import Html
import Treeview

styles : Styles
styles = 
  [ T.Style "folder" ("folder yellow", "folder-open yellow") ""
  , T.Style "archive" ("file-archive-o", "file-archive-o") ""
  , T.Style "word" ("file-word-o", "file-word-o") "blue"
  , T.Style "image" ("file-image-o", "file-image-o") ""
  , T.Style "pdf" ("file-pdf-o", "file-pdf-o") "red"
  , T.Style "powerpoint" ("file-powerpoint-o", "file-powerpoint-o") "orange"
  , T.Style "excel" ("file-excel-o", "file-excel-o") "green"
  ]

model : Model
model = 
  [ T.node "pA" "Project A" "folder" False <| Just [
      T.node "pAg1" "Report 1" "folder" False <| Just [
        T.node "pAg1f1" "report_1_revA.pdf" "pdf" True Nothing,
        T.node "pAg1f2" "report_1_revB.pdf" "pdf" True Nothing,
        T.node "pAg1f3" "report_1_revC.pdf" "pdf" True Nothing
      ],
      T.node "pAg2" "Report 2" "folder" False <| Just [
        T.node "pAg2f1" "report_2_revA.pdf" "pdf" True Nothing,
        T.node "pAg2f2" "report_2_revB.pdf" "pdf" True Nothing
      ],
      T.node "pAf1" "lorem.doc" "word" True Nothing,
      T.node "pAf2" "ipsum.xls" "excel" True Nothing
    ],
    T.node "pB" "Keynote" "folder" False <| Just [
      T.node "pBf1" "workshop_part1.ppt" "powerpoint" True Nothing,
      T.node "pBf2" "workshop_part2.ppt" "powerpoint" True Nothing,
      T.node "pBf3" "image1.png" "image" True Nothing,
      T.node "pBf4" "image2.ppt" "image" True Nothing,
      T.node "pBf5" "image3.ppt" "image" True Nothing,
      T.node "pBf5" "image4.ppt" "image" True Nothing
    ]
  ]

config : T.Config
config = T.default styles


main : Program Never T.Model T.Msg 
main =
  Html.beginnerProgram
    { model = model
    , view = T.view config
    , update = T.update 
    }

With search input:

config : T.Config
config = 
  let
    d = T.default styles
  in
    {d | search = { enable = True}}

With checkbox selection:

config : T.Config
config = 
  let
    d = T.default styles
  in
    {d | checkbox = { enable = True, multiple = True, cascade = True}}

Theme

See the treeview.scss file in the styles folder to customize the theme.

Options

| Name | Type | Default | Description | | ------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------- | | checkbox.enable | Bool | False | Activate the checkbox selection for each node. | | checkbox.multiple | Bool | False | Multiple nodes can be selected. | | checkbox.cascade | Bool | False | Enable the cascading selection (the children node will selected if the parent is selected). | | search.enable | Bool | False | Activate the search toolbar. | | sort | Sort | None | Sort the nodes: Asc = ascending, Desc = descending. | | look.theme | String | "" | Apply the theme. | | look.styles | [Styles] | [] | Define the styles (CSS class and icons) for nodes. |

Documentation

See documentation here.

Usage

To run the examples:

$ cd examples
$ npm i
$ npm run dev

Open localhost:8080.

TODO

  • [x] search toolbar
  • [x] checkbox
  • [ ] ajax
  • [ ] interface for JS
  • [ ] other themes
  • [ ] contextual menu
  • [ ] unit test

Contributing

Feedback and contributions are very welcome.

License

This project is licensed under MIT.