Scopes

Los scopes permiten a los usuarios alternar rápidamente entre diferentes estados y propiedades de un mismo tipo de contenido dentro de una misma vista. Los usuarios pueden concentrarse en el contenido relevante para su tarea actual sin tener que explorar o buscar a través de toda la vista. Los scopes deben ser independientes de las tabs porque cumplen roles diferentes. Al mantenerlos independientes, se asegura que los scopes sean reutilizables en cualquier vista, independientemente de la presencia de tabs, promoviendo consistencia y flexibilidad en el diseño.

Playground

Contenido en curso

Contenido No Iniciados

Contenido Finalizados

Tabs

Desactivar ítems no activos

Scope activo

En CursoNo IniciadosFinalizados

Twig

<twig:scopes
  mode="tabs"
  active="en-curso"
  :options="[
    { 'value': 'en-curso', 'label': 'En Curso', 'content': 'Contenido en curso', 'disabled': false },
    { 'value': 'no-iniciados', 'label': 'No Iniciados', 'content': 'Contenido No Iniciados', 'disabled': false },
    { 'value': 'finalizados', 'label': 'Finalizados', 'content': 'Contenido Finalizados', 'disabled': false }
  ]"
/>

Lista de parámetros

Twig

Parámetro

Tipo

Detalle

mode	String	Define el tipo de visualización de los scopes. Puede ser "tabs" o "links".
active	String	Valor del scope activo. Debe coincidir con uno de los value definidos en el array options.
:options	Array	Lista de scopes disponibles. Cada ítem debe tener: value: String (identificador del scope) label: String (texto visible) content: String | HTML — Define el contenido vinculado al scope. Para scopes de tipo Tabs, admite texto plano o estructuras HTML (como bloques o templates). disabled: Boolean (opcional – desactiva la opción)

Propiedades de los Scopes

Estado

1. Default

2. Select

3. Disable [opcional]