Empty State

<gstock-empty-state> | GstockEmptyState

Ejemplos

<gstock-empty-state header="You don't have access to this work item"></gstock-empty-state>

Nivel de encabezado personalizado

Utilice el atributo headingLevel para establecer el nivel de encabezado del elemento de encabezado.

El nivel de encabezado que se muestra por defecto es el nivel 4. Para garantizar que el componente sea accesible, los encabezados deben seguir un orden lógico. Si no sigue un h3 o h4 en el orden de lectura, deberá modificar el orden de los encabezados al siguiente nivel lógico.

 
<gstock-empty-state
  header="You don't have access to this work item"
  headingLevel="2"></gstock-empty-state>

Descripción

Utilice el atributo description para mostrar una información adicional útil y relevante.

<gstock-empty-state
  header="You don't have access to this work item"
  description="Make sure the work item exists in this project. If it does, ask a project admin for permission to see the project's work items."></gstock-empty-state>

URL de la imagen

Utilice el atributo imageUrl para mostrar una imagen. Este valor se le pasará directamente al atributo src al elemento <img>.

<gstock-empty-state
  header="You don't have access to this work item"
  imageUrl="/dist/assets/images/connectionFailed.svg"></gstock-empty-state>

Dimensiones de la imagen

Utilice los atributos imageWidth y imageHeight para evitar que el diseño se reajuste cuando se cargan las imágenes. Estos valores se usarán para establecer los atributos width y height en el elemento <img>.

<gstock-empty-state
  header="You don't have access to this work item"
  imageUrl="/dist/assets/images/connectionFailed.svg"
  imageWidth="100"></gstock-empty-state>

Dimensiones máximas de la imagen

Utilice los atributos maxImageHeight y maxImageWidth para definir las dimensiones máximas de la imagen.

<gstock-empty-state
  header="You don't have access to this work item"
  imageUrl="/dist/assets/images/connectionFailed.svg"
  maxImageHeight="160"
  maxImageWidth="160"></gstock-empty-state>

Ilustraciones

Connection failed state

<gstock-empty-state
  header="Network connection failure"
  imageUrl="/dist/assets/images/connectionFailed.svg"></gstock-empty-state>

Not found state

<gstock-empty-state
  header="Error 404"
  imageUrl="/dist/assets/images/error404.svg"></gstock-empty-state>

No content state

<gstock-empty-state
  header="No content backup"
  imageUrl="/dist/assets/images/noContentBackup.svg"></gstock-empty-state>

No file found state

<gstock-empty-state
  header="No file found"
  imageUrl="/dist/assets/images/noFileFound.svg"></gstock-empty-state>

No results state

<gstock-empty-state
  header="No results"
  imageUrl="/dist/assets/images/noResult.svg"></gstock-empty-state>

Payment failed state

<gstock-empty-state
  header="Payment failed backup"
  imageUrl="/dist/assets/images/paymentFailed.svg"></gstock-empty-state>

Payment successfully state

<gstock-empty-state
  header="Payment successfully backed up"
  imageUrl="/dist/assets/images/successfulPayment.svg"></gstock-empty-state>

Whoops state

<gstock-empty-state header="Whoops!" imageUrl="/dist/assets/images/whoops.svg"></gstock-empty-state>