UIkit: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „== Less Strategie == === UIKit mit Yarn installieren === Yarn ist ein Paketmanager. Wenn dieser installiert ist kann man es einfach hinzufügen. Hinweis:…“) |
|||
| Zeile 25: | Zeile 25: | ||
Erzeugt ein Theme CSS Dateien | Erzeugt ein Theme CSS Dateien | ||
| + | |||
| + | == UIKit Events == | ||
| + | Die UIKit Komponenten stellen Events zur Verfügung die man für eigene Skripte nutzen kann. | ||
| + | |||
| + | === Beispiele === | ||
| + | <syntaxhighlights lang="javascript"> | ||
| + | // Using **** JQuery **** | ||
| + | // Initialize slideshow | ||
| + | var slideshow = UIkit.slideshow('#slideshow'); | ||
| + | |||
| + | // Variable with element that fire event | ||
| + | var $slideItem = $('#slideshow ul > li'); | ||
| + | |||
| + | $slideItem.on('beforeitemshow', function(){ | ||
| + | UIkit.notification({ message: 'Fire Before Item Show', timeout:1000 }); | ||
| + | }); | ||
| + | $slideItem.on('itemshown', function(){ | ||
| + | UIkit.notification({ message: 'Item shown', timeout:1000 }); | ||
| + | }); | ||
| + | |||
| + | </syntaxhighlight> | ||
Version vom 5. Oktober 2020, 11:58 Uhr
Less Strategie
UIKit mit Yarn installieren
Yarn ist ein Paketmanager. Wenn dieser installiert ist kann man es einfach hinzufügen. Hinweis: es gibt wohl auch eine npm Version. Nach Recherche scheint Yarn hinsichtlich Müllerzeugung, Sicherheit und Deinstallierbarkeit auf dem Rechner das bessere Instrument sein.
yarn add uikit
Dann wird in node_modules uikit installiert
FOLDER DESCRIPTION /src Contains all Less, JavaScript and image sources. /dist Contains compiled CSS and JS, updated on every release. /tests Contains HTML test files of all components.
Ordnerstruktur
Watcher
Angepasste Less / CSS Dateien mit dem Customizer
Manuelle Strategie
UIKit Customizer
Erzeugt ein Theme CSS Dateien
UIKit Events
Die UIKit Komponenten stellen Events zur Verfügung die man für eigene Skripte nutzen kann.
Beispiele
<syntaxhighlights lang="javascript"> // Using **** JQuery **** // Initialize slideshow var slideshow = UIkit.slideshow('#slideshow');
// Variable with element that fire event var $slideItem = $('#slideshow ul > li');
$slideItem.on('beforeitemshow', function(){
UIkit.notification({ message: 'Fire Before Item Show', timeout:1000 });
}); $slideItem.on('itemshown', function(){
UIkit.notification({ message: 'Item shown', timeout:1000 });
});
</syntaxhighlight>
