@minna-ui/select NPM

`@minna-ui/select`

A simple input select web component similar to the browser native <select> but better looking and more enjoyable to use. It can be used standalone, in Svelte projects, or any JavaScript project.

TODO: Write note about @minna-ui/css interplay/dependency.

TODO: Example image.

TODO: Add link to demo and documentation page.

Usage

Standalone

The easiest way to use the component is to add the CDN hosted version directly in your HTML.

TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

Add the CSS and JS to your document, inside the <head></head>:

 <link href="https://cdn.jsdelivr.net/npm/@minna-ui/select/dist/index.css" rel="stylesheet"/>

 <script src="https://cdn.jsdelivr.net/npm/@minna-ui/select"></script>

Or use a specific version:

<link
  href="https://cdn.jsdelivr.net/npm/@minna-ui/select@0.5.0/dist/index.css"
  rel="stylesheet"
/>

<script src="https://cdn.jsdelivr.net/npm/@minna-ui/select@0.5.0"></script>

Add an element where you want the component to show in your document <body></body>:
```
<div id="minna-select"></div>
```

Initialise the component:

<script>
  new MinnaSelect({
    target: document.querySelector('#minna-select'),
    data: {},
  });
</script>

Svelte projects

Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

Install the package:
```
yarn add @minna-ui/select
```

Add to your Svelte component:

MySvelteComponent.html:

<MinnaSelect />

<script>
  import MinnaSelect from '@minna-ui/select';

  export default {
    components: {
      MinnaSelect,
    },
  };
</script>

Other JavaScript projects

This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

Install the package:
```
yarn add @minna-ui/select
```

Add to your files:

my-example.html:

<div id="minna-select"></div>

my-example.js:

import MinnaSelect from '@minna-ui/select';

new MinnaSelect({
  data: {},
  target: document.querySelector('#minna-select'),
});

Licence

@minna-ui/select is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.

component design-system minna-ui postcss svelte svelte-components ui-components wearegenki web-components

@infinitebrahmanuniverse/nolb-_minn @everything-registry/sub-chunk-606 @zalastax/nolb-_minn minna-ui

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago