risposta-alla-domanda-sullo-sviluppo-web-bd.com

Material Design ha una linea guida per lo styling di una casella di controllo "seleziona tutto"?

Ho un elenco di caselle di controllo e vorrei aggiungere un interruttore "seleziona tutto". Ho già funzionante, inclusa l'impostazione di uno stato indeterminato quando alcuni degli elementi sono selezionati. Quello che vorrei sapere è, quando l'elenco è un maiuscolo-L Elenco , il Materiale specifica come posizionare la casella di selezione tutto?

Attualmente lo ho in linea con il resto dell'elenco, ma non mi piace come appare:

List styling

Sto pensando di metterlo come azione secondaria (sul lato destro) dell'intestazione della sezione, ma ciò potrebbe introdurre i suoi problemi. Spero che ci sia un modo "giusto" per farlo ma mi accontenterò di suggerimenti in caso contrario.

7
Coderer

Prova a combinare il titolo dell'intestazione della sezione e la casella di controllo principale sopra l'elenco.

Non sono sicuro di come sia il resto dell'interfaccia utente, ma spesso un elenco selezionabile ha il 'seleziona tutto' in alto lungo l'intestazione della tabella o l'intestazione della sezione.

In questo modo puoi eliminare l'opzione 'tutto' (che non è un elemento in sé) e vedere lo stato generale di selezione proprio accanto al titolo della sezione.

Simile a questo:

enter image description here

In questo modo si enfatizza il titolo dell'elenco e si ha una chiara linea di scansione lungo l'elenco.

Il materiale non rientra spesso, di solito solo per gli articoli secondari. Ad esempio, se una casella di controllo o un pulsante di opzione ha opzioni aggiuntive in base alla sua selezione, viene visualizzato un elenco rientrato sotto l'elemento principale.

Nel tuo caso, "Tutto" non è un elemento principale, ma un controllo principale e un indicatore in uno.

Con l'esempio sopra puoi mantenere l'allineamento.

Un altro esempio: in un controllo elenco a discesa:

Questo è un altro esempio, molto probabilmente diverso dal tuo caso, ma fornisce un'ulteriore interazione: la possibilità di selezionare un 'solo' . Questo è fantastico se hai un elenco voluminoso:

enter image description here

Ho citato questo esempio in n altro post :

9
Mike M

Puoi provare a rientrare i valori che scendono al di sotto di tutti. Darà un quadro chiaro ed eliminerebbe il problema dell'inline. Spero che questo risolva il problema e fammi sapere se hai dei dubbi.

enter image description here

1
NB4