Componentes Índice de páginas
Item de estado
Datos
Bloque con listas de descripción o etiquetas, además de información del estado de las aportaciones realizadas. Generalmente utilizado en formularios.
Status
Mostrar parámetros
Parámetros del componente
params:
- name: text
type: string
required: true
description: Text for the status.
- name: icon
type: object
required: true
description: This is the icon at right
- name: html
type: string
required: false
description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
- name: type
type: string
required: false
description: Predefined icon types are `success`, `alert`,`loading` and `error`. Defaults to `success`.
- name: classes
type: string
required: false
description: Classes to add to the status component.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the status component.
Éxito #
Completo
Mostrar códigodel ejemplo: Éxito
Contenido
Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Completo",
"icon": {
"type": "success"
}
}) }}
HTML
<!-- status -->
<div>
<p class="inline-flex items-center">
<span class="inline-block font-bold uppercase">
Completo
</span>
<span class="inline-block ml-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false">
<path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor" />
</svg>
</span>
</p>
</div>
<!-- /status -->
Alerta #
Incompleto
Mostrar códigodel ejemplo: Alerta
Contenido
Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Incompleto",
"icon": {
"type": "alert"
},
"classes": "text-alert-base"
}) }}
HTML
<!-- status -->
<div class="text-alert-base">
<p class="inline-flex items-center">
<span class="inline-block font-bold uppercase">
Incompleto
</span>
<span class="inline-block ml-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
<path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor" />
</svg>
</span>
</p>
</div>
<!-- /status -->
Cargando #
Subiendo (20%)
Mostrar códigodel ejemplo: Cargando
Contenido
Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Subiendo (20%)",
"icon": {
"type": "loading"
}
}) }}
HTML
<!-- status -->
<div>
<p class="inline-flex items-center">
<span class="inline-block font-bold uppercase">
Subiendo (20%)
</span>
<span class="inline-block ml-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false">
<path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor" />
<path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor" />
</svg>
</span>
</p>
</div>
<!-- /status -->
Error #
Error
Mostrar códigodel ejemplo: Error
Contenido
Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Error",
"icon": {
"type": "error"
},
"classes": "text-alert-base"
}) }}
HTML
<!-- status -->
<div class="text-alert-base">
<p class="inline-flex items-center">
<span class="inline-block font-bold uppercase">
Error
</span>
<span class="inline-block ml-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false">
<path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor" />
<path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor" />
</svg>
</span>
</p>
</div>
<!-- /status -->
Icono personalizado #
Atención
Mostrar códigodel ejemplo: Icono personalizado
Contenido
Nunjucks macro
{% from "components/status/_macro.status.njk" import componentStatus %}
{{ componentStatus({
"text": "Atención",
"icon": {
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4 text-primary-base\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z\" fill=\"currentColor\"/></svg>"
}
}) }}
HTML
<!-- status -->
<div>
<p class="inline-flex items-center">
<span class="inline-block font-bold uppercase">
Atención
</span>
<span class="inline-block ml-sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" aria-hidden="true" focusable="false">
<path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor" />
</svg>
</span>
</p>
</div>
<!-- /status -->