README
Select Component - v1.0.2
Table of contents
1. Beschreibung
Select Component ist Integration von MDC Select in Aurelia.
2. Screenshots
Default state | On change | Seleted state |
---|---|---|
3. MDC
MDC Select provides Material Design single-option select menus.
It supports using the browser's native <select>
element, or a MDC Menu.
It is fully accessible, and fully RTL-aware.
Bemerkung:
Die MDC-Doku zeigt immer die letzte Version, was nicht unbedingt mit benutzte Version von MDC in dieser Komponente übereinstimmt.
Am Besten schaut man die Doku in node_modules/@material/select
4. Installation
npm install @zentek/select --save
5. Einbindung in View
Um Select in View einzubinden braucht man 2 Includes:
<template>
<require from="@zentek/select/select-zen"></require>
<require from="@zentek/select/option/zen-select-option"></require>
...
</template>
6. HTML Struktur
<select-zen view-model.ref="_components.slSelect"
label="Wählen Sie bitte die Info"
class="full-width"
onchange.call="_changeSelect($event)">
<zen-select-option
selected="true"
disabled="true">
</zen-select-option>
<zen-select-option
label="Browser Info"
value="browser-info">
</zen-select-option>
<zen-select-option
label="Screen Info"
value="screen-info">
</zen-select-option>
</select-zen>
HTML-Struktur besteht aus zwei Teilen:
- Select
<select-zen>
mit unterschiedlichen Parametern (sieh Optionen) - Select-Option
<zen-select-option>
7. Varianten
Select mit ausgewählter Option
Standardmäßig, <select>
benutzt erstes Select-Option mit Parameter selected="true"
.
<zen-select-option
label="Browser Info"
value="browser-info"
selected="true">
</zen-select-option>
Select mit Label als default Platzhalter
Standardmäßig, <select>
benutzt erstes Select-Option mit Parameter selected="true"
.
Falls man Label als Platzhalter will, kann man folgende Select-Option benutzen:
<zen-select-option
selected="true"
disabled="true">
Disabled Select Option
Man kann bestimmte Optionen disabled mit Parameter disabled="true"
machen.
<zen-select-option
label="Browser Info"
value="browser-info"
disabled="true">
</zen-select-option>
8. Optionen
Select-Parmeter
Parameter | Typ | Beschreibung |
---|---|---|
label="My Text" |
String | Text für die Darstellung von Label im Select |
class="my-css" |
CSS-Klassen als String | Optionale CSS-Klassen(getrennt durch Leerzeichen z.B. "my-css1 my css2" )Mögliche Werte sieh CSS-Klassen |
onchange.call="myFunction($event)" |
Funktionsname als String | Callback-Funktion um onchange zu agieren |
Select-Option-Parmeter
Parameter | Typ | Beschreibung |
---|