As barras de rolagem indicam a localização de um usuário em um documento maior do que o espaço de visualização. Elas permitem que o usuário navegue até 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 giratória ou o touchpad. Tocar nas setas na barra de rolagem move o conteúdo por "páginas", ou seja, incrementos equivalentes à altura da tela. No entanto, se os usuários voarem rapidamente para rolar (dependendo da sensibilidade da tela touchscreen), o movimento de rolagem poderá criar um momento inercial que rola mais do que uma página. Independentemente de como a rolagem é iniciada, o movimento de rolagem precisa sempre se ajustar a um item.
Anatomia
A barra de rolagem é composta pelas funcionalidades de rolagem para cima e para baixo e no indicador de progresso de rolagem. Os chevrons são usados em recursos de rolagem para indicar a direção da rolagem. O indicador de progresso de rolagem é um elemento opcional que indica o conteúdo visível e a posição de rolagem em relação à quantidade total de conteúdo na página.
Observação:o indicador de progresso de rolagem não foi projetado para ser arrastado.
2. Indicador de progresso de rolagem
3. Recurso da rolagem para baixo
Especificações
Posição da barra de rolagem com navegação primária empilhada e barra de controle minimizada
Posição da barra de rolagem somente com cabeçalho do app
Posição da barra de rolagem com cabeçalho do app e barra de controle
Posição da barra de rolagem com cabeçalho do app e barra de controle expandida
Posição da barra de rolagem com o cabeçalho/barra do app e a barra de controle minimizada
Posição da barra de rolagem somente com cabeçalho/barra de apps
Posição da barra de rolagem com cabeçalho do app e barra de controle
Posição da barra de rolagem com cabeçalho do app e barra de controle expandida
Posição da barra de rolagem com altura da tela curta
Indicador de progresso de rolagem opcional
Estilos
Cor
| Elemento | Cor(modo dia) | Cor (modo noturno) |
|---|---|---|
| Ícones principais: estado ativo | Branco | Branco 88% |
| Ícones principais: estado inativo | Branco a 56% | Branco a 50% |
| Indicador de progresso de rolagem | Branco @ 16% | Branco @ 12% |
Dimensionamento
| Elemento | Tamanho (dp) |
|---|---|
| Ícone principal | 44 |
| Área de toque | 76 |
| Largura do indicador de progresso da rolagem | 6 |
| Raio arredondado dos cantos (R4) | Integral |
Exemplos
