kwc-dropdown
v1.0.1
Published
A zero-dependency Dropdown Web Component
Downloads
4
Readme
Keops's Dropdown web componenent
Try web component
clone project
npm i
npm run example
With your browser open http://localhost:1234
## Usage
Installation
Place the following <script>
near the end of your page, right before the closing tag, to enable them.
<script src="https://path_to_kwc-dropdown/dist/kwc_dropdown.js</script>"
Dans une balise <kwc-dropdown></kwc-dropdown>
créer un boutton pour ouvrir le menu déroulant (identifié avec : slot="button") et un menu (identifié avec : slot="menu")
Le boutton peut être n'importe quel élément : button, div, a, ...
Le menu peut être un élément de type UL ou de type DIV.
Un style prédéfini est appliqué au menu. Pour le désactiver utilisez le paramètre defautlStyle=false
Example
<kwc-dropdown id="dropdown" position="bottom-right">
<button slot="button">Click me</button>
<ul slot="menu">
<li id="add-folder">Ajouter un dossier</li>
<li id="add-bookmark">Ajouter un marque-page</li>
<hr style="border-top: 1px solid #bbb;">
<li id="about">A propos</li>
</ul>
</kwc-dropdown>
Parameters
| Parameter | Type | Values | Description | | ------------ | ------- | ------------ | :---------------------------------------------: | | position | string | ** | Position of the dropdown relative to the button | | defaultStyle | boolean | true / false | (default: true) apply the default css |