@zentek/select

Zentek Aurelia-MDC Component Select

Usage no npm install needed!

<script type="module">
  import zentekSelect from 'https://cdn.skypack.dev/@zentek/select';
</script>

README

Select Component - v1.0.2

Table of contents

  1. Beschreibung
  2. Screenshots
  3. MDC
  4. Installation
  5. Einbindung in View
  6. HTML Struktur
  7. Varianten
  8. Optionen

1. Beschreibung

Select Component ist Integration von MDC Select in Aurelia.

2. Screenshots

Default state On change Seleted state
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