As barras de rolagem indicam a localização do usuário em um documento maior do que a área de visualização. Elas permitem que o usuário navegue para o restante do documento movendo a área de visualização da janela para cima ou para baixo.
Os usuários interagem com as barras de rolagem usando o toque, a roda de rolagem ou o touchpad. Tocar nas setas da barra de rolagem move o conteúdo por páginas, ou seja, em incrementos equivalentes à altura da tela. No entanto, se o usuário rolar rapidamente (dependendo da sensibilidade da tela sensível ao toque), esse movimento pode criar um impulso inercial que rola mais do que uma página. Independentemente de como a rolagem é iniciada, o movimento deve sempre parar em um item.
Anatomia
A barra de rolagem é composta pelos botões de rolagem para cima e para baixo e pelo indicador de progresso da rolagem. Os botões de rolagem utilizam setas (chevrons) para indicar a direção da rolagem. O indicador de progresso da rolagem é um elemento opcional que indica o conteúdo visível e a posição da rolagem em relação à quantidade total de conteúdo na página.
2. Indicador de progresso de rolagem
3. Possibilidade de rolagem para baixo
Especificações
Posição da barra de rolagem com navegação principal empilhada e barra de controle minimizada.
Posição da barra de rolagem apenas com o cabeçalho do aplicativo
Posição da barra de rolagem com cabeçalho do aplicativo e barra de controle
Posição da barra de rolagem com cabeçalho do aplicativo e barra de controle expandida
Posição da barra de rolagem com barra de aplicativos/cabeçalho e barra de controle minimizada
Posição da barra de rolagem apenas com barra de aplicativos/cabeçalho
Posição da barra de rolagem com cabeçalho do aplicativo e barra de controle
Posição da barra de rolagem com cabeçalho do aplicativo e barra de controle expandida
Posição da barra de rolagem com altura de tela reduzida
Indicador opcional de progresso de rolagem
Estilos
Cor
| Elemento | Cor (modo diurno) | Cor (modo noturno) |
|---|---|---|
| Ícones principais - estado ativo | Branco | Branco @ 88% |
| Ícones primários - estado inativo | Branco @ 56% | Branco @ 50% |
| Indicador de progresso de rolagem | Branco @ 16% | Branco @ 12% |
Tamanhos
| Elemento | Tamanho (dp) |
|---|---|
| Ícone principal | 44 |
| Alvo de toque | 76 |
| largura do indicador de progresso de rolagem | 6 |
| Raio do canto arredondado (R4) | Completo |
Exemplos
