Vue SeeCode UI

Vue SeeCode UI es una librería de componentes de interfaz de usuario (UI) construida con Vue.js, Tailwind CSS y TypeScript. Esta librería proporciona una variedad de componentes reutilizables para ayudarte a desarrollar interfaces de usuario modernas y atractivas en tus aplicaciones Vue.js.

Instalación

Puedes instalar Vue SeeCode UI en tu proyecto utilizando npm o yarn:

npm install @seedcode-vue-uix

o

yarn add @seedcode-vue-uix

Uso

Para utilizar los componentes de Vue SeeCode UI en tu aplicación Vue.js, simplemente importa el componente que necesitas y úsalo en tu plantilla. Aquí tienes un ejemplo de cómo importar y usar el componente Button:

<template>
  <Button color="yellow" text-color="white" size="sm" round>Ejemplo</Button>
</template>

<script lang="ts" setup>
import { Button } from "@seedcode-vue-uix"

//resto del codigo
</script>

Props disponibles para el componente Button

• href: URL opcional a la que se dirigirá el botón.
• color: Color de fondo del botón (por defecto: "cyan").
• textColor: Color del texto del botón (por defecto: "cyan").
• size: Tamaño del botón ("sm" | "md" | "lg", por defecto: "md").
• type: Tipo de botón ("button" | "submit", por defecto: "button").
• id: ID opcional para el botón.
• outline: Booleano que indica si el botón debe ser de contorno.
• round: Booleano que indica si el botón debe tener bordes redondeados.
• icon: Booleano que indica si el botón debe contener un icono.

Ejemplos adicionales

<!-- Botón con icono --> 
<Button color="blue" text-color="white" size="md" icon>
	Enviar <i class="fas fa-paper-plane"></i>
</Button> 

<!-- Botón de contorno --> 
<Button color="gray" text-color="black" size="lg" outline>
	Cancelar
</Button>