← Adicione mais detalhes e explique as configurações (se aplicável) →
Olá
O componente requer um carregador deslizante.
Este componente torna a linha inteira clicável e adiciona uma animação de clique ao item da lista de tópicos. Você pode escolher entre algumas animações.
push (padrão em dispositivos de toque): quando você clica nele, ele empurra para dentro e adiciona um efeito de fundo.
background (padrão em dispositivos sem toque): quando você clica nele, ele adiciona um fundo…
slider: quando você clica nele, ele adiciona um carregador deslizante sob o item da lista de tópicos e oculta o controle deslizante principal superior.
blur: quando você clica nele, ele desfoca os outros tópicos da lista.
Configurações do Tema
Você pode selecionar animações separadamente em dispositivos sem toque e com toque.
A ideia por trás disso é criar um toque natural semelhante ao de um aplicativo em dispositivos com tela sensível ao toque. Assim, a animação de “push” funciona também na visualização desktop se for um dispositivo com tela sensível ao toque.
Mas sim, acho que pode funcionar facilmente em dispositivos sem tela sensível ao toque também. Provavelmente vale a pena uma configuração extra.
Muito bem feito, Don! Eu testei isso com Topic List Thumbnails e funciona na maior parte logo de cara. Push e Blur funcionam como esperado, mas Slider aparece no topo de todas as miniaturas em vez de seguir a miniatura, e background não faz nada (o que faz sentido). Há alguma chance de você dar um pouco mais de atenção a isso? Eu adoraria ter o slider no desktop, ou alguma outra ideia brilhante que você certamente terá!
Obrigado, Don! Eu tentei e está funcionando, mas a cor do controle deslizante não está correta, ou talvez seja um problema de z-index? O controle deslizante neste vídeo deveria ser da cor dourada, mas é cinza. Acredito que deveria ser terciário? Estou testando isso sem nenhum outro CSS, só para você saber. Ele estava exibindo a cor dourada antes da atualização, é por isso que estou pensando em z-index
Verifiquei seu site e você está usando a versão anterior que não contém a correção do z-index. Por favor, atualize o componente para a versão mais recente.
Obrigado Don, está tudo bem agora, devo ter atualizado rápido demais :cara_maluca:
Uma sugestão; ter uma opção para desativar isso completamente para não-toque. Agora que experimentei o controle deslizante, não tenho certeza se gosto dele, pois ele remove o controle deslizante padrão e torna a experiência do usuário inconsistente.
@Don - Adorei isso! Eu preferiria (como no Componente de Tema de Tópico Clicável) ao passar o mouse, que em qualquer lugar dentro de uma linha/item, o cursor fosse o ponteiro…
@Don - Parece que a configuração da cor de fundo para o efeito de pairar só entra em vigor após clicar ou tocar na linha/item, e não no hover convencional anterior (como no Componente de Tema de Tópico Clicável).
Esta é uma ótima ideia. Mesclei uma atualização que adiciona uma configuração para desativar a animação (componente) separadamente em dispositivos de toque ou não.
Agora você pode selecionar a opção none, que desativará completamente o componente.
O componente atualmente só torna clicável a linha inteira do item da lista de tópicos. Portanto, o último item da lista de tópicos funciona como padrão agora. É por isso que o ponteiro do cursor só aparece no item da lista de tópicos em dispositivos não sensíveis ao toque.
O componente lida com dispositivos não sensíveis ao toque e sensíveis ao toque separadamente. O fundo é ativado ao passar o mouse, em dispositivos não sensíveis ao toque e em dispositivos sensíveis ao toque após tocá-lo. Mas acho que precisará de alguma atualização porque o hover não funcionará, por exemplo, em laptops com tela sensível ao toque que podem ter um cursor. Acho que podemos ativá-lo globalmente na visualização de desktop e no ponteiro também.
Você poderia elaborar o que você quer dizer com a dependência de “carregador deslizante”, por favor. É outro tema, plugin, biblioteca JavaScript ou outra coisa?
O slider é a nova animação de carregamento de página. Ao carregar uma página no Discourse, há uma barra de progresso horizontal na parte superior da tela. Esse é o slider.
Ele agora está definido como padrão, mas pode ser revertido para o spinner de carregamento original através da configuração indicador de carregamento de página.
O motivo pelo qual funciona apenas com o slider é que, quando você clica em um tópico, o conteúdo da página é instantaneamente limpo e alterado para o spinner. Portanto, não há tempo para fazer uma animação. Com o slider, permanecemos na página atual enquanto a próxima página carrega, então temos tempo para executar uma animação.
O componente requer um carregador deslizante.
