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 çerçevesinin yazarıyım. Bugün sizlere framework'ünden ve SwifWeb ile nasıl kullanılacağından bahsedeceğim. Hadi başlayalım! SwifWeb MaterializeCSS Nedir? MaterializeCSS, başarılı tasarımın klasik ilkelerini yenilik ve teknolojiyle birleştirmek için Google tarafından oluşturulan, temel alan, modern, duyarlı bir ön uç çerçevedir. Bu çerçeve için bir sarmalayıcı yazmaktan keyif aldım çünkü kullanımı çok kolay! Materyal Tasarımı , açık kaynaklı Nasıl kurulur? SwifWeb'de yeniyseniz Webber CLI aracını kullanarak yeni proje oluşturmanız gerekir. Projede Package.swift'i açın ve bölümünü şu şekilde görünecek şekilde düzenleyin: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] Sonraki şöyle görünecek şekilde düzenleyin: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Ardından açın ve yönteminde şu şekilde yapılandırın: App.swift didFinishLaunching Materialize'ı Lifecycle.didFinishLaunching { Materialize.configure() } Yapılandırmayı unutursanız eksik stillerle karşılaşacaksınız 🙃 Ö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 dosyasına ekleyin /Sources/App/css/custom-materialize.min.css açın ve kaynakları aşağıdaki gibi bildirin: 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") ]), 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 dosyasına başvurabilirsiniz. GitHub'daki benioku Düğmeler Sadece yöntemini çağırarak herhangi bir öğeyi malzeme düğmesi yapabilirsiniz. .materialButton(...) Bağlantılar için öğe kullanılabilir ve işleyicisiyle veya diğer öğeler kullanılabilir. bir onClick Div 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 bir bağlantı olması ve bir bağlantı gibi hareket etmesidir. A'nın Yöntem birkaç seçeneği vardır: .materialButton type raised, floating, floatingHalfWay, flat olabilir size small, large veya özel olabilir; varsayılan olarak waves light, red, yellow, orange, purple, green, teal light , 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 disabled Ayrıca komutunu çağırarak ona bir malzeme simgesi ekleyebilirsiniz. .addMaterialIcon(...) .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ı okuyun. resmi belgelerde 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 ve olabilir, varsayılan olarak size large small large veya özel olabilir; varsayılan olarak waves light, red, yellow, orange, purple, green, teal light olabilir, varsayılan olarak direction top, right, bottom, left top olabilir, varsayılan olarak gelme şeklindedir mode hover, click, toolbar hover 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 nesnesini başlatarak herhangi bir yere bir simge ekleyebilirsiniz. MaterialIcon Bu nesne, başlatıcı bağımsız değişkeni olarak simge kabul eder. Simge türlerinin listesini bulabilirsiniz. türünü burada MaterialIcon("announcement") Simge türünü daha sonra yöntemini çağırarak anında değiştirebilirsiniz. .type(...) İsteğe bağlı yöntemler kabul eder .size(...) tiny, small, medium, large kabul eder .side(...) left, right Tüm yöntemler reaktif @State değerini kabul edebilir, böylece simgeyi ve özelliklerini anında değiştirebilirsiniz. Renkler listelenen tüm renkler, değiştiricileri de dahil olmak üzere mevcuttur. Resmi belgelerde 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ı değiştiricilerine sahip olan . offest, push, pull 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 gösteriminin kullanımının çok daha kolay olduğunu fark edebilirsiniz! Swift Daha fazlasını öğrenmek ister misin? Gelecek makaleler için bizi takip etmeye devam edin! soru sormaktan çekinmeyin ve katkıda bulunmaktan çekinmeyin! Discord'umuzda
