25 lines
1.4 KiB
Plaintext
25 lines
1.4 KiB
Plaintext
<%# app/views/shared/_carrossel_controles.html.erb
|
|
Setas + indicador do carrossel (ver carrossel_controller.js). Nascem
|
|
escondidos: quem decide se esta tela é pequena o bastante para paginar é o
|
|
JS — em monitor grande a lista aparece inteira e estes controles não voltam.
|
|
|
|
Alvos de 56px: a tela é usada no celular, em movimento.
|
|
|
|
locals: anterior:/proximo: (rótulos acessíveis, opcionais). %>
|
|
<% anterior = local_assigns.fetch(:anterior, 'Itens anteriores') %>
|
|
<% proximo = local_assigns.fetch(:proximo, 'Próximos itens') %>
|
|
|
|
<div data-carrossel-target="controles" class="hidden flex items-center justify-between gap-3 mt-4">
|
|
<button type="button" data-action="carrossel#anterior" data-carrossel-target="anterior"
|
|
class="bg-[#1a1a1a] border border-[#2a2a2a] hover:border-orange-500 text-white rounded-2xl w-14 h-14 flex items-center justify-center"
|
|
aria-label="<%= anterior %>">
|
|
<%= icone :voltar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
<span data-carrossel-target="indicador" class="text-gray-300 text-base font-semibold"></span>
|
|
<button type="button" data-action="carrossel#proxima" data-carrossel-target="proximo"
|
|
class="bg-orange-500 hover:bg-orange-600 text-black rounded-2xl w-14 h-14 flex items-center justify-center"
|
|
aria-label="<%= proximo %>">
|
|
<%= icone :avancar, cor: nil, tamanho: 'w-6 h-6', espaco: false %>
|
|
</button>
|
|
</div>
|