web-dev-qa-db-ja.com

マテリアルデザインに「すべて選択」チェックボックスのスタイル設定に関するガイドラインはありますか?

チェックボックスのリストがあり、「すべて選択」トグルを追加したいと思います。一部の項目が選択されたときに不確定状態を設定するなど、すでに機能しています。私が知りたいのは、リストが capital-L List の場合、マテリアルはすべて選択ボックスの配置方法を指定するのですか?

私は現在、それを他のリストとインラインで持っていますが、見た目が好きではありません。

List styling

セクションヘッダーの(右側の)セカンダリアクションとして配置することを考えていますが、それによって独自の問題が発生する可能性があります。これを行う「正しい」方法があることを願っていますが、そうでない場合は、提案を受け入れます。

7
Coderer

リストの上にあるセクションヘッダータイトルとマスターチェックボックスを組み合わせてみてください。

残りのUIがどのように見えるかはわかりませんが、多くの場合、選択可能なリストには、テーブルヘッダーまたはセクションヘッダーに沿って「すべて選択」があります。

このようにして、 'all'オプション(それ自体はアイテムではありません)を削除し、セクションタイトルの横にある一般的な選択状態を確認できます。

これに似ています:

enter image description here

これにより、リストのタイトルが強調され、リストの下に明確なスキャンラインが表示されます。

マテリアルはそれほど頻繁にインデントしません。通常はサブアイテムのみです。たとえば、チェックボックスまたはラジオボタンの選択を条件として追加のオプションがある場合、インデントされたリストがその親の下に表示されます。

あなたの場合、「すべて」は親アイテムではなく、1つのマスターコントロールとインジケータです。

上記の例では、配置を維持できます。

別の例:ドロップダウンリストコントロール:

これは別の例で、おそらくあなたの場合とは異なりますが、1つの追加の相互作用を提供します:「のみ」を選択する機能。これは、膨大なリストがある場合に最適です。

enter image description here

私はこの例を another post で引用しました:

9
Mike M

すべての下に来る値をインデントすることができます。それは明確な画像を提供し、インラインの問題を解消します。これで問題が解決し、疑問がある場合はお知らせください。

enter image description here

1
NB4