Skip to content

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

License

Notifications You must be signed in to change notification settings

resolvedxd/bulmaselect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

264bf2d · Jul 11, 2023

History

10 Commits
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Oct 1, 2020
Jul 11, 2023

Repository files navigation

bulmaselect

License Downloads Bundle Size Version

About

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

Example

<!DOCTYPE html>

<html>

<body>
  <div id="ms"></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bulmaselect@latest/dist/bulmaselect.min.js"></script>

<script>

// 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)

</script>

</html>

License

MIT

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published