如果没有现成的 UI 库，Web 开发就不会那么快速和高效。您可能会争辩说您是 HTML/CSS 忍者，我相信您，因为我也是。尽管如此，使用预定义的时尚组件仍然很酷，这就是我们寻找一些漂亮的 UI 库的原因。 我叫 Mikhail Isaev，是 框架的作者。今天，我将向您介绍 框架以及如何将其与 SwifWeb 一起使用。让我们开始！ SwifWeb MaterializeCSS 它是什么？  MaterializeCSS 是一个基于 现代响应 前端框架，由 Google 创建，将成功设计的经典原则与创新和技术相结合。我喜欢为这个框架编写包装器，因为它非常易于使用！ Material Design 的 式开源 如何安装？ 如果您是 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    can be  type raised, floating, floatingHalfWay, flat   可 size small, large   可以是 或自定义，默认为 waves light, red, yellow, orange, purple, green, teal light   只是标记按钮已禁用的标志，在此处传递 @State 值以动态更改它 disabled 您也可以通过调用 .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 想了解更多？请继续关注即将发布的文章！ 不要犹豫， 提出任何问题，并随时做出贡献！ 在我们的 Discord 中

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains new, firsthand information uncovered by the writer.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Read My Stories

該音頻是用故事的原始語言製作的！

SwifWeb 库：Materialize CSS

About Author

註釋

標籤

这篇文章刊登在

Related Stories

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

从论坛到信息流：社交媒体算法如何塑造数字互动

架构师指南：构建 AI/ML 数据湖参考架构

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

从论坛到信息流：社交媒体算法如何塑造数字互动

架构师指南：构建 AI/ML 数据湖参考架构

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps