すぐに使える 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 マテリアライズ 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 、ボタンを無効にマークする単なるフラグです。ここに @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 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 もっと学びたいですか？今後の記事をお楽しみに！ 質問をすることを躊躇しないで、自由に貢献してください! 私たちのディスコードで

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

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Making security fun one episode at a time

SwifWeb ライブラリ: CSS のマテリアライズ

長すぎる; 読むには

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

ラベル

Languages

この記事は...

SwifWeb ライブラリ: CSS のマテリアライズ

長すぎる; 読むには

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

ラベル

Languages

この記事は...

関連ストーリー