Materialise 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 リンクは タグ内に記述する必要があります − リーリー

  Example
の中国語訳は次のとおりです:

Example

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

リーリー

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

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

Materialize past()

関数について学びました。 onclick() 関数などの JavaScript の概念も学びました。

以上がMaterialise CSS のダイアログの説明を行うの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。