Componentes
Átomos
Colores
Uso
<div class="flex gap-4">
<div class="w-9 h-9 bg-primary rounded"></div>
<div class="w-9 h-9 bg-secondary rounded"></div>
<div class="w-9 h-9 bg-neutral rounded"></div>
<div class="w-9 h-9 bg-accent rounded"></div>
</div>
Ejemplos:
Titles
Uso
<SharedAtomsHeading1 class="text-lg">Heading 1</SharedAtomsHeading1>
<SharedAtomsHeading2 class="text-base">Heading 2</SharedAtomsHeading2>
<SharedAtomsBodyText class="text-sm text-gray-700">Body Text: Lorem ipsum dolor sit amet consectetur adipisicing elit...</SharedAtomsBodyText>
Ejemplos:
Heading 1
Heading 2
Body Text: Lorem ipsum dolor sit amet consectetur adipisicing elit...
Botones
Uso
<SharedAtomsButton @click="openModal()">I´m a primary button</SharedAtomsButton>
<SharedAtomsButton color="secondary">I´m a secondary button</SharedAtomsButton>
<SharedAtomsButton color="accent">I´m an accent button</SharedAtomsButton>
<SharedAtomsButton color="neutral">I´m a neutral button</SharedAtomsButton>
Ejemplos:
Inputs
Uso
<SharedAtomsFormsFieldsTextInput name="textinput" id="textinput" label="Text input" />
<SharedAtomsFormsFieldsTextArea name="textareainput" id="textareainput" label="Text Area" />
<SharedAtomsFormsFieldsPhoneInput name="phoneinput" id="phoneinput" label="Phone Input" />
<SharedAtomsFormsFieldsPassInput name="passinput" id="passinput" label="Password Input" />
<SharedAtomsFormsFieldsFileInput name="fileinput" id="fileinput" label="File Input" />
Ejemplos:
No file chosen
Moléculas
Nav
Uso
<SharedMoleculesNav></SharedMoleculesNav>
Ejemplos:
8
8 ItemsSubtotal: $999
8
8 ItemsSubtotal: $999
es
Cambia el idioma
Nav
Uso
<SharedMoleculesTable :columns="" :rows=""></SharedMoleculesTable>
Ejemplos:
| Name | Job | Favorite Color | ||
|---|---|---|---|---|
 | Zemlak, Daniel and Leannon Desktop Support Technician | Purple | ||
 | Carroll Group Tax Accountant | Red | ||
 | Rowe-Schoen Office Assistant I | Crimson | ||
 | Wyman-Ledner Community Outreach Specialist | Indigo | ||
| Name | Job | Favorite Color |
Cards
Uso
<SharedMoleculesCard v-for="(pug, index) in pugData" :key="index" class="w-full" :title="pug.title" :description="pug.description" :image="pug.image" :id="pug.id" />
Ejemplos:
Iconos
Uso
<SharedAtomsIcon icon="cart"></SharedAtomsIcon>
Ejemplos:
Form Constructor
Uso
<SharedMoleculesFormsFormCreator
:form-config="registerForm()"
submit-label="Registrar"
/>
Ejemplos:
Modal
Uso
<SharedAtomsButton @click="openModal()">Open modal</SharedAtomsButton>
Ejemplos:
Drawer
Uso
<SharedAtomsButton @click="openDrawer()">Open Drawer</SharedAtomsButton>
Ejemplos:
Toast
Uso
<SharedAtomsButton @click="openToast()">Open Toast</SharedAtomsButton>
Ejemplos:
Organismos (BLOCKS)
Card Grid
Uso
<BlocksGridCardSection :items="pugData" type="basic" :full-img="true" class="mb-5" />
Ejemplos:
La Revolución de la IA NEW
Explorando cómo la inteligencia artificial está transformando diversas industrias y la vida cotidiana.
Happy Pug 222
$20
NEW
Sleepy Pug
$20
NEW
Playful Pug
$20
NEW
Curious Pug
$20
NEW
Pug with a Hat
$20
NEW
