Viene messa a disposizione una guida html per poter approfondire l'uso dei componenti del webkit.
Per personalizzare gli stili grafici si include tra i sorgenti il file custom.scss collegato a variables.scss con i Token Sirio di riferimento utilizzati.
Copiare le risorse presenti nella cartella ASSETS nel vostro server e aggiungere nelle pagine HTML i puntamenti corretti per caricarle in base alla struttura directories che avete scelto di utilizzare.
Da inserire nella HEAD della pagina HTML
<!-- CSS Plugin -->
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/datepicker.min.css">
<!-- CSS Fonts -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-titillium-web.css">
<link rel="stylesheet" href="css/font-lora.css">
<link rel="stylesheet" href="css/font-roboto-mono.css">
<!-- CSS UIKit -->
<link rel="stylesheet" href="css/webkit.min.css">
Da inserire in fondo alla pagina HTML
<!-- JS WebKit -->
<script src="js/sirio-datepicker-full.js"></script>
<script src="js/sirio-webkit.js"></script>
<script src="js/splide.min.js"></script>
- contenuto\Dialog (nuova gestione tab)
- contenuto\Utils (gestione centralizzata chiusura con escape)
- form\Searchbar (gestione bottone X per cancellazione valore)
- form\DropdownMenu (aggiunta funzionalità dropdown-detached)
- tipografia\Colori (warning modified)
- contenuto\Step Progress Bar (esempi modificati)
- contenuto\Tabelle (esempi modificati + table responsive card + table action fixed + table drawer aggiornata)
- contenuto\Paginazione (esempi modificati)
- contenuto\Notifiche (css modificati)
- form\Chip (esempi e css modificati)
- form\Searchbar (add placeholder)
- form\Validazione (label modificati)
- form\Filtri (aggiunti filtri orizzontali + titoli con popover + correzione esempi)
- struttura\Header (added megamenu)
- contenuto\Hero
- contenuto\Carousel
- assets\img\new images for hero and megamenu
- Bugfixing handle event.key with no data
- tipografia\Logo (modified)
- tipografia\Icone (fontawesome v6.4.2)
- tipografia\Colori (warning modified)
- contenuto\Tag (warning modified)
- struttura\Footer (twitter icon modified)
- contenuto\Tab (getter and setter for buttons added)
- form\Dropdown Select (selected value aria-label management added)
- form\Dropdown Select (handle duplication of select issue)
- form\Dropdown Select (initialization using value attribute)
- form\Upload (addNewFile method added)
- form\TimePicker (label handling in aria label)
- form\SirioSlider modify component (compliant W3C specs for null value)
- Management of the data-sirio-keyboard attribute (loss of focus on accordion, collapse, dropdown)
- Propagation of custom events for components initialization
- Possibility to disable automatic initialization added
- Components classes for manual components initialization exported
- scss\Variables changed
- js\DropdownSelect, FileUpload, TimePicker and Datepicker (propagation of custom events)
- js\SirioTimePicker (new keydown event management)
- contenuto\Card (header moved)
- contenuto\Tab (added nav)
- contenuto\Title Bar
- contenuto\Tabelle (added drawer)
- form\Filtri
- struttura\Header (added submenu mobile)
- contenuto\Menu Spalla
- contenuto\Avvisi
- contenuto\Step Progress Bar (fixed bug hover)
- form\Upload (added maximum number of files)
- form\Dropdown Select (added reset method)
- form\Dropdown Select (fixed bug onchange)
- tipografia\Colori (rebranding)
- tipografia\Icone (fontawesome v6.3.0)
- form\Dropdown Select (added methods)
- struttura\Header
- contenuto\Step Progress Bar (fixed dropdown menu)
- form\Selezione (fixed toggle)
- form\Chip (fixed radio/checkbox)
- struttura\System Grid
- struttura\Struttura pagina di esempio
- struttura\Footer
- tipografia\Font
- tipografia\Colori
- tipografia\Heading
- tipografia\Icone
- contenuto\Accordion
- contenuto\Dialog
- contenuto\Tab
- contenuto\Breadcrumb
- contenuto\Card
- contenuto\Paginazione
- contenuto\Notifiche
- contenuto\Tabelle
- contenuto\Collapse
- contenuto\Dropdown
- contenuto\Tag
- contenuto\Tooltip
- contenuto\Step Progress Bar
- form\Bottoni
- form\Input
- form\Input group
- form\Dropdown Select
- form\Autocomplete
- form\Searchbar
- form\Date & Time picker
- form\Selezione
- form\File Upload
- form\Validazione
- form\Chip
- form\Slider
- form\Progress bar
Vengono di seguito elencati i componenti distribuiti con Sirio WebKit.
-
Bootstrap 5 Grid System, ©Twitter, Inc., licenza MIT
-
Vanilla JS Datepicker, licenza MIT
-
Splide, licenza MIT
-
Font Awesome Free 6.3.0 ©Fonticons, Inc., licenza SIL OFL 1.1
-
Font Titillium Web ©Accademia di Belle Arti di Urbino and students of MA course of Visual design, Inc., licenza SIL OFL 1.1
-
Font Lora ©Cyreal Fonts, licenza SIL OFL 1.1
-
Font Roboto Mono ©The Roboto Mono Project Authors, licenza SIL OFL 1.1