1.0.0 • Published 3 months ago
grados-ui v1.0.0
Grados UI
Grados UI is a module that provides a set of Vue components and composables, to help you build beautiful and accessible user interfaces.
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode and more.
Toggle Component
import { GuiToggle } from 'grados-ui';
Example of usage
<GuiToggle label="Open?" v-model:checked="isOpen" />
Attributes | Default Value | Type | Description |
---|---|---|---|
label | empty | String | Can use this attribute to add a label before the toggle button |
v-model:checked | false | Boolean | This is your variable that you whant reactive |
Sliders Component
import { GuiSliders } from 'grados-ui';
Attributes | Default Value | Type | Description |
---|---|---|---|
images | null | Array | This is the array of slides |
has-links | false | Boolean | This prop indicate if the images is going to have a link |
Example of images array with out links
{
"url": "https://images.pexels.com/photos/1362534/pexels-photo-1362534.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
},
{
"url": "https://images.pexels.com/photos/108370/pexels-photo-108370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
},
{
"url": "https://images.pexels.com/photos/1352296/pexels-photo-1352296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
}
Example of images array with links
{
"url": "/",
"image": {
"url": "https://images.pexels.com/photos/1362534/pexels-photo-1362534.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
}
},
{
"url": "/",
"image": {
"url": "https://images.pexels.com/photos/108370/pexels-photo-108370.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
}
},
{
"url": "/",
"image": {
"url": "https://images.pexels.com/photos/1352296/pexels-photo-1352296.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
"alt": "IceCream"
}
}
Example of usage
<GuiSliders :images="sliders" :has-links="true" />
Card Component
import { GuiCard } from 'grados-ui';
Example of usage
<GuiCard>
<template v-slot:header>
<h2>Card Title</h2>
</template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, magni nesciunt. Dicta, consectetur alias? Saepe quidem cum praesentium ut! Magni magnam laudantium itaque asperiores? Dolores id neque ipsam corporis sequi!
<template v-slot:footer>
<p>Footer content</p>
</template>
</GuiCard>
Icons Component
This component use the icons of FontAwesome 5 you can see all the icons here: https://fontawesome.com/v5/search
import { GuiIcon } from 'grados-ui';
Example of usage
<GuiIcon icon="fa-google" :brand="true" />
<GuiIcon icon="fa-vr-cardboard" color="#7e22ce" />
Attributes | Default Value | Type | Description |
---|---|---|---|
icon | empty | String | Name of the icon to show |
brand | false | Boolean | This indicate if is a brand icon like: facebook, google, etc... |
color | #000 | String | This is the color of the icon can be HEX, RGB, RGBA, HSL, HWB |
1.0.0
3 months ago