Listy
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Listy to wizualna reprezentacja co najmniej 1 powiązanego elementu.
Są one często używane do wyświetlania kolekcji opcji.
Materiały
Najciekawsze
- Listy to ciągły zbiór tekstu lub obrazów.
- Listy powinny być naturalne i łatwe do przejrzenia.
- Listy składają się z elementów zawierających podstawowe i dodatkowe działania reprezentowane przez ikony i tekst.
Warianty
Istnieją 3 typy list: jednowierszowe, dwuwierszowe i trzywierszowe.
- Lista jednowierszową: każdy element jest opisywany w jednym wierszu. Dzięki temu prostemu projektowi każdy element jest wyraźnie od siebie odróżnialny.
- Lista 2-wierszową: do przekazywania każdego elementu używa 2 równoległych linii.
Taka struktura zapewnia naturalną czytelność i zapobiega przeciążeniu poznawczemu.
- Lista 3-liniowa: każdy element jest reprezentowany przez 3 równoległe linie.
Ten dekoracyjny element przyciąga wzrok.
Anatomia
- Ikona: mała grafika przedstawiająca konkretny obiekt lub działanie, często wykorzystywana do wizualnego przedstawienia idei lub koncepcji.
- Overline (nadlinia): krótki wiersz tekstu, który pojawia się nad tytułem lub podtytułem. Często służy do podania dodatkowego kontekstu lub podkreślenia treści.
- Tytuł: duży, pogrubiony tekst, który jest głównym nagłówkiem elementu lub strony.
- Podtytuł: mniejszy wiersz tekstu, który zawiera dodatkowe informacje lub kontekst pod tytułem głównym.
- Element sterujący: element interaktywny, który umożliwia użytkownikowi podjęcie decyzji.
Stany
Dane techniczne
Wykorzystanie
Listy to uporządkowane pionowo grupy tekstu i obrazów.
Optymalizowana pod kątem czytania ze zrozumieniem, składa się z pojedynczej ciągłej kolumny elementów.
Elementy listy mogą zawierać główne i dodatkowe działania reprezentowane przez ikony i tekst.
check_circle
Tak
Elementy listy nie są przyciskami. Elementy nie mają kontenerów. Elementy listy są domyślnie niewybrane i nieaktywne.
warning
Ostrzeżenie
Tłoma kontenera dla elementów listy używaj tylko wtedy, gdy jest to konieczne.
Elementy wyboru
Określa wyświetlanie informacji i czynności dotyczących elementów listy. Mogą być wyrównane do lewej lub prawej krawędzi elementu listy.
- Pola wyboru: wybierz co najmniej 1 element z listy.
- Opcje: wybierz dokładnie 1 element z listy.
- Przełączniki: włączanie i wyłączanie opcji.
check_circle
Tak
Użyj wskaźnika wyboru ikony, aby wyraźnie pokazać wybrany element na liście. Ułatwi to użytkownikom rozpoznanie wybranego elementu i poprawi ogólne wrażenia z korzystania z aplikacji.
cancel
Nie
Nie polegaj tylko na kolorze tła, aby wskazać element na liście.
cancel
Nie
Unikaj umieszczania przycisków w elementach listy, ponieważ może to powodować zamieszanie, który element jest obecnie aktywny.
Ikony
check_circle
Tak
Jeśli na liście wyświetlasz treści tego samego typu, pomiń ikony, aby zmniejszyć ilość elementów wizualnych i ulepszyć wrażenia użytkowników. Unikaj używania ikon na liście, jeśli nie pełnią one żadnej funkcji i nie dostarczają dodatkowych informacji.
cancel
Nie
Nie używaj tej samej ikony dla wszystkich elementów na liście. Może to przytłoczyć użytkowników i wprowadzić ich w zamieszanie. Zamiast tego używaj ikon tylko wtedy, gdy dodają one wartości lub dostarczają dodatkowych informacji.
Awatary i obrazy
Elementy listy mogą zawierać obrazy w okrągłym przycięciu, które przedstawiają osobę lub podmiot.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
