Button
<plz-button> | PlzButton
Los componentes
Se utilizan en distintos contextos y situaciones en una misma página. Pueden usarse para busquedas, para formularios, para contactos, para redes sociales, para cargas, etc.
Ejemplos
Variantes del componente button
Usaremos el atributo variant para elegir el estilo del componente que se prefiera entre "default", "shadow", "progress" y "icon".
Dentro de los usos del componente, los más usados son estas cuatro variantes.
Link button
Usaremos el atributo link para determinar la url a la que se accederá al hacer click en el componente. En caso de no determinar una url mediante el atributo, se dará por entendido que se usa el componente con otro tipo de acción.
Para asegurarnos que el link se abre como queremos, haremos uso del atributo target, en este podremos elegir entre "_blank", "_self", "_parent", "_top" y "framename". En el caso de no hacer uso de este atributo, se utilizará por defecto "_self" (se abrirá la página en el mismo marco en el que se ha hecho el click).
Estos dos atributos se pueden usar con las distintas variantes del compoennte.
Colores del componente button
Usaremos el atributo color para elegir el color del componente que se prefiera entre "black", "purple", "blue", "green", "red", "orange", "yellow" y si no eliges ningún color tendrás el de por defecto.
Dependiendo del estilo de página en que se usen, es apropiado cambiar el color acorde a esta.
Colores hover del componente
Usaremos el atributo hover-color para elegir el color de componente para cuando pasemos por encima de este con el cursor, si no haces uso de este atributo, no habrá hover en el componente.
Se puede usar tanto hex, rgb o rgba para el atributo hover-color.
Variante Progress
Usaremos el atributo variant para elegir "progress". También haremos uso del atributo active al que deberemos pasarle "true" o "false" dependiendo de si queremos que el componente esté activo o no. En el caso de que no esté activado, pasará a ser un button normal hasta que el atributo active cambie. Este tipo de variente se suele usar principalmente en formularios, ya que puedes indicar al usuario que su petición se está procesando y una vez termine volverá a la normalidad (es dinámico).
Podremos elegir el color de la animación de carga del interior del componente mediante el atributo color-progress.
A continuación ejemplos de la variante en sus dos versiones (activado y no activado).
Sombras del componente button
Usaremos el atributo shadow-color para elegir entre "black", "purple", "blue", "green", "red", "orange" y "yellow". También puedes elegir colores como hemos visto anteriormente con el atributo color.
Puedes buscar combinaciones entre los distintos atributos para dar forma, color, sombra y tamaño dependiendo de lo que estés buscando para tu sitio web.
Variante icon
Usaremos el atributo variant para elegir "icon" y el atributo icon para elegir entre "github", "linkedin" y "mail" en el caso de querer los icon button predefinidos. Este tipo de button se usa en gran variedad de ocasiones, pero siempre va a destacar para compartir información de redes sociales.
A continuación un ejemplo de los distintos iconos con diferentes tamaños:
Recalcar que si deseas un icono distinto, siempre puedes añadirlo pasando por el atributo icon la ruto de la imagen que deseas como botton. La imagen será detectada como podemos observar en la segunda tanda de ejemplo.
Forma del componente button
Usaremos el atributo corner para elegir la forma del botón que se prefiera entre "default", "low-rounded", "rounded", "square", y "circle".
Tamaño del componente button
Puedes usar el atributo size para elegir el tamaño de button que se prefiera entre "small", "default" y "big".
Dentro de estos tamaños, lo normal es uno ni grande ni pequeño, pero siempre hay casos donde puedes necesitar distintas opciones.
Recomendación
Se puede hacer uso de todo lo que hemos visto anteriormente para hacer combinaciones.
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'default' - 'icon' - 'progress' | 'default' |
link | Url a la que se accedera a partir del componente | 'docs-ejemplo.html' | |
Distintas formas de mostar el link del componente | '_self' - '_blank' - '_parent' - '_top' - 'framename' | '_self' | |
color | Distintos colores del componente | 'default' - 'black' - 'purple' - 'blue' - 'green' - 'red' - 'orange' - 'yellow' | 'default' |
hover-color | Distintos colores para el hover del componente | hex, rgb, rgba | |
color-progress | Distintos colores para la animación de carga del componente | hex, rgb, rgba | 'white' |
shadow-color | Distintos colores de sombra para el componente | 'black' - 'purple' - 'blue' - 'green' - 'red' - 'orange' - 'yellow' | |
size | Distintos tamaños del componente botón | 'default' - 'small' - 'big' | 'default' |
corners | Distintas formas de las esquinas del componente | 'default' - 'low-rounded' - 'rounded' - 'square' - 'circle' | 'default' |
icon | Solo compatible con la variante "icon". Distintos iconos para la variante | 'github' - 'linkedin' - 'mail' - 'palaze' - '..url..' |