desy-html

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"
  }
}) }}

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"
}) }}

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"
  }
}) }}

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"
}) }}

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>"
  }
}) }}