@zentek/select NPM

Select Component - v1.0.2

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