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 SwifWeb- Frameworks. Heute erzähle ich Ihnen vom MaterialiseCSS- Framework und wie Sie es mit SwifWeb verwenden. Lass uns anfangen!

Was ist es?

MaterialiseCSS ist ein modernes, responsives Open-Source -Frontend-Framework auf Basis von Material Design , 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!

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 dependencies , sodass er wie folgt aussieht:

 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 executableTarget , damit es wie folgt aussieht:

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

Öffnen Sie dann App.swift und konfigurieren Sie Materialise in der didFinishLaunching -Methode wie folgt:

 Lifecycle.didFinishLaunching { Materialize.configure() }

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 /Sources/App/css/custom-materialize.min.css hinzu

Öffnen Sie Package.swift und deklarieren Sie Ressourcen in executableTarget wie folgt:

 .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 .materialButton(...) aufrufen.

Ein Element kann für Links verwendet werden, und Div oder andere Elemente können mit onClick Handler verwendet werden.

 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 A ein Link ist und sich wie ein Link verhält.

Die Methode .materialButton hat einige Optionen:

type kann raised, floating, floatingHalfWay, flat sein

size kann small, large sein

waves können light, red, yellow, orange, purple, green, teal oder standardmäßig light sein

disabled ist nur ein Flag, um die Schaltfläche „deaktiviert“ zu markieren. Übergeben Sie hier den @State-Wert, um ihn im Handumdrehen zu ändern

Sie können ihm auch ein Materialsymbol hinzufügen, indem Sie einfach .addMaterialIcon(...) aufrufen.

 .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

size kann large und small sein, standardmäßig ist sie large

waves können light, red, yellow, orange, purple, green, teal oder standardmäßig light sein

direction kann top, right, bottom, left sein, standardmäßig ist sie top

mode kann hover, click, toolbar sein. Standardmäßig ist „ hover aktiviert

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 MaterialIcon- Objekt initialisieren.

Dieses Objekt akzeptiert den Symboltyp als Initialisierungsargument. Eine Liste der Symboltypen finden Sie hier .

 MaterialIcon("announcement")

Sie können den Symboltyp später spontan ändern, indem Sie die Methode .type(...) dafür aufrufen.

Optionale Methoden

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

.side(...) akzeptiert left, right

Alle Methoden können reaktive @State-Werte akzeptieren, sodass Sie das Symbol und seine Eigenschaften im Handumdrehen ändern können.

Farben

Alle in der offiziellen Dokumentation aufgeführten Farben sind verfügbar, einschließlich ihrer Modifikatoren.

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 Spalte , die ihre Breite und optionale offest, push, pull Modifikatoren hat.

 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 Swift- Darstellung viel einfacher zu verwenden ist!

Möchten Sie mehr erfahren? Seien Sie gespannt auf die kommenden Artikel!