Quá trình phát triển web không có thư viện giao diện người dùng sẵn sàng sử dụng sẽ không nhanh và hiệu quả. Bạn có thể lập luận rằng bạn là một cao thủ HTML/CSS, và tôi tin bạn vì tôi cũng vậy. Tuy nhiên, vẫn rất tuyệt khi sử dụng các thành phần phong cách được xác định trước và đó là lý do tại sao chúng tôi đang tìm kiếm một số thư viện giao diện người dùng đẹp. Tên tôi là Mikhail Isaev và tôi là tác giả của khung . Hôm nay, tôi sẽ nói với bạn về khung và cách sử dụng nó với SwifWeb. Hãy bắt đầu nào! SwifWeb MaterializeCSS Nó là gì? MaterializeCSS là một khuôn khổ giao diện người dùng đáp ứng hiện đại dựa trên do Google tạo ra để kết hợp các nguyên tắc cổ điển của thiết kế thành công cùng với sự đổi mới và công nghệ. Tôi rất thích viết trình bao bọc cho khung này vì nó rất dễ sử dụng! nguồn mở Thiết kế Vật liệu Cài đặt thế nào? Nếu bạn chưa quen với SwifWeb thì bạn phải tạo dự án mới bằng công cụ Webber CLI. Trong dự án, hãy mở Package.swift và chỉnh sửa phần để trông giống như sau: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] Tiếp theo chỉnh sửa để nó trông như thế này: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Sau đó, mở và định cấu trong phương thức như sau: App.swift hình Materialize didFinishLaunching Lifecycle.didFinishLaunching { Materialize.configure() } Bạn sẽ phải đối mặt với các kiểu bị thiếu nếu bạn quên định cấu hình nó 🙃 Chủ đề tùy chỉnh: Nếu bạn đã tạo kiểu Materialize tùy chỉnh từ SCSS thì hãy định cấu hình kiểu đó theo cách này: Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") } Thêm phong cách tùy chỉnh của bạn vào /Sources/App/css/custom-materialize.min.css mở và khai báo tài nguyên trong như sau: 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") ]), Bây giờ bạn đã sẵn sàng để bắt đầu xây dựng giao diện người dùng! Các thành phần Tôi đã trình bày đẹp mắt tất cả các thành phần trong Swift, nhưng bài viết sẽ quá dài nếu tôi mô tả tất cả chúng. Hãy để tôi kiểm tra một vài trong số chúng ở đây và bạn có thể tham khảo để biết phần còn lại. readme trên GitHub nút Bạn có thể biến bất kỳ phần tử nào thành nút vật liệu chỉ bằng cách gọi phương thức . .materialButton(...) phần tử có thể được sử dụng cho các liên kết và hoặc các phần tử khác có thể được sử dụng với trình xử lý . Một Div onClick Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised) Cả hai yếu tố sẽ trông giống nhau, điểm khác biệt duy nhất là là một liên kết và sẽ hoạt động như một liên kết. A Phương thức có một số tùy chọn: .materialButton có thể được type raised, floating, floatingHalfWay, flat có thể size small, large có thể là két hoặc tùy chỉnh, theo mặc định waves light, red, yellow, orange, purple, green, teal light chỉ là một lá cờ để đánh dấu nút bị vô hiệu hóa, hãy chuyển giá trị @State vào đây để thay đổi nó một cách nhanh chóng disabled Ngoài ra, bạn có thể thêm một biểu tượng vật liệu vào nó chỉ bằng cách gọi .addMaterialIcon(...) .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right)) Tìm hiểu thêm về biểu tượng vật liệu bên dưới. Nút hành động nổi Nó là một nút hành động nổi cố định với nhiều hành động. Đọc thêm về nó . trong các tài liệu chính thức FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } đối số tùy chọn có thể và , nó theo mặc định size large small large có thể là két hoặc tùy chỉnh, theo mặc định waves light, red, yellow, orange, purple, green, teal light có thể là , theo mặc định, nó là direction top, right, bottom, left top có thể được theo mặc định mode hover, click, toolbar hover Kiểm soát nó theo chương trình: 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 Biểu tượng Bạn có thể thêm một biểu tượng ở bất cứ đâu bằng cách khởi tạo đối tượng . MaterialIcon Đối tượng này chấp nhận biểu tượng làm đối số trình khởi tạo. Danh sách các loại biểu tượng có sẵn . loại ở đây MaterialIcon("announcement") Bạn có thể thay đổi loại biểu tượng một cách nhanh chóng sau đó bằng cách gọi phương thức trên đó. .type(...) phương pháp tùy chọn chấp nhận .size(...) tiny, small, medium, large chấp nhận .side(...) left, right Tất cả các phương thức có thể chấp nhận giá trị @State phản ứng, vì vậy bạn có thể thay đổi biểu tượng và các thuộc tính của nó một cách nhanh chóng. Màu sắc Tất cả các màu được liệt kê đều có sẵn bao gồm cả các công cụ sửa đổi của chúng. trong tài liệu chính thức Văn bản màu 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 Màu nền 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) lưới Điều chính trong lưới là có chiều rộng và tùy chọn. Cột 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" } } } Các ví dụ trên là 1:1 giống như trong tài liệu chính thức, vì vậy bạn có thể so sánh. Bạn có thể đặt nhiều hơn một loại kích thước cho một Cột: Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six)) căn chỉnh Căn dọc VAlignWrapper { H5("This should be vertically aligned") } Căn chỉnh văn bản H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign() Phao nhanh Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center Ẩn/Hiện Nội dung 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 định dạng cắt ngắn H4("This is an extremely long title").truncate() // also with @State Bay lượn Tính năng này thêm hoạt ảnh cho bóng hộp khi di chuột. Card().hoverable() // also with @State Mặc định trình duyệt Bạn có thể khôi phục các kiểu phần tử về trạng thái ban đầu. Ul().browserDefault() Hình ảnh Hình ảnh phản hồi Img().src("cool_pic.jpg").responsive() // resizes responsively to page width hình tròn Img().src("images/yuna.jpg").circle() // square image that appears circular Video Nhúng đáp ứng Div { IFrame(...) }.videoContainer() Video phản hồi Video { Source().src("movie.mp4").type("video/mp4") }.responsive() thanh điều hướng 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: "") } thẻ 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: "#") trình tải trước Dạng hình tròn PreloaderCircular(colors: .blue, .red, .green, .yellow).active() không xác định PreloaderLinearIndeterminate() xác định @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value) phân trang 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) } Đó là nó Được rồi, tôi đã mô tả khoảng ~20% khuôn khổ. Nếu bạn đã quen thuộc với Materialize CSS, bạn có thể nhận thấy rằng biểu diễn của nó dễ sử dụng hơn nhiều! Swift Muốn tìm hiểu thêm? Hãy theo dõi các bài viết sắp tới! Đừng ngần ngại đặt bất kỳ câu hỏi nào và thoải mái đóng góp! trong Discord của chúng tôi
