Button

# Button

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 馃憠 Vuesax 3.x

Los botones son parte fundamental de cualquier proyecto, con vuesax puedes agregar un boton genial con una sola linea de c贸digo

los botones tienen todos los estados como active, focus, hover, para hacer mas simple su implementaci贸n y agilizar el trabajo

Code copied

# Flat

Puedes cambiar el estilo completo hacia flat de un bot贸n con la propiedad flat que su valor es un boolean por ende con solo agregarla ya se cambiaran los estilos

Code copied

# Border

Puedes cambiar el estilo completo hacia border de un bot贸n con la propiedad border que su valor es un boolean por ende con solo agregarla ya se cambiaran los estilos

Code copied

# Gradient

Puedes cambiar el estilo completo hacia Gradient de un bot贸n con la propiedad gradient que su valor es un boolean por ende con solo agregarla ya se cambiaran los estilos

Gradient Color Autom谩tico

Los colores del gradiente se generan autom谩ticamente por la propiedad color que en este ejemplo es el color primary

Code copied

# Relief

Cambia el estilo del bot贸n a un aspecto de relieve con la propiedad relief, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Transparent

Cambia el estilo del bot贸n con la propiedad transparent, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Shadow

Cambia el estilo del bot贸n con la propiedad shadow, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Color

Cambia el color del componente Button con la propiedad color y el valor de el color por ejemplo (#fff, rgba(100,10,5) o los colores principales de vuesax), esto solo afectara al componente y su valor puede ser din谩mico

Valor Permitido

La propiedad color permite los colores principales de vuesax ( Primary(default), Success, danger, warn, dark )
Tambien estan permitidos los colores (RGB y HEX)

Colores Boolean (Opcional)

Ahora puedes usar los colores principales directamente en el componente como un valor Boolean
si quieres que el componente sea de color warn con agregar la propiedad warn al componente ya se cambiara el color

Code copied

# Icon

Si necesitas un bot贸n de solo icono usa la propiedad icon, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

esta propiedad hace que el boton tenga un tama帽o especifico haciendo que sea del mismo ancho y alto, no usar cuando sea icono y texto

Iconos por defecto

Vuesax no usa ninguna librer铆a o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en alg煤n lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ning煤n tipo de fuente externa, y se podr谩 sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Code copied

# Icon - Text

Si necesitas un bot贸n con texto e icon puedes hacerlos agreg谩ndolos en el slot default.

Code copied

# Circle

Puedes redondear completamente las esquinas con la propiedad circle, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Square

Puedes hacer todas las esquinas totalmente rectas con la propiedad Square, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Size

Cambia el tama帽o de todo el boton incluyendo padding, font-size y borde con la propiedad size

valores:

  • xl
  • l
  • default
  • small
  • mini
Code copied

# Loading New

Ahora puedes agregar un estado de cargando con la propiedad loading, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Upload New

Ahora puedes agregar un estado de enviando o subiendo datos al servidor con la propiedad upload, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Block New

Puedes hacer que el boton tenga todo el ancho permitido con la propiedad block, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

Code copied

# Animate New

Puedes crear una animaci贸n al componente agregando el slot="animate" y el contenido sera el que aparecer谩 al animarse el componente

tambi茅n puedes cambiar el tipo de animaci贸n con la propiedad animation-type y los valores permitidos son (vertical, scale, rotate)

Code copied

# Social New

Usar los colores de las redes sociales es algo muy com煤n en un proyecto ya sea un boton de login o uno de compartir por eso vuesax te facilita el buscar cada color y solo con poner el nombre de la red ya se cambia todo el estilo del componente

Colores soportados: (facebook, twitter, youtube, pinterest, linkedin, snapchat, whatsapp, tumblr, reddit, spotify, amazon, medium, vimeo, skype, dribbble, slack, yahoo, twitch, discord, telegram, google-plus, messenger)

Code copied

# Floating New

Puedes hacer que un boton sea de estilo flotante f谩cilmente con la propiedad Floating, la propiedad es un boolean por lo que puedes agregarla sin ning煤n valor.

estos botones normalmente hacen una acci贸n importante en especifico y van con una posici贸n fija en la esquina inferior

Code copied

# Group New

Si necesitas hacer un grupo de botones puedes usar el sub-componente <vs-button-group></vs-button-group> y adentro en el slot default poner los botones que quieres agrupar

Code copied

# Toggle New

Este es un ejemplo de lo que puedes lograr con simples l贸gicas y pocas lineas de c贸digo.

Code copied

# To - href New

Si necesitas usar un boton como un link de vue-router o un link externo puedes hacerlo con las propiedades (to: vue-router link) o (href: html link externo)

Code copied

# API

props

Property Type Values Description default Example More
color String primary success danger warning dark RGB HEX Cambia el color del componente y algunos de sus sub componentes. primary Usage Open Close 
<vs-button
  color="success" 
>
  Success
</vs-button>
style button Prop flat border gradient transparent dashed shadow relief floating Cambia el estilo del componente y de sus estados. Usage Open Close 
<vs-button
  flat
  >
  Flat
</vs-button>
active Boolean true false Determina si el componente esta activo y cambia su estilo a ese estado. false Usage Open Close 
<vs-button active >
  Default
</vs-button>
upload Boolean true false Determina si el componente tiene activo el estado de upload cambiando el estilo y agregando la animaci贸n. false Usage Open Close 
<vs-button upload >
  <i class='bx bxs-wallet'></i> Wallet
</vs-button>
to String url - vue-router Agrega la funcionalidad de vue-router al bot贸n, al hacer click se va a redirigir a la ruta pasada. false Usage Open Close 
<vs-button to="/" >
  Example prop - to
</vs-button>
href String href - link Agrega un href de un link externo para agregar la funcionalidad al hacer click en el componente. false Usage Open Close 
<vs-button href="https://lusaxweb.github.io/vuesax/" >
  Example prop - url
</vs-button>
blank Boolean true false como en un elemento html `a` determina si se abre una nueva ventana o se sustituye la actual. false Usage Open Close 
<vs-button blank href="https://lusaxweb.github.io/vuesax/" >
  Example prop - url
</vs-button>
icon Boolean true false Determina si el componente contiene solo un icono, al agregar esta propiedad el componente tiene un ancho y alto igual. false Usage Open Close 
<vs-button icon >
  <i class='bx bx-home-alt'></i>
</vs-button>
circle Boolean true false Cambia el border-radius para dar un estilo de circulo. false Usage Open Close 
<vs-button icon circle >
  <i class='bx bx-home-alt'></i>
</vs-button>
square Boolean true false Cambia el border-radius para dar un estilo de rect谩ngulo. false Usage Open Close 
<vs-button icon square > // <------
  <i class='bx bx-home-alt'></i>
</vs-button>
block Boolean true false Cambia el ancho del componente al total posible determinado por el elemento padre. false Usage Open Close 
<vs-button block >
  <i class='bx bxs-paint-roll' ></i> Edit Theme
</vs-button>
animationType Boolean true false Cambia el tipo de animacion, esta propiedad solo funciona si se tiene el slot animate. false Usage Open Close 
<vs-button flat color="success" animation-type="vertical" >
  Message
  <template v-slot:animate >
    <i class='bx bx-mail-send' ></i> Send
  </template>
</vs-button>
animateInactive Boolean true false Determina si la animaci贸n esta activa para el usuario al hacer hover. false Usage Open Close 
<vs-button :animate-inactive="successFace" @click="handleClickFace" :loading="loadingFace" color="facebook">
  <i class='bx bxl-facebook-square' ></i>
  {{ successFace ? 'Logout' : 'Facebook' }}
  <template v-slot:animate >
    <i class='bx bx-user' ></i> Login
  </template>
</vs-button>

slots

Property Type Values Description default Example More
animate slot Slot Para agregar el elemento que se visualizara en la animacion. Usage Open Close 
<vs-button >
  Home
  <template v-slot:animate >
    <i class='bx bx-home-alt' ></i>
  </template>
</vs-button>
Last Updated: 13/1/2020 12:32:50

Alert