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 . Aujourd'hui, je vais vous parler du framework et de son utilisation avec SwifWeb. Commençons! SwifWeb MaterializeCSS Qu'est-ce que c'est? MaterialiseCSS est un framework frontal responsive moderne basé sur 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 ! open source Material Design 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 pour qu'elle ressemble à ceci : dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] Modifiez ensuite pour qu'il ressemble à ceci : executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Ouvrez ensuite et configurez dans la méthode comme ceci : App.swift Materialise didFinishLaunching Lifecycle.didFinishLaunching { Materialize.configure() } Vous ferez face à des styles manquants si vous oubliez de le configurer 🙃 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 et déclarez les ressources dans comme suit : Package.swift executableTarget .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 pour le reste. fichier readme sur GitHub Boutons Vous pouvez faire de n'importe quel élément un bouton de matériau simplement en appelant la méthode . .materialButton(...) élément peut être utilisé pour les liens, et ou d'autres éléments peuvent être utilisés avec le gestionnaire . Un Div 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 est un lien et agira comme un lien. A La méthode a quelques options : .materialButton peut être type raised, floating, floatingHalfWay, flat peut être size small, large peuvent être ou personnalisées, par défaut waves light, red, yellow, orange, purple, green, teal light est juste un drapeau pour marquer le bouton désactivé, passez la valeur @State ici pour le changer à la volée disabled 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 peut être et , elle est par défaut size large small large peuvent être ou personnalisées, par défaut waves light, red, yellow, orange, purple, green, teal light peut être , c'est par défaut direction top, right, bottom, left top peut être il est par défaut mode hover, click, toolbar hover 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 d'icône comme argument d'initialisation. La liste des types d'icônes est disponible . le type ici MaterialIcon("announcement") Vous pouvez changer le type d'icône à la volée plus tard en appelant la méthode dessus. .type(...) Méthodes facultatives accepte .size(...) tiny, small, medium, large accepte .side(...) 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 sont disponibles, y compris leurs modificateurs. dans la documentation officielle 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 qui a sa largeur et ses modificateurs facultatifs . la colonne 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 est beaucoup plus facile à utiliser ! Swift Vous voulez en savoir plus ? Restez à l'affût des prochains articles! N'hésitez pas à poser vos questions et n'hésitez pas à contribuer ! sur notre Discord
