web-dev-qa-db-ja.com

ポップオーバーのマテリアルデザインソリューション

マテリアルデザインにポップオーバーがありません。代わりに何を使用すればよいのでしょうか。

たとえば、マテリアルハントがマテリアルデザインに切り替えたときにポップオーバーを置き換えるようにProduct Huntにどのようにアドバイスしますか?

Product Hunt popover example

9
Ronen Teva

ここに方法があります...

マテリアルデザインの物理演算がポップオーバーでどのように機能するかの例については、 このドロップダウン効果 を参照してください。同様の回路図は次のとおりです。

popover 不透明度のフェード、三角形の吹き出しインジケータ、成長の起点(上または中央)はすべて有効なオプションです。


ここに理由があります

マテリアルデザインガイドラインではポップオーバーを指定していませんが、 マテリアルプロパティの仕様 は、ポップアップの作成に使用できる明確なプロパティセットを提供します。関連する材料特性は次のとおりです。

  • マテリアルは同じ平面を占有できません。しかし、材料は積み重ねることができます。
  • 平面で材料を作成できます。 このビデオ を参照してください。
  • 素材は形を変えることができます。 このビデオ を参照してください。

したがって、次のパラメーターを使用してポップオーバーシーケンスを作成できます。

  1. ポップオーバーがコンテンツの上に浮いているように見えます。シャドウが準拠していることを確認してください。 this を参照してください。
  2. このビデオ のように、ポップオーバーはコンテンツの平面で作成されます。

上部のドロップダウンデモは、主にこのパラメーターセットに準拠しています。

11
tohster

この質問が1年以上前に行われてから、マテリアルデザインの仕様が変更された可能性があります。

現在の仕様では、Product Huntはポップオーバーをダイアログに置き換える必要があります。 spec から:

ダイアログは、特定のタスクについてユーザーに通知し、重要な情報を含んだり、決定を要求したり、複数のタスクを伴う場合があります。

enter image description here

具体的には、仕様では、リストアイテム(Product Huntがこのページのコンテンツを変換する必要があるもの)に対して、単純なダイアログを使用して、仕様からリスト時間に関する詳細またはアクションを提供できると述べています。

シンプルメニューにはリストアイテムのオプションが表示されますが、シンプルダイアログにはリストアイテムの詳細やアクションを表示できます。

Product Huntに必要なものと同様の例を次に示します。 enter image description here

1
Meli