Materialise CSS のダイアログの説明を行う-CSSチュートリアル-php.cn

マテリアライズCSSとは何ですか?

ダイアログボックスは、小さなウィンドウの形式で表示され、ユーザーに情報を伝えながらユーザーの反応を求めるグラフィカルコントロール要素です。

Materialize CSS

この記事では、マテリアル化 CSS を使用してダイアログボックスを作成します。カスタムトーストボックスを作成できる

ホームページ

ウェブフロントエンド

CSSチュートリアル

Materialise CSS のダイアログの説明を行う

Aug 19, 2023 pm 08:49 PM

Explain Dialogs in Materialize CSS

Materialize に組み込まれたレスポンシブデザインのおかげで、これを使用して作成された Web サイトは、さまざまなデバイスの種類に合わせて自動的にサイズ変更できます。 Materialise クラスは、Web サイトをあらゆる画面サイズに適応させるために開発されました。 Materialise で構築された Web サイトには、すべての PC、タブレット、モバイルデバイスからアクセスできます。

Materialize のデザインはフラットで非常にシンプルです。これは、新しい CSS ルールを追加する方が、既存の CSS ルールを変更するよりもはるかに簡単であることを理解して作成されています。影と鮮やかなトーンをサポートします。トーンとトーンはすべてのプラットフォームとデバイスで一貫しています。おそらく最も良いのは、完全に無料で使用できることです。

この記事では、Materialize CSS のダイアログボックスについて説明します。

マテリアライズCSSとは何ですか?

Materialize CSS は、CSS、JavaScript、HTML を使用して開発されたユーザーインターフェイスコンポーネントライブラリです。それを設計したのは Google です。マテリアルデザインは CSS の別名です。これは、イノベーションとテクノロジーを、優れたデザインの古典的な原則と融合させたデザイン言語です。 Google は、あらゆるプラットフォーム上のすべての製品にわたって一貫したユーザーエクスペリエンスを可能にするデザインフレームワークを作成したいと考えていました。

これは、Google によって作成された UI コンポーネントのセットです。ブラウザの移植性、デバイスの独立性、穏やかな劣化などの現代の Web デザインの概念を遵守しながら、見た目が美しく、一貫性があり、便利なオンラインページと Web アプリを構築するために使用されます。 . フットプリントが小さい従来の CSS です。

これはオープンソースであり、正しく動作するには

jQuery JavaScript ライブラリが必要です。再利用可能な Web コンポーネントの構築に使用でき、ブラウザ間互換性があります。カード、タブ、ナビゲーションバー、トーストなどアップグレードおよびカスタマイズされた機能が含まれており、マテリアルデザインの原則に準拠するように変更された、ボタン、チェックボックス、テキストフィールドなどの典型的なユーザーインターフェイス要素の更新されたバリエーションが提供されます。ダイアログボックスとは何ですか?

ダイアログボックスは、小さなウィンドウの形式で表示され、ユーザーに情報を伝えながらユーザーの反応を求めるグラフィカルコントロール要素です。

ダイアログを開いたソフトウェアとの通信を妨げるかどうかに応じて、ダイアログボックスは「

modal

」または「modeless」に分類されます。必要なユーザー操作によって、ダイアログボックスのタイプが決まります。ダイアログボックスが表示されます。 HTML 要素「

dialog

」は、ダイアログボックス、または 子ウィンドウ、インスペクター 、閉じることができる警告などの他の対話型要素を表します。 Materize CSS のダイアログ

Materialize CSS

のダイアログでは、ユーザーは必要に応じて詳細な情報にアクセスできます。これらは Web サイトにすぐには表示されません。その時点で必要な情報は、ダイアログの遷移に関連しています。ダイアログを表示するには, Materialise にはいくつかのオプションがあります。ダイアログは、通常はページ上に非表示になっている素材ですが、必要に応じて詳細情報がポップアップ表示されます。ユーザーは変更に驚かされるべきではなく、ダイアログの外観から理解できるはずです。ユーザーに控えめな警告を与える簡単な方法を提供します。さまざまなデバイスサイズで下のボタンをクリックして、これらのトーストがどのように応答して配置され、サイズ変更されるかをテストできます。

これを実現するには、JavaScript コードを使用して、プログラムで Materialize.toast()

関数を呼び出します。最初の引数として HTML 文字列を指定することもできます。トーストが閉じられたら、それを呼び出すことができます。特定の関数をバックアップします。CSS スタイルクラスを簡単にカスタマイズし、オプションのパラメータとしてトーストに追加できます。

＃＃＃文法＃＃＃リーリー パラメータ

コンテンツ

- ユーザーの画面に表示されるコンテンツを指定するために使用されます。

timeDuration
- 画面にメッセージを表示する時間を指定するために使用されます。

Class
- ツールヒントに適用するスタイルクラスのタイプを指定するために使用されます。

Callback
- トーストが閉じられた後に呼び出されるコールバックメソッドを指定するために使用されます。
次のマテリアライズと CDN リンクは <head> タグ内に記述する必要があります − リーリー
Example

Example

以下の例は、Materialize CSS を使用して Web ページにさまざまなタイプのダイアログボックスを追加する方法を示しています。

リーリー

太字で丸いアラートボックスボタンをクリックすると、太字のテキストが付いた丸い形のアラートボックスが画面に表示されます。強調されたアラートボックスボタンをクリックすると、テキストが強調された長方形のアラートボックスが表示されます。一方、下線付きのアラートボックスボタンをクリックすると、テキストが強調された長方形のアラートボックスが表示されます。アラートボックス、下線付きの長方形のアラートボックスが表示されます。＃＃＃結論＃＃＃