https://github.com/resolvedxd/bulmaselect

Javascript library for creating accessible multiselect elements, themed around the bulma css framework
https://github.com/resolvedxd/bulmaselect

bulma bulma-css bulma-extension multiselect multiselectdropdown

Last synced: 8 days ago
JSON representation

Javascript library for creating accessible multiselect elements, themed around the bulma css framework

• Host: GitHub
• URL: https://github.com/resolvedxd/bulmaselect
• Owner: resolvedxd
• License: mit
• Created: 2021-10-20T15:23:10.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T07:42:49.000Z (over 1 year ago)
• Last Synced: 2024-12-28T08:06:09.360Z (about 1 month ago)
• Topics: bulma, bulma-css, bulma-extension, multiselect, multiselectdropdown
• Language: JavaScript
• Homepage:
• Size: 26.4 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bulmaselect

[![License](https://img.shields.io/npm/l/bulmaselect)][LICENSE]

[![Downloads](https://img.shields.io/npm/dw/bulmaselect)][PACKAGE]

[![Bundle Size](https://img.shields.io/bundlephobia/min/bulmaselect)][PACKAGE]

[![Version](https://img.shields.io/npm/v/bulmaselect?color=orange)][PACKAGE]

## About

Bulmaselect is a fast multiselect library for the web written in vanilla JavaScript. While styled like [Bulma][BULMA], it can work anywhere and has a variety of options to choose from.

## Example

```HTML

  


// Locale options used for strings

const englishLocale = {

  btnNoSelection: "Nothing selected", // When no items are selected

  searchPlaceholder: "Search", // The placeholder text in the search bar

}

// List of options. These are the current defaults. Only specify what you want to differ from the default.

const config = {

  isOpen: false, // Whether to open the dropdown by default. Defaults to false.

  keepOpen: false, // Whether to keep the dropdown open on clickoff. Defaults to false.

  injectStyle: true, // Whether to inject the default CSS. Defaults to true.

  btnMaxLabels: 3, // The max labels to show on the button before elipsing text. Defaults to 3.

  btnDelimiter: ",", // The delimiter (i.e ,) between labels on the button. Defaults to `, `.

  searchEnable: false, // Whether to show the searchbar or not. Defaults to false.

  locale: englishLocale, // The locale option object, configured above. Defaults to English.

  options: ["a", "b", "c"], // The actual data to send to the select. Put your array of objects here. Needed.

};

// Creates a multiselect with your options.

let ms = new Bulmaselect("ms", config)

```

## License

[MIT][LICENSE]

[BULMA]: https://bulma.io "Bulma"

[CHANGELOG]: CHANGELOG.md "Changelog File"

[PACKAGE]: https://www.npmjs.com/package/bulmaselect "Bulmaselect Package"

[LICENSE]: LICENSE "MIT License"