すぐに使える 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メソッドでマテリアライズを構成します。

 Lifecycle.didFinishLaunching { Materialize.configure() }

カスタム テーマ:

SCSS からカスタム マテリアライズ スタイルを生成した場合は、次のように構成します。

 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 の readmeを参照してください。

ボタン

.materialButton(...)メソッドを呼び出すだけで、任意の要素をマテリアル ボタンとして作成できます。

要素はリンクに使用でき、 Divまたはその他の要素はonClickハンドラーで使用できます。

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

どちらの要素も同じように見えますが、唯一の違いは、 Aがリンクであり、リンクのように機能することです。

メソッド.materialButtonにはいくつかのオプションがあります。

type 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てもsmallません。デフォルトではlargeです

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)

グリッド

グリッドの主なものは、幅とオプションの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% について説明しました。

Materialise CSS に精通している場合は、そのSwift表現がはるかに使いやすいことに気付くかもしれません。

もっと学びたいですか？今後の記事をお楽しみに！