Ohne gebrauchsfertige UI-Bibliotheken wäre die Webentwicklung nicht so schnell und effizient. Sie mögen argumentieren, dass Sie ein HTML/CSS-Ninja sind, und ich glaube Ihnen, weil ich es auch bin. Dennoch ist es immer noch cool, vordefinierte, stilvolle Komponenten zu verwenden, und deshalb suchen wir nach einigen schönen UI-Bibliotheken. Mein Name ist Mikhail Isaev und ich bin der Autor des Frameworks. Heute erzähle ich Ihnen vom Framework und wie Sie es mit SwifWeb verwenden. Lass uns anfangen! SwifWeb- MaterialiseCSS- Was ist es? MaterialiseCSS ist ein modernes, responsives -Frontend-Framework auf Basis von , das von Google entwickelt wurde, um die klassischen Prinzipien erfolgreichen Designs mit Innovation und Technologie zu verbinden. Es hat mir Spaß gemacht, einen Wrapper für dieses Framework zu schreiben, weil es sehr einfach zu verwenden ist! Open-Source Material Design Wie installiert man? Wenn Sie neu bei SwifWeb sind, müssen Sie mit dem Webber CLI-Tool ein neues Projekt erstellen. Öffnen Sie im Projekt Package.swift und bearbeiten Sie den Abschnitt , sodass er wie folgt aussieht: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] Bearbeiten Sie als Nächstes , damit es wie folgt aussieht: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Öffnen Sie dann und konfigurieren Sie in der -Methode wie folgt: App.swift Materialise didFinishLaunching Lifecycle.didFinishLaunching { Materialize.configure() } Wenn Sie vergessen, es zu konfigurieren, werden Ihnen fehlende Stile begegnen 🙃 Benutzerdefiniertes Thema: Wenn Sie einen benutzerdefinierten Materialise-Stil aus SCSS generiert haben, konfigurieren Sie ihn folgendermaßen: Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") } Fügen Sie Ihren benutzerdefinierten Stil in hinzu /Sources/App/css/custom-materialize.min.css Öffnen Sie und deklarieren Sie Ressourcen in wie folgt: 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") ]), Jetzt können Sie mit der Erstellung der Benutzeroberfläche beginnen! Komponenten Ich habe alle Komponenten wunderschön in Swift verpackt, aber der Artikel wäre zu lang, wenn ich sie alle beschreiben würde. Lassen Sie mich hier einige davon untersuchen, den Rest finden Sie in der . Readme-Datei auf GitHub Tasten Sie können jedes Element als Materialschaltfläche erstellen, indem Sie einfach die Methode aufrufen. .materialButton(...) Element kann für Links verwendet werden, und oder andere Elemente können mit Handler verwendet werden. Ein Div onClick Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised) Beide Elemente sehen gleich aus, der einzige Unterschied besteht darin, dass ein Link ist und sich wie ein Link verhält. A Die Methode hat einige Optionen: .materialButton kann sein type raised, floating, floatingHalfWay, flat kann sein size small, large können oder standardmäßig sein waves light, red, yellow, orange, purple, green, teal light ist nur ein Flag, um die Schaltfläche „deaktiviert“ zu markieren. Übergeben Sie hier den @State-Wert, um ihn im Handumdrehen zu ändern disabled Sie können ihm auch ein Materialsymbol hinzufügen, indem Sie einfach aufrufen. .addMaterialIcon(...) .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right)) Weitere Informationen zum Materialsymbol finden Sie weiter unten. Schwebende Aktionsschaltfläche Es handelt sich um eine feste schwebende Aktionsschaltfläche mit mehreren Aktionen. Lesen Sie mehr darüber . in den offiziellen Dokumenten FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } Optionale Argumente kann und sein, standardmäßig ist sie size large small large können oder standardmäßig sein waves light, red, yellow, orange, purple, green, teal light kann sein, standardmäßig ist sie direction top, right, bottom, left top kann sein. Standardmäßig ist „ aktiviert mode hover, click, toolbar hover Steuern Sie es programmgesteuert: 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 Symbole Sie können überall ein Symbol hinzufügen, indem Sie das Objekt initialisieren. MaterialIcon- Dieses Objekt akzeptiert den als Initialisierungsargument. Eine Liste der Symboltypen finden Sie . Symboltyp hier MaterialIcon("announcement") Sie können den Symboltyp später spontan ändern, indem Sie die Methode dafür aufrufen. .type(...) Optionale Methoden akzeptiert .size(...) tiny, small, medium, large akzeptiert .side(...) left, right Alle Methoden können reaktive @State-Werte akzeptieren, sodass Sie das Symbol und seine Eigenschaften im Handumdrehen ändern können. Farben Alle aufgeführten Farben sind verfügbar, einschließlich ihrer Modifikatoren. in der offiziellen Dokumentation Textfarbe 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 Hintergrundfarbe 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) Netz Das Wichtigste im Raster ist die , die ihre Breite und optionale Modifikatoren hat. Spalte 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" } } } Die obigen Beispiele sind 1:1 wie in der offiziellen Dokumentation, sodass Sie sie einfach vergleichen können. Sie können einer Spalte mehr als eine Größenklasse zuweisen: Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six)) Ausrichtung Vertikal ausrichten VAlignWrapper { H5("This should be vertically aligned") } Textausrichtung H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign() Schnelle Schwimmer Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center Inhalte ausblenden/anzeigen 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 Formatierung Kürzung H4("This is an extremely long title").truncate() // also with @State Schweben Diese Funktion fügt beim Schweben eine Animation für den Kastenschatten hinzu. Card().hoverable() // also with @State Browser-Standardeinstellungen Sie können Elementstile auf den ursprünglichen Zustand zurücksetzen. Ul().browserDefault() Bilder Responsive Bilder Img().src("cool_pic.jpg").responsive() // resizes responsively to page width Kreisförmige Bilder Img().src("images/yuna.jpg").circle() // square image that appears circular Videos Responsive Einbettungen Div { IFrame(...) }.videoContainer() Responsive Videos Video { Source().src("movie.mp4").type("video/mp4") }.responsive() Navigationsleiste 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: "") } Karten 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: "#") Vorlader Kreisförmig PreloaderCircular(colors: .blue, .red, .green, .yellow).active() Unbestimmt PreloaderLinearIndeterminate() Bestimmen @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value) Seitennummerierung 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) } Das ist es Alles klar, ich habe etwa 20 % des Frameworks beschrieben. Wenn Sie mit Materialise CSS vertraut sind, werden Sie vielleicht feststellen, dass die Darstellung viel einfacher zu verwenden ist! Swift- Möchten Sie mehr erfahren? Seien Sie gespannt auf die kommenden Artikel! Zögern Sie nicht, Fragen zu stellen und tragen Sie gerne dazu bei! in unserem Discord
