• barrierefrei
    • Schriftgröße anpassen:
    Nutzen Sie die Browser-Funktion mit
    STRG + und STRG -
    MacOS: command + und command -

UIKIT

Formulare mit UIKIT gestalten

gefällt mir Teilen
Facebook
X/Twitter
WhatsApp
Pinterest
Linkedin
Flipboard
Link kopieren
E-Mail

UIKIT-Funktionsbeschreibung Formularfelder

.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.
gefällt mir Teilen

Sonderzeichen in Eingabefeldern korrekt anzeigen

gefällt mir Teilen

Elemente aufgrund Bildschirmbreite ein- und ausblenden

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.

getuikit.com/docs/visibility

gefällt mir Teilen

Elemente ein-/ausklappen

<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>

 

gefällt mir Teilen

UIkit: Schatten

UIkit bietet mehrere Möglichkeiten, Boxen mit Schatten zu versehen.
Hier die schönsten Varianten.

Box shadow bottom

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>

getuikit.com

Hover

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>

 

gefällt mir Teilen