Aquest article explica com recrear l'efecte estil macOS Dock amb una pila de targetes animades utilitzant Stimulus i Tailwind CSS, amb un enfocament a aconseguir la major part del comportament amb CSS i mínim JavaScript per a l'estat.
Fundació i model de dades: en lloc d'un model Active Record tradicional es pot utilitzar un model lleuger basat en ActiveModel per representar cada targeta amb atributs com assumpte i descripció. La vista itera sobre una col·lecció de targetes i renderitza una parcial per a cadascuna per mantenir el codi net i reutilitzable.
Disseny del llenç: per aconseguir l'aspecte es col·loca la llista de targetes fixada a la part inferior de la pantalla sobre un fons amb degradat. Amb Tailwind CSS s'aconsegueix fàcilment un fons cridaner, i s'utilitzen utilitats d'espaiat, contenidor i posicionament per centrar la pila i limitar la seva amplada.
Estil de les targetes: cada targeta es dissenya amb fons semitransparent, desenfocament de fons, vores subtils, radi per a cantonades i ombra. En col·lapsar la pila, les targetes es posicionen de manera absoluta unes sobre altres i s'apliquen transformacions escalades, translacions i canvis d'opacitat per simular profunditat i ordre a la pila.
Posicionament dinàmic amb class names: l'ajuda de renderització de Rails permet conèixer l'ordre de cada parcial i amb un helper de construcció de classes s'assignen classes condicionals segons la posició a la pila. D'aquesta manera, la targeta superior està a escala 100 i les següents són lleugerament més petites i més translúcides, creant l'efecte apilat.
Control minimalista amb Stimulus: per gestionar l'obertura i tancament de la pila s'afegeix un controlador Stimulus amb un valor booleà open. Els mètodes show i hide activen i desactiven aquest valor. Amb els data values de Stimulus i els modificadors de grup de Tailwind s'apliquen variants CSS basades en l'estat obert o tancat sense necessitat de manipular directament les transformacions amb JavaScript.
Detectar clic fora de la pila: per tancar la pila en clicar fora es pot utilitzar la llibreria stimulus fx que aporta un modificador whenOutside. Amb una configuració senzilla es registra l'extensió i s'afegeix una acció global que crida el mètode hide quan el clic ocorre fora de l'element controlat, evitant escriure lògica complexa d'escolta d'esdeveniments.
Solució per a enllaços a les targetes: si cada targeta és un enllaç i alhora ha d'obrir la pila en clicar, es pot utilitzar la propietat CSS pointer events amb la utilitat pointer events none quan la pila està tancada. D'aquesta manera, el clic passa a l'element contenidor que obre la pila i no navega immediatament, cosa que evita JavaScript addicional i incrementa la usabilitat.
Resum tècnic: la major part de l'efecte s'aconsegueix amb utilitats de Tailwind aplicades condicionalment mitjançant variants de grup i valors de Stimulus. Stimulus s'utilitza únicament per controlar l'estat open i per tancar la pila en detectar clics fora. Aquesta aproximació manté la interfície accessible, performant i fàcil de mantenir.
Com aplicar això en projectes reals: aquest patró és ideal en panells de notificacions, accessos ràpids i menús contextuals. Si necessites adaptar la solució a una aplicació concreta, es poden parametritzar transformacions, duracions i punts d'origen perquè coincideixin amb el llenguatge visual del teu producte.
Sobre Q2BSTUDIO: a Q2BSTUDIO som una empresa de desenvolupament de programari especialitzada en aplicacions a mida i programari a mida. Dissenyem i implementem solucions que integren intel·ligència artificial i IA per a empreses per optimitzar processos, millorar l'experiència d'usuari i generar insights accionables. El nostre equip també ofereix serveis de ciberseguretat per protegir aplicacions i dades, així com serveis cloud AWS i Azure per desplegar infraestructures segures i escalables. A més, brindem serveis d'intel·ligència de negoci i solucions amb Power BI per visualitzar dades i prendre decisions informades. Treballem amb agents IA i arquitectures d'IA per a empreses que requereixen automatització avançada i models personalitzats.
Si vols que implementem una versió a mida d'aquesta interfície, o que la integrem amb solucions més àmplies d'intel·ligència artificial, ciberseguretat, serveis cloud AWS i Azure o serveis d'intel·ligència de negoci, contacta amb Q2BSTUDIO per a una consultoria inicial i un pla d'implementació que s'ajusti als teus objectius.
Paraules clau integrades per a SEO: aplicacions a mida, programari a mida, intel·ligència artificial, IA per a empreses, agents IA, ciberseguretat, serveis cloud AWS i Azure, serveis d'intel·ligència de negoci, Power BI.
Contacte i següent pas: sol·licita un prototip funcional i un pressupost orientatiu amb Q2BSTUDIO i transforma aquesta idea d'interfície en una característica real i alineada amb la teva arquitectura de programari i objectius de negoci.
