About The Project

Chip selector is a universal tool that helps you display a chip selector to your project. The chip selector has an input where you can filter out results. It can be linked to a form <input type="checkbox"> that can be manipulated in real time.

Works With

This component has been made to be versatile, it includes both ES6 and UMD builds ( module / bundled ).

• Vanilla javascript / html via UMD embed
• Typescript
• Next.js
• React.js
• • example - Functional
• Angular
• Bootstrap
• JQuery

Getting Started

Git clone this repository.

Prerequisites

Install npm - tested with at least version 8.

• npm

  npm install npm@latest -g

Installation

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.

1. Clone the repo

   git clone https://github.com/raduzoom/dzs-chip-selector

2. Install NPM packages

   npm install

3. To develop -

   npm run dev

Projects

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

Code explanation

Can be used as a web component for creating a chip selector.

Allows the chip selector to feed from multiple origins. The chip selector allows the user to select one or more options from a list of items. It can either get the options from a form element or from the "data-persistentOptions" attribute on the main element.

The class has various methods for initializing the structure of the component, handling user input, and updating the view. The class also uses several imported functions and constants from other modules for specific tasks such as removing children from a DOM element, getting the computed style of an element, and inserting HTML.

The class also extends the HTMLElement interface to add a webComponent property and the Window interface to add a global function "dzs_initDzsChipSelector" which can be used to initialize the component on an HTML element.

Options

Roadmap

• [x] Add Changelog
• [x] Add back to top links
• [] Add Additional Templates w/ Examples

See the open issues for a full list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Your Name - @ZoomItFlash - [email protected]

Project Link: https://github.com/raduzoom/dzs-chip-selector#readme