Tenemos los tokens de diseño para que, basándote en ellos, puedas personalizarlo. Está bastante bien especificado. Pero si te gusta algo que llamamos estilo libre, entonces puedes ir sin estilo, usar algo como Tailwind. No hay una API estricta que aprender, simplemente puedes usar cualquier clase de Tailwind en esos componentes y estilizarlos como desees.
Así que el modo estilizado es este. Tenemos un par de temas, pero Aura es el último. Nuestro equipo de diseño ha dedicado mucho tiempo a crear esta plantilla de aspecto profesional. Tiene diferentes modos, diferentes... Puedes personalizar fácilmente los colores, todos los colores y superficies, los bordes, todo. Los visuales de enfoque y la mayoría de las partes, las sombras, están disponibles para personalizarlas según tus necesidades.
Y si necesitas algo que se vea bien desde el principio, entonces el probable modo estilizado es para ti. El modo sin estilo está implementado de una manera que Vue.js nos permitió hacerlo muy fácilmente. En una biblioteca regular, tienes los componentes. Renderizan algunas clases CSS específicas, como P algo, como en este caso, PInputText. Y si estableces la propiedad sin estilo en true globalmente, o también puedes usarla en un componente específico, esos selectores CSS no se renderizan en el DOM, lo que significa que perderán su estilo. También puedes hacerlo con la propiedad sin estilo para elegir que un componente específico no tenga estilo. Sin estilo significa que es funcional, totalmente funcional, la accesibilidad está presente, pero cuando lo ejecutes, verás un aspecto transparente. No será realmente atractivo. Eso significa que debes estilizarlo de alguna manera.
En ese caso, entran en juego las propiedades mágicas de paso, los atributos de paso. Por lo general, esto es algo que hemos visto de la comunidad después de desarrollar estas bibliotecas durante años. Algunos usuarios prefieren componentes con buen aspecto desde el principio, pero otros usuarios realmente necesitan personalizarlos. Para aquellos, estos son como componentes de caja negra, ¿verdad? Simplemente agregas el nombre de la etiqueta y interactúas, pero incluyen muchos elementos DOM. En este caso, te gustaría acceder a los componentes internos. Puedes usar estos atributos de paso. Por ejemplo, este menú desplegable tiene muchos elementos DOM, como listas, paneles, el icono de cierre, etc. Puedes personalizarlos y acceder a ellos fácilmente. Puedes agregar clases, puedes agregar cualquier atributo al DOM, como identificadores de prueba o algo así. Por ejemplo, este menú desplegable tiene un elemento raíz y un icono de limpiar. Puedes agregar eventos y todo lo que necesites, y puedes usarlo localmente para un componente específico o globalmente para todos los menús desplegables.
Comments