[角] Angular6 Material2はアラートメッセージのプロンプトボックスをカプセル化しています

角状材料 マテリアルデザイン(中国語名:Material Design Language)は、Googleが発表した新しいデザイン言語で、Googleはこれを携帯電話、タブレット、デスクトップ、そして「その他のプラットフォーム」に対して、より一貫性があり幅広い「見た目と感覚」を提供するために設計されていると述べています。 Googleによると、Material Designは「紙とインクの研究に触発されたリアルタッチ」に基づいており、ユーザーが「力学の原理に反することなく、現実世界に代わる視覚的な手がかりを理解できる」とされています。 さらに、光、表面、運動の基本原理は、物体同士がどのように動き、相互作用し、空間内で存在するかを表現する上で重要な役割を果たします。 リアルな光と影の効果で、ブロック間の継ぎ目や区切り、動く部分のマークが描かれています。 より詳細な紹介については、Materialの公式ウェブサイトをご覧ください。ハイパーリンクのログインが見えます。。 Angular Materialは、Material仕様(公式ウェブサイトのアドレス)に基づいてAngularチームが完璧に実装したAngular2+ UIフレームワークのセットです。ハイパーリンクのログインが見えます。 この記事ではAngular MaterialのMatSnackBarコンポーネントを使ってアラートボックスをカプセル化しています。まずレンダリングを見てみましょう。 ステップ1:インストール ログインが見えます。 ステップ2:アニメーションの設定 アニメーションパッケージがインストールされたら、BrowserAnimationsModuleをアプリケーションにインポートしてアニメーションサポートを有効にします。 インポートapp.module.ts以下の通りです: ログインが見えます。 ステップ3:テーマをインポートする テーマを含めることは、すべてのコアスタイルやテーマスタイルをアプリケーションに適用するために必要です。 既成テーマを始めるには、Angular Materialの既成テーマの一つをアプリケーション全体に含めてください。 Angular CLIを使っているなら、設定できますstyles.scss へ： ログインが見えます。 もしあなたが未使用でしたAngular CLIそうしたら<link>パス可能ですあなたの要素にはあらかじめ設定されたテーマindex.htmlが含まれています。 ステップ4:アラートボックスの封じ込めを始める cmdコマンドcdを使って/app/servicesディレクトリに入力すると、自分のプロジェクトに合わせてディレクトリを修正し、「サービス作成コマンド」を実行します。 ログインが見えます。 TSコードは以下の通りです: ログインが見えます。 ステップ5:プロンプトボックスをCSSスタイルで設定する プロジェクトにおいてstyles.scssファイルの一番下に、実際の状況に応じて変更可能な以下のスタイルを追加してください! コードは以下の通りです: ログインが見えます。 ステップ6:アラートボックスを使う ログインインターフェースを例に取り、login.module.tsにインポートしています。アラートサービスそしてMatSnackBarModule構成モジュールは以下の通りです: ログインが見えます。 コンポーネントで使用されるコードlogin.component.ts以下の通りです: ログインが見えます。 MatSnackBarコンポーネントAPIドキュメント:ハイパーリンクのログインが見えます。 (終わり)

スコア

参加者数1	MB+1	貢献する+1	倒れる 理由
キル	+ 1	+ 1	とても助かりました

すべての評価を見る