Skip to content

Latest commit

 

History

History
38 lines (34 loc) · 2.04 KB

README.md

File metadata and controls

38 lines (34 loc) · 2.04 KB
Raw

md-chips

Material Design Chips (subset) implementation, with MDL and jQuery.

Demo

Installation

Include MDL and jQuery, as in the example above.

Markup

<div class="md-chip" data-title="chip1"></div>
<div class="md-chip" data-title="chip2">chip2 description</div>
<div class="md-chips" data-label="Tags" data-name="tags" data-deny-arbitrary-input>
  <div class="md-chip" data-title="tag1"></div>
  <div class="md-chip" data-title="tag2">tag2 description</div>
  <div class="md-chips__option" data-title="opt1"></div>
  <div class="md-chips__option" data-title="opt2">opt2 description</div>
</div>
  • md-chip class: create a chip. Outside an md-chips element, creates a simple undeletable chip.
  • data-title attribute: text of the chip, or an option's title.
  • HTML inside md-chip or md-chips__option elements: chip/option description.
  • md-chips class: creates an input field with deletable chips.
  • data-label attribute: md-chips input placeholder.
  • data-name attribute: name attribute for inputs of an md-chips element (will be an array).
  • data-deny-arbitrary-input flag attribute: include to allow input only from md-chips options.
  • md-chips__option class: create an option for md-chips.

API

  • Call init_md_chips() after your document is ready.
  • Call render_md_chips_options(jquery, json_array) to update your options. jquery should be a jQuery object with class md-chips and array should be an array of objects with the fields title and desc.
  • Call render_md_chips_loading_options(jquery) to show the "loading options" placeholder.
  • Call hook_md_chips_input(jquery) to hook input events and update your options dynamically.
  • list_md_chips(jquery) returns an array of strings containing the current chips.
  • md_chips_input_value(jquery) returns the current input value.
  • list_md_chips_options(jquery) returns an array of strings containing the current options.