Aktuelle Version vom 13.05.2024: 3.20.10
Achtung: Canvas-Navi wird in der aktuellen Version nicht korrekt dargestellt. Die Pfeile werden nicht via float:right rechts positioniert, sondern direkt hinter dem Navi-Namen.
Verwenden Sie hierzu die Version: 3.14.3.
<form action="" method="post" class="uk-form-stacked uk-grid-small" uk-grid>
Input
<div class="uk-width-1-1">
<input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>" placeholder="feldname">
</div>
Mehrspaltige Inputfelder
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-form-label" for="feldname">Name</label>
<div class="uk-form-controls">
<input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>">
</div>
</div>
Textarea
<div class="uk-width-1-1 uk-margin-small-top">
<textarea name="feldname" rows="5" class="uk-textarea uk-form-small uk-resize-vertical" placeholder="feldname"><?php echo $m1[feldname]; ?></textarea>
</div>
Checkboxen
<div class="uk-width-1-2@s uk-margin-small-top">
<?php if ($m1[feldname]=="1") { $auswahl="checked"; } else { $auswahl=""; } ?>
<label>
<input class="uk-checkbox" type="checkbox" name="feldname" id="feldname" value="1" <?php echo $auswahl; ?>> Name
</label>
</div>
Select
<div class="uk-width-1-2@s uk-margin-small-top">
<label class="uk-form-label" for="feldname">Name</label>
<div class="uk-form-controls">
<select name="feldname" id="feldname" class="uk-select">
</select>
</div>
</div>
Submit
<div class="uk-width-1-1">
<input type="hidden" name="act" value="ACTNAME">
<input type="hidden" name="variable" value="<?php echo $variable; ?>">
<input type="submit" value="speichern" class="uk-button uk-button-primary" tabindex="-1">
</div>
|
.uk-input |
Add this class to <input> elements. |
|
.uk-select |
Add this class to <select> elements. |
|
.uk-textarea |
Add this class to <textarea> elements. |
|
.uk-radio |
Add this class to <input type="radio"> elements to create radio buttons. |
|
.uk-checkbox |
Add this class to <input type="checkbox"> elements to create checkboxes. |
|
.uk-range |
Add this class to <input type="range"> elements to create range forms. |
|
.uk-form-danger |
Add this class to notify the user that the value is not validated. |
|
.uk-form-success |
Add this class to notify the user that the value is validated. |
|
.uk-form-large |
Add this class to make the element larger. |
|
.uk-form-small |
Add this class to make the element smaller. |
|
.uk-form-width-large |
Applies a width of 500px. |
|
.uk-form-width-medium |
Applies a width of 200px. |
|
.uk-form-width-small |
Applies a width of 130px. |
|
.uk-form-width-xsmall |
Applies a width of 40px. |
|
.uk-form-blank |
ohne Rahmen |
|
.uk-form-stacked |
Add this class to display labels on top of controls. |
|
.uk-form-horizontal |
Add this class to display labels and controls side by side. |
|
.uk-form-label |
Add this class to define form labels. |
|
.uk-form-controls |
Add this class to define form controls. |
Um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten, sollten nicht zwingend benötigte Elemente ausgeblendet werden.
Mit UIkit bieten sich zwei Varianten an:
uk-visible@s
Element wird angezeigt, wenn das Browserfenster mindestens 640 Pixel breit ist.
uk-hidden@s
Element wird ausgeblendet, wenn das Browserfenster mindestens 640 Pixel breit ist.
Der Wert hinter @ gibt die Bildschirmbreite an:
s: >= 640px
m: >= 960px
l: >= 1200px;
xl: >= 1600px
Da mobile Geräte, wie z.B. das iPhone, lediglich 320 bis 375px aufweisen, ist die Nutzung nur dann sinnvoll,
wenn aus die Klassen uk-width-1-1 oder wk-width-1-2@s eingesetzt werden.
<div class="toggle1">
<p>Diesen Bereich sofort anzeigen</p>
<button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
mehr ...
</button>
</div>
<div class="toggle1" hidden>
<p>Diesen Bereich bei Bedarf einblenden</p>
<button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
ausblenden
</button>
</div>
UIkit bietet mehrere Möglichkeiten, Boxen mit Schatten zu versehen.
Hier die schönsten Varianten.
Auffälliger Schatten unterhalb der Box lässt das Element schweben.
<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
<div class="uk-background-default uk-padding-large">
Box shadow bottom
</div>
</div>
Animation per Mouseover
<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
<div>
<div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">
Small + Hover Large
</div>
</div>
<div>
<div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">
XLarge + Hover Medium
</div>
</div>
</div>