Kullanıma hazır kullanıcı arayüzü kitaplıkları olmadan web geliştirme bu kadar hızlı ve verimli olmazdı. Siz bir HTML/CSS ninjası olduğunuzu iddia edebilirsiniz, ben de size inanıyorum çünkü ben de öyleyim. Bununla birlikte, önceden tanımlanmış şık bileşenleri kullanmak yine de harikadır ve bu nedenle bazı güzel kullanıcı arayüzü kütüphaneleri arıyoruz.

Adım Mikhail Isaev ve SwifWeb çerçevesinin yazarıyım. Bugün sizlere MaterializeCSS framework'ünden ve SwifWeb ile nasıl kullanılacağından bahsedeceğim. Hadi başlayalım!

Nedir?

MaterializeCSS, başarılı tasarımın klasik ilkelerini yenilik ve teknolojiyle birleştirmek için Google tarafından oluşturulan, Materyal Tasarımı temel alan, modern, duyarlı , açık kaynaklı bir ön uç çerçevedir. Bu çerçeve için bir sarmalayıcı yazmaktan keyif aldım çünkü kullanımı çok kolay!

Nasıl kurulur?

SwifWeb'de yeniyseniz Webber CLI aracını kullanarak yeni proje oluşturmanız gerekir.

Projede Package.swift'i açın ve dependencies bölümünü şu şekilde görünecek şekilde düzenleyin:

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

Sonraki executableTarget şöyle görünecek şekilde düzenleyin:

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

Ardından App.swift açın ve didFinishLaunching yönteminde Materialize'ı şu şekilde yapılandırın:

 Lifecycle.didFinishLaunching { Materialize.configure() }

Özel Tema:

SCSS'den özel bir Materialize stili oluşturduysanız bunu şu şekilde yapılandırın:

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

Özel stilinizi /Sources/App/css/custom-materialize.min.css dosyasına ekleyin

Package.swift açın ve executableTarget kaynakları aşağıdaki gibi bildirin:

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

Artık kullanıcı arayüzünü oluşturmaya başlamaya hazırsınız!

Bileşenler

Swift'in tüm bileşenlerini çok güzel bir şekilde paketledim ancak hepsini anlatacak olursam makale çok uzun olur.

Bunlardan birkaçını burada inceleyeyim, geri kalanı için GitHub'daki benioku dosyasına başvurabilirsiniz.

Düğmeler

Sadece .materialButton(...) yöntemini çağırarak herhangi bir öğeyi malzeme düğmesi yapabilirsiniz.

Bağlantılar için bir öğe kullanılabilir ve onClick işleyicisiyle Div veya diğer öğeler kullanılabilir.

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

Her iki öğe de aynı görünecek, tek fark A'nın bir bağlantı olması ve bir bağlantı gibi hareket etmesidir.

Yöntem .materialButton birkaç seçeneği vardır:

type raised, floating, floatingHalfWay, flat

size small, large olabilir

waves light, red, yellow, orange, purple, green, teal veya özel olabilir; varsayılan olarak light

disabled , yalnızca düğmeyi devre dışı olarak işaretlemek için kullanılan bir bayraktır, anında değiştirmek için @State değerini buraya iletin

Ayrıca .addMaterialIcon(...) komutunu çağırarak ona bir malzeme simgesi ekleyebilirsiniz.

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

Aşağıdaki malzeme simgesi hakkında daha fazla bilgi edinin.

Yüzen Eylem Düğmesi

Çoklu eylemlere sahip sabit bir kayan eylem düğmesidir. Bu konuda daha fazlasını resmi belgelerde okuyun.

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

İsteğe bağlı bağımsız değişkenler

size large ve small olabilir, varsayılan olarak large

waves light, red, yellow, orange, purple, green, teal veya özel olabilir; varsayılan olarak light

direction top, right, bottom, left olabilir, varsayılan olarak top

mode hover, click, toolbar olabilir, varsayılan olarak hover gelme şeklindedir

Programlı olarak kontrol edin:

 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

Simgeler

MaterialIcon nesnesini başlatarak herhangi bir yere bir simge ekleyebilirsiniz.

Bu nesne, başlatıcı bağımsız değişkeni olarak simge türünü kabul eder. Simge türlerinin listesini burada bulabilirsiniz.

 MaterialIcon("announcement")

Simge türünü daha sonra .type(...) yöntemini çağırarak anında değiştirebilirsiniz.

İsteğe bağlı yöntemler

.size(...) tiny, small, medium, large kabul eder

.side(...) left, right kabul eder

Tüm yöntemler reaktif @State değerini kabul edebilir, böylece simgeyi ve özelliklerini anında değiştirebilirsiniz.

Renkler

Resmi belgelerde listelenen tüm renkler, değiştiricileri de dahil olmak üzere mevcuttur.

Metin Rengi

 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

Arka plan rengi

 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)

Kafes

Izgaradaki en önemli şey, genişliğine ve isteğe bağlı offest, push, pull değiştiricilerine sahip olan Sütun'dur .

 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" } } }

Yukarıdaki örnekler resmi belgelerdeki gibi 1:1'dir, dolayısıyla karşılaştırabilirsiniz.

Bir Sütuna birden fazla boyut sınıfı ayarlayabilirsiniz:

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

Hizalama

Dikey Hizalama

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

Metin hizalama

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

Hızlı Yüzer

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

İçeriği Gizleme/Gösterme

 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

Biçimlendirme

Kesme

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

Vurgulu

Bu özellik, fareyle üzerine gelindiğinde kutu gölgesi için bir animasyon ekler.

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

Tarayıcı Varsayılanları

Öğe stillerini orijinal durumuna geri döndürebilirsiniz.

 Ul().browserDefault()

Görüntüler

Duyarlı Görseller

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

Dairesel resimler

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

Videolar

Duyarlı Yerleştirmeler

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

Duyarlı Videolar

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

Gezinme çubuğu

 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: "") }

Kartlar

 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: "#")

Ön yükleyici

Dairesel

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

belirsiz

 PreloaderLinearIndeterminate()

Belirle

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

Sayfalandırma

 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) }

Bu kadar

Tamam, çerçevenin yaklaşık %20'sini anlattım.

Materialise CSS'ye aşina iseniz Swift gösteriminin kullanımının çok daha kolay olduğunu fark edebilirsiniz!

Daha fazlasını öğrenmek ister misin? Gelecek makaleler için bizi takip etmeye devam edin!