Components

Els components són els blocs de construcció de l'interfície d'usuari amb Blobby.

Elements

Targeta

<b-card>

nom descripció valors
variant String. Variant de la targeta
color String. Canvia el color de la vora en outline i el fons en gradient, custom-color.
size String. Tamany de la targeta
shadow Bool. Afegeix sombra a la targeta Gradient
padded Bool. Afegeix espai entre la vora i el contingut
rises Bool. Efecte on hover
overflow-hidden Bool. Amaga l'overflow
image String. Imatge de fons. Sols en gradient custom-color
to String. Enllaç <nuxt-link>
href String. Enllaç <a>
as String. Tag HTML

<b-card-section>

Secció de la targeta

nom descripció valors
border-top Bool. Vora superior
border-bottom Bool. Vora inferior
border-left Bool. Vora esquerra
border-right Bool. Vora dreta

<b-card-list>

Llistat dins d'una targeta. Afegeix línies divisòries entre els elements.

nom descripció valors
padded Bool. Afegeix espai entre la vora i el contingut
divisions Bool. Afegeix línies divisòries entre els elements
block-links Bool. Converteix els enllaços en blocs
menu Bool. Activa block-links i desactiva divisions i padded
as String. Tag HTML
Vista prèvia

Títol

Setze jutges d'un jutjat mengen fetge d'un penjat. Si el penjat es despenja, es menja els setze fetges dels jutges del jutjat que l'han penjat.
Codi 
<b-card>
  <b-card-section>
    <h2>Títol</h2>
  </b-card-section>
  <b-card-section>
    Setze jutges d'un jutjat mengen fetge d'un penjat.
    Si el penjat es despenja, es menja els setze fetges
    dels jutges del jutjat que l'han penjat.
  </b-card-section>
  <b-card-list>
    <li><a href="#">Enllaç 1</a></li>
    <li><a href="#">Enllaç 2</a></li>
  </b-card-list>
</b-card>

<b-nav>

nom descripció valors
collapse-at String. Tamany al que el menú principal s'amaga i el logo es fa compacte
full-width Bool. Elimina el contenidor
menu-title String. Text per a l'aria-title del menú principal

Slots

nom descripció valors
Main slot Contingut del menú principal
#basic-nav Elements del menú principal que no s'amaguen en mòbil
#logo-prepend Contingut davant del logo
#logo-append Contingut després del logo
Vista prèvia
Codi 
<b-nav>
  <b-nav-item to="/">Enllaç</b-nav-item>
  <b-nav-item to="/">Enllaç 2</b-nav-item>
</b-nav>

<b-footer>

nom descripció valors
variant String. Per defecte, agafa el color de text i fons del pare. Muted força l'escala del grissos al text.
campaign Bool. Nom de la campanya
Vista prèvia
Codi 
<b-footer></b-footer>

Pastilles

<b-pill> i <b-pill-list>

nom descripció valors
variant String. Variant de la pastillas
size String. Tamany de la pastila.
focus-dark Bool. Fa negre el contorn de l'estat focus de la pastilla
to String. Enllaç <nuxt-link>
href String. Enllaç <a>
as String. Tag HTML
Vista prèvia
Codi 
<b-pill-list>
  <b-pill>
    Pastilla 1
  </b-pill>
  <b-pill>
    Pastilla 2
  </b-pill>
  <b-pill>
    Pastilla 3
  </b-pill>
</b-pill-list>

Pestanyes

<b-tab-list>

nom descripció valors
outline Bool. Si les pastilles tenen vora o no.
muted Bool. Si les pastilles són gris o no.
size String. Tamany de les pastiles.
focus-dark Bool. Fa negre el contorn de l'estat focus de les pastilles

<b-tab>

nom descripció valors
selected Bool. Si la pastilla està seleccionada o no.
to String. Enllaç <nuxt-link>
href String. Enllaç <a>
as String. Tag HTML
Vista prèvia
Codi 
<b-tab-list>
  <b-tab>
    Pastilla 1
  </b-tab>
  <b-tab>
    Pastilla 2
  </b-tab>
  <b-tab>
    Pastilla 3
  </b-tab>
</b-tab-list>

Insígnies

<b-badge> i <b-badge-list>

nom descripció valors
variant String. Variant de la insíginia
size String. Tamany de la insígnia.
outline Bool. Si la insígnia està tota plena o només el contorn
to String. Enllaç <nuxt-link>
href String. Enllaç <a>
as String. Tag HTML
Vista prèvia
  • Insígnia 1
  • Insígnia 2
  • Insígnia 3
Codi 
<b-badge-list>
  <b-badge>
    Insígnia 1
  </b-badge>
  <b-badge>
    Insígnia 2
  </b-badge>
  <b-badge>
    Insígnia 3
  </b-badge>
</b-badge-list>

Formularis

Botó

<b-button>

nom descripció valors
variant String. Variant del botó
outline Bool. Si el botó té vora.
size String. Tamany del botó.
block Bool. Botó al 100% de l'amplada del contenidor.
shadow Bool. Ombra del botó.
focus-dark Bool. Activar quan el botó cau sobre un fons taronja.
disabled Bool. Deshabilita el botó.
to String. Enllaç <nuxt-link>
href String. Enllaç <a>
as String. Tag HTML
Vista prèvia
Codi 
<b-button>
  Text
</b-button>

Camp de text

<b-input>

nom descripció valors
variant String. Variant del camp de text
name * String. Nom del camp.
label * String. Etiqueta del camp.
size String. Tamany del camp.
border String. Estil del borde.
error String. Text d'error.
block Bool. El camp té amplada completa.
no-label Bool. Amaga l'etiqueta, però es manté per a lectors de pantalla.
label-on-top Bool. En float força que l'etiqueta estiga sempre dalt.
focus-dark Bool. Activar quan el botó cau sobre un fons taronja.
disabled Bool. Deshabilita el camp.
span Number, Object. Dins d'un input-group, estableix el número de columnes que ocupa el camp.
Vista prèvia
Codi 
<b-input />

Camp desplegable

<b-select>

nom descripció valors
variant String. Variant del camp de text
name * String. Nom del camp.
label * String. Etiqueta del camp.
size String. Tamany del camp.
border String. Estil del borde.
error String. Text d'error.
block Bool. El camp té amplada completa.
no-label Bool. Amaga l'etiqueta, però es manté per a lectors de pantalla.
label-on-top Bool. En float força que l'etiqueta estiga sempre dalt.
focus-dark Bool. Activar quan el botó cau sobre un fons taronja.
disabled Bool. Deshabilita el camp.
span Number, Object. Dins d'un input-group, estableix el número de columnes que ocupa el camp.
Vista prèvia
Codi 
<b-select>
  <option value="un">Un</option>
  <option value="dos">Dos</option>
  <option value="tres">Tres</option>
</b-select>

Grup de camps

<b-input-group>

nom descripció valors
title String. Títol del grup
card Object. Props de la b-card.
Vista prèvia
Codi 
<b-input-group>
  <b-input
    variant="float"
    label="Nom"
    name="first_name"
    span="2"
  />
  <b-input
    variant="float"
    label="Cognoms"
    name="last_name"
    span="2"
  />
  <b-input
    type="email"
    variant="float"
    label="E-mail"
    name="email"
    span="4"
  />
</b-input-group>

Botó d'opció

<b-radio>

nom descripció valors
name * String. Nom del camp.
value * String. Valor del camp.
variant String. Variant del camp
disabled Bool. Deshabilita el camp.
focus-dark Bool. Canvia el color del contorn de l'estat focus a negre.
card Bool, Object. Converteix el camp en targeta. Opcionalment es poden passar les props de b-card en un objecte.
Vista prèvia
Codi 
<b-radio name="option" value="un">
  Un
</b-radio>
<b-radio name="option" value="dos">
  Dos
</b-radio>
<b-radio name="option" value="tres">
  Tres
</b-radio>

Grup de botons d'opció

<b-radio-group>

nom descripció valors
title String. Títol del grup
card Object. Props de la b-card.
Vista prèvia
Codi 
<b-radio-group>
  <b-radio name="option" value="un" card>
    Un
  </b-radio>
  <b-radio name="option" value="dos" card>
    Dos
  </b-radio>
  <b-radio name="option" value="tres" card>
    Tres
  </b-radio>
</b-radio-group>

Casella de selecció

<b-checkbox>

nom descripció valors
name * String. Nom del camp.
value * String. Valor del camp.
variant String. Variant del camp
is-switch Bool. Converteix el camp en un Switch.
disabled Bool. Deshabilita el camp.
Vista prèvia
Codi 
<b-checkbox name="option" value="un">
  Un
</b-checkbox>
<b-checkbox name="option" value="dos">
  Dos
</b-checkbox>
<b-checkbox name="option" value="tres">
  Tres
</b-checkbox>