Le développement Web sans bibliothèques d'interface utilisateur prêtes à l'emploi ne serait pas aussi rapide et efficace. Vous pouvez dire que vous êtes un ninja HTML/CSS, et je vous crois parce que je le suis aussi. Néanmoins, il est toujours intéressant d'utiliser des composants élégants prédéfinis, et c'est pourquoi nous recherchons de belles bibliothèques d'interface utilisateur.

Je m'appelle Mikhail Isaev et je suis l'auteur du framework SwifWeb . Aujourd'hui, je vais vous parler du framework MaterializeCSS et de son utilisation avec SwifWeb. Commençons!

Qu'est-ce que c'est?

MaterialiseCSS est un framework frontal open source responsive moderne basé sur Material Design qui a été créé par Google pour combiner les principes classiques d'une conception réussie avec l'innovation et la technologie. J'ai aimé écrire un wrapper pour ce framework car il est très facile à utiliser !

Comment installer?

Si vous êtes nouveau sur SwifWeb, vous devez créer un nouveau projet à l'aide de l'outil Webber CLI.

Dans le projet, ouvrez Package.swift et modifiez la section dependencies pour qu'elle ressemble à ceci :

 dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ]

Modifiez ensuite executableTarget pour qu'il ressemble à ceci :

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]),

Ouvrez ensuite App.swift et configurez Materialise dans la méthode didFinishLaunching comme ceci :

 Lifecycle.didFinishLaunching { Materialize.configure() }

Thème personnalisé :

Si vous avez généré un style Materialise personnalisé à partir de SCSS, configurez-le comme suit :

 Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") }

Ajoutez votre style personnalisé dans /Sources/App/css/custom-materialize.min.css

ouvrez Package.swift et déclarez les ressources dans executableTarget comme suit :

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ], resources: [ .copy("css/custom-materialize.min.css"), .copy("css") ]),

Vous êtes maintenant prêt à commencer à créer l'interface utilisateur !

Composants

J'ai magnifiquement intégré tous les composants dans Swift, mais l'article serait trop long si je devais tous les décrire.

Permettez-moi d'en examiner quelques-uns ici, et vous pouvez vous référer au fichier readme sur GitHub pour le reste.

Boutons

Vous pouvez faire de n'importe quel élément un bouton de matériau simplement en appelant la méthode .materialButton(...) .

Un élément peut être utilisé pour les liens, et Div ou d'autres éléments peuvent être utilisés avec le gestionnaire onClick .

 Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised)

Les deux éléments se ressembleront, la seule différence est que A est un lien et agira comme un lien.

La méthode .materialButton a quelques options :

type peut être raised, floating, floatingHalfWay, flat

size peut être small, large

waves peuvent être light, red, yellow, orange, purple, green, teal ou personnalisées, light par défaut

disabled est juste un drapeau pour marquer le bouton désactivé, passez la valeur @State ici pour le changer à la volée

Vous pouvez également ajouter une icône de matériau simplement en appelant .addMaterialIcon(...)

 .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right))

En savoir plus sur l'icône de matériau ci-dessous.

Bouton d'action flottant

Il s'agit d'un bouton d'action flottant fixe avec plusieurs actions. En savoir plus à ce sujet dans les documents officiels .

 FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } 

Arguments facultatifs

size peut être large et small , elle est large par défaut

waves peuvent être light, red, yellow, orange, purple, green, teal ou personnalisées, light par défaut

direction peut être top, right, bottom, left , c'est top par défaut

mode peut être hover, click, toolbar il est hover par défaut

Contrôlez-le par programmation :

 lazy var fab = FloatingActionButton(...) fab.open() // to show the menu/toolbar fab.close() // to show the menu/toolbar fab.isOpen // the check if it is open

Icônes

Vous pouvez ajouter une icône n'importe où en initialisant l'objet MaterialIcon .

Cet objet accepte le type d'icône comme argument d'initialisation. La liste des types d'icônes est disponible ici .

 MaterialIcon("announcement")

Vous pouvez changer le type d'icône à la volée plus tard en appelant la méthode .type(...) dessus.

Méthodes facultatives

.size(...) accepte tiny, small, medium, large

.side(...) accepte left, right

Toutes les méthodes peuvent accepter la valeur @State réactive, vous pouvez donc modifier l'icône et ses propriétés à la volée.

Couleurs

Toutes les couleurs répertoriées dans la documentation officielle sont disponibles, y compris leurs modificateurs.

Couleur du texte

 Span("Hello").textColor(.red) // just red color Span("Hello").textColor(.red.lighten3) // red color with lighten-3 modifier Span("Hello").textColor(.red.darken4) // red color with darken-4 modifier

Couleur de l'arrière plan

 Div().materialBackground(.red) // just red color Div().textColor(.red.lighten3) // red color with lighten-3 modifier Div().textColor(.red.darken4) // red color with darken-4 modifier // or Div().red() Div().red(.lighten3) Div().red(.darken4)

Grille

La chose principale dans la grille est la colonne qui a sa largeur et ses modificateurs facultatifs offest, push, pull .

 Container { Row { Column(.small(.one)) { "1" } // <div class="col s1">1</div> Column(.small(.one)) { "2" } // <div class="col s1">2</div> Column(.small(.one)) { "3" } // <div class="col s1">3</div> Column(.small(.one)) { "4" } // <div class="col s1">4</div> Column(.small(.one)) { "5" } // <div class="col s1">5</div> Column(.small(.one)) { "6" } // <div class="col s1">6</div> Column(.small(.one)) { "7" } // <div class="col s1">7</div> Column(.small(.one)) { "8" } // <div class="col s1">8</div> Column(.small(.one)) { "9" } // <div class="col s1">9</div> Column(.small(.one)) { "10" } // <div class="col s1">10</div> Column(.small(.one)) { "11" } // <div class="col s1">11</div> Column(.small(.one)) { "12" } // <div class="col s1">12</div> } Divider() Row { Column(.small(.twelve)) { "screen-wide" } Column(.small(.six)) { "one-half" } Column(.small(.six)) { "one-half" } } Divider() Row { Column(.small(.twelve)) { "12-columns" } Column(.small(.six, offset: .six)) { "6-columns at the right" } } Divider() Row { Column(.small(.seven, push: .five)) { "7-columns pushed to the right" } Column(.small(.five, pull: .seven)) { "5-columns pulled to the left" } } }

Les exemples ci-dessus sont 1: 1 comme dans la documentation officielle, vous pouvez donc simplement comparer.

Vous pouvez définir plusieurs classes de taille pour une colonne :

 Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six))

Alignement

Alignement vertical

 VAlignWrapper { H5("This should be vertically aligned") }

Alignement du texte

 H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign()

Flotteurs rapides

 Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center

Masquage/affichage du contenu

 Div().hideOnSmallOnly() // Hidden for Mobile Only Div().hideOnMedOnly() // Hidden for Tablet Only Div().hideOnMedAndDown() // Hidden for Tablet and Below Div().hideOnMedAndUp() // Hidden for Tablet and Above Div().hideOnLargeOnly() // Hidden for Desktop Only Div().showOnSmall() // Show for Mobile Only Div().showOnMedium() // Show for Tablet Only Div().showOnLarge() // Show for Desktop Only Div().showOnMediumAndUp() // Show for Tablet and Above Div().showOnMediumAndDown() // Show for Tablet and Below Div().pinned() // Pins element

Mise en page

Troncature

 H4("This is an extremely long title").truncate() // also with @State

Flotter

Cette fonctionnalité ajoute une animation pour l'ombre de la boîte au survol.

 Card().hoverable() // also with @State

Valeurs par défaut du navigateur

Vous pouvez rétablir l'état d'origine des styles d'éléments.

 Ul().browserDefault()

Images

Images réactives

 Img().src("cool_pic.jpg").responsive() // resizes responsively to page width

Images circulaires

 Img().src("images/yuna.jpg").circle() // square image that appears circular

Vidéos

Intégrations réactives

 Div { IFrame(...) }.videoContainer()

Vidéos réactives

 Video { Source().src("movie.mp4").type("video/mp4") }.responsive()

Barre de navigation

 Navbar { A("Logo") .floatLeft() // align left .floatRight() // align right .floatCenter() // align center } .deepPurple(.lighten4) // background .left() // left aligned links .right() // right aligned links .item("Sass", href: "/sass") .item("Components", href: "/badges") .item("JavaScript", active: true, href: "/collapsible") // as active // dropdown menu .dropdownItem("More", background: .white, hover: false) { DropdownItem("Dropdown 1", color: .red) { Toast.show("Hi") } DropdownItem("Dropdown 2", href: "") }

Cartes

 Card("Card Title") .blueGrey(.darken1) .textColor(.white) .message("""I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. """) .action("THIS IS A BUTTON") {} .action("THIS IS A LINK", href: "#")

Préchargeur

Circulaire

 PreloaderCircular(colors: .blue, .red, .green, .yellow).active()

Indéterminé

 PreloaderLinearIndeterminate()

Déterminé

 @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value)

Pagination

 Pagination() .back(disabled: true, icon: "chevron_left") {} .item(1, href: "#1") .item(2, href: "#2") .item(3) { Toast.show("Going to 3!") } .forward() { Toast.show("Going forward!", rounded: true) }

C'est ça

Très bien, j'ai décrit environ ~ 20% du cadre.

Si vous connaissez Materialise CSS, vous remarquerez peut-être que sa représentation Swift est beaucoup plus facile à utiliser !

Vous voulez en savoir plus ? Restez à l'affût des prochains articles!