Skip to content

Latest commit

 

History

History
54 lines (38 loc) · 1.53 KB

README.md

File metadata and controls

54 lines (38 loc) · 1.53 KB
Raw

ESL Select

Version: 1.1.0

Authors: Alexey Stsefanovich (ala'n)

ESLSelect is a component on top of native select that brings more customization features. Uses "select with dropdown" view. Supports both single and multiple selection.

Attributes / Properties

  • placeholder - placeholder text for element

  • has-value-class - class(es) to mark not empty state

  • has-focus-class - class(es) for focused state. Select ia also focused if the dropdown list is opened

  • dropdown-class - class(es) for select dropdown

  • select-all-label - select all options text

  • more-label-format - text to add when there is not enough space to show all selected options inline. Supports {rest}, {length} and {limit} placeholders

  • open - dropdown open marker

  • disabled - disabled state marker

  • pin-selected - marker for selecting items to be pinned to the top of the dropdown

Example

<esl-select class="form-group"
            pin-selected
            placeholder="Color"
            select-all-label="All Colors">
  <label for="color_field" class="form-label">Color</label>
  <select esl-select-target
          multiple
          id="color_field"
          name="color_field"
          class="form-control">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#ff0">Yellow</option>
    <option value="#0ff">Light Blue</option>
    <option value="#f0f">Purple</option>
  </select>
</esl-select>