Herdrate Vue UI Library

Appearance

Box ​

Wrapper decorativo con variantes de borde estilo terminal.

Box

Demo ​

Header
Contenido del box.
Footer
vue
<Box borderStyle="single">
  <template #header>Header</template>
  Contenido.
  <template #footer>Footer</template>
</Box>

<Box borderStyle="double" color="success">
  Borde doble.
</Box>

Props ​

borderStyle ​

Variante de borde del box.

Single
Double
Rounded
Ascii
None
vue
<Box borderStyle="single">Single</Box>
<Box borderStyle="double">Double</Box>
<Box borderStyle="rounded">Rounded</Box>
<Box borderStyle="ascii">Ascii</Box>
<Box borderStyle="none">None</Box>

color ​

Color semántico del borde.

Primary
Success
Danger
vue
<Box borderStyle="single" color="primary">Primary</Box>
<Box borderStyle="single" color="success">Success</Box>
<Box borderStyle="single" color="danger">Danger</Box>

Slots ​

Contenido opcional en la cabecera del box.

vue
<Box>
  <template #header>Título</template>
  ...
</Box>

default ​

Contenido principal del box.

Contenido opcional en el pie del box.

vue
<Box>
  ...
  <template #footer>Pie</template>
</Box>

API ​

PropTipoDefaultDescripción
borderStyle'single' \| 'double' \| 'rounded' \| 'ascii' \| 'none''single'Variante de borde
color'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark''primary'Color semántico

Tokens usados ​

--color-{name}, --bg-panel, --border, --font-mono, --bg-*