Ionic Radio-Buttons
Ionic-Radiobuttons ähneln dem standardmäßigen Eingabeelement type="radio". Im Folgenden werden moderne Radiobuttons im App-Stil gezeigt.
Das name-Attribut der input-Elemente mit type="radio" in jedem item-radio ist identisch. Die Klasse radio-icon wird verwendet, um zu steuern, ob das Symbol angezeigt wird.
Ionic verwendet das <label>-Element für die Radio-Optionen, wodurch sie leichter angeklickt werden können.
Beispiele
<div class="list">
<label class="item item-radio">
<input type="radio" name="group" value="go" checked="checked">
<div class="radio-content">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="python">
<div class="radio-content">
<div class="item-content">
Python
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="ruby">
<div class="radio-content">
<div class="item-content">
Ruby
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value=".net">
<div class="radio-content">
<div class="item-content">
.Net
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="java">
<div class="radio-content">
<div class="item-content">
Java
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
<label class="item item-radio">
<input type="radio" name="group" value="php">
<div class="radio-content">
<div class="item-content">
PHP
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
</div>
Ausprobieren »
Das Ergebnis ist wie folgt:
Andere Erweiterungen