如果没有现成的 UI 库，Web 开发就不会那么快速和高效。您可能会争辩说您是 HTML/CSS 忍者，我相信您，因为我也是。尽管如此，使用预定义的时尚组件仍然很酷，这就是我们寻找一些漂亮的 UI 库的原因。

我叫 Mikhail Isaev，是SwifWeb框架的作者。今天，我将向您介绍MaterializeCSS框架以及如何将其与 SwifWeb 一起使用。让我们开始！

它是什么？

MaterializeCSS 是一个基于Material Design 的现代响应式开源前端框架，由 Google 创建，将成功设计的经典原则与创新和技术相结合。我喜欢为这个框架编写包装器，因为它非常易于使用！

如何安装？

如果您是 SwifWeb 的新手，那么您必须使用 Webber CLI 工具创建新项目。

在项目中打开 Package.swift 并编辑dependencies部分，使其看起来像这样：

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

接下来编辑executableTarget使其看起来像这样：

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

然后打开App.swift并在didFinishLaunching方法中配置Materialize ，如下所示：

 Lifecycle.didFinishLaunching { Materialize.configure() }

自定义主题：

如果您从 SCSS 生成了自定义的 Materialise 样式，请按以下方式配置它：

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

将您的自定义样式添加到/Sources/App/css/custom-materialize.min.css

打开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") ]),

现在您已准备好开始构建 UI！

成分

我已经将所有组件精美地包装到 Swift 中，但是如果我要描述所有这些组件，那么这篇文章就太长了。

让我在这里检查其中的一些，其余的你可以参考GitHub 上的自述文件。

纽扣

您可以通过调用.materialButton(...)方法将任何元素设为材质按钮。

元素可用于链接， Div或其他元素可与onClick处理程序一起使用。

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

这两个元素看起来是一样的，唯一的区别是A是一个链接并且会像链接一样工作。

方法.materialButton有几个选项：

type can be raised, floating, floatingHalfWay, flat

size可small, large

waves可以是light, red, yellow, orange, purple, green, teal或自定义，默认为light

disabled只是标记按钮已禁用的标志，在此处传递 @State 值以动态更改它

您也可以通过调用.addMaterialIcon(...)

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

在下面找到有关材料图标的更多信息。

浮动操作按钮

它是一个具有多个动作的固定浮动动作按钮。在官方文档中阅读更多相关信息。

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

可选参数

size large large默认small

waves可以是light, red, yellow, orange, purple, green, teal或自定义，默认为light

direction可以是top, right, bottom, left ，默认是top

mode可以是hover, click, toolbar默认是hover

以编程方式控制它：

 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

图标

您可以通过初始化MaterialIcon对象在任何地方添加图标。

该对象接受图标类型作为初始化参数。图标类型列表可在此处获得。

 MaterialIcon("announcement")

您可以稍后通过调用方法.type(...)动态更改图标类型。

可选方法

.size(...)接受tiny, small, medium, large

.side(...)接受left, right

所有方法都可以接受响应式 @State 值，因此您可以即时更改图标及其属性。

颜色

官方文档中列出的所有颜色都可用，包括它们的修饰符。

文字颜色

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

背景颜色

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)

网格

网格中的主要内容是Column ，它具有宽度和可选的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" } } }

上面的例子和官方文档中的是1:1的，大家可以对比一下。

您可以为一个列设置多个尺寸等级：

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

结盟

垂直对齐

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

文本对齐

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

快速漂浮

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

隐藏/显示内容

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

格式化

截断

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

徘徊

此功能在悬停时为框阴影添加动画。

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

浏览器默认值

您可以将元素样式恢复到原始状态。

 Ul().browserDefault()

图片

响应图像

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

圆形图像

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

影片

响应嵌入

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

响应式视频

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

导航栏

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

牌

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

预加载器

圆

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

不定

 PreloaderLinearIndeterminate()

确定

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

分页

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

就是这样

好吧，我描述了大约 20% 的框架。

如果您熟悉 Materialize CSS，您可能会注意到它的Swift表示更易于使用！

想了解更多？请继续关注即将发布的文章！