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 SwifWeb . Hôm nay, tôi sẽ nói với bạn về khung MaterializeCSS và cách sử dụng nó với SwifWeb. Hãy bắt đầu nào!

Nó là gì?

MaterializeCSS là một khuôn khổ giao diện người dùng nguồn mở đáp ứng hiện đại dựa trên Thiết kế Vật liệu 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!

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 dependencies để trông giống như sau:

 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 executableTarget để nó trông như thế này:

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

Sau đó, mở App.swift và định cấu hình Materialize trong phương thức didFinishLaunching như sau:

 Lifecycle.didFinishLaunching { Materialize.configure() }

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ở Package.swift và khai báo tài nguyên trong executableTarget như sau:

 .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 readme trên GitHub để biết phần còn lại.

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

Một phần tử có thể được sử dụng cho các liên kết và Div hoặc các phần tử khác có thể được sử dụng với trình xử lý 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à A là một liên kết và sẽ hoạt động như một liên kết.

Phương thức .materialButton có một số tùy chọn:

type có thể được raised, floating, floatingHalfWay, flat

size có thể small, large

waves có thể là light, red, yellow, orange, purple, green, teal két hoặc tùy chỉnh, light theo mặc định

disabled 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

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

size có thể large và small , nó large theo mặc định

waves có thể là light, red, yellow, orange, purple, green, teal két hoặc tùy chỉnh, light theo mặc định

direction có thể là top, right, bottom, left , theo mặc định, nó là top

mode có thể hover, click, toolbar được hover theo mặc định

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 loại 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 ở đâ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 .type(...) trên đó.

phương pháp tùy chọn

.size(...) chấp nhận tiny, small, medium, large

.side(...) chấp nhận 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ê trong tài liệu chính thức đều có sẵn bao gồm cả các công cụ sửa đổi của chúng.

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ột có chiều rộng và offest, push, pull tùy chọn.

 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 Swift của nó dễ sử dụng hơn nhiều!

Muốn tìm hiểu thêm? Hãy theo dõi các bài viết sắp tới!