Cómo usarlo
Tres pasos para una pantalla nueva o una que se migre.
- Envuelve el contenido de la página en
<div class="mr-scope">. Dentro de esa zona Bootstrap toma el estilo Maristas: botones, formularios, tablas, menús, modales y badges. - Usa los componentes Blade de abajo y, para los patrones, copia el código de cada ejemplo.
- Usa variables
var(--maristas-*)en lugar de colores sueltos. Si falta un token, se agrega al kit, no a la pantalla.
Componentes Blade
| Componente | Parámetros | Ejemplo |
|---|---|---|
x-maristas::button | variant primary, secondary, danger, success · size sm, lg · icon · href | <x-maristas::button icon="ri-check-line">Guardar</x-maristas::button> |
x-maristas::state | tone success, warning, danger, info, neutral · icon | <x-maristas::state tone="success">Enviado</x-maristas::state> |
x-maristas::alert | tone info, success, warning, danger · dismissible | <x-maristas::alert tone="warning">…</x-maristas::alert> |
x-maristas::empty-state | title · icon | <x-maristas::empty-state title="Sin mensajes">…</x-maristas::empty-state> |
x-maristas::prop | label | <x-maristas::prop label="Correo">…</x-maristas::prop> |
x-maristas::stat | label · value · delta · trend up, down · icon · hint | <x-maristas::stat label="Activos" value="248" /> |
x-maristas::avatar | name · size sm, md, lg · soft | <x-maristas::avatar name="María López" /> |
x-maristas::edit-link | target modal · label · locked · locked-label · title · locked-title | <x-maristas::edit-link target="#editar-modal" :locked="$bloqueado" /> |
x-maristas::cover-card | title · image · subtitle · icon · slots tags, meta, actions | <x-maristas::cover-card title="Evento" :image="$url">…</x-maristas::cover-card> |
x-maristas::banner | title · eyebrow · description · icon · slot de acciones | <x-maristas::banner title="Eventos">…botones…</x-maristas::banner> |
x-maristas::topbar | slots brand, tools y la navegación · id | <x-maristas::topbar>…</x-maristas::topbar> |
x-maristas::nav-link | href · icon · active | <x-maristas::nav-link href="/" icon="ri-home-line">Inicio</x-maristas::nav-link> |
x-maristas::nav-group | label · icon · active | <x-maristas::nav-group label="Personas">…</x-maristas::nav-group> |
x-maristas::menu-item | href · icon · active | <x-maristas::menu-item href="/perfil">Mi perfil</x-maristas::menu-item> |
x-maristas::institution-menu | current · searchable | <x-maristas::institution-menu current="…">…</x-maristas::institution-menu> |
x-maristas::notification-menu | count · slots actions, footer | <x-maristas::notification-menu :count="3">…</x-maristas::notification-menu> |
x-maristas::notification | name o icon + tone · time · new · href | <x-maristas::notification name="Laura" :new="true">…</x-maristas::notification> |
x-maristas::user-menu | name · role | <x-maristas::user-menu name="Fredy Osorio">…</x-maristas::user-menu> |
x-maristas::rule | do true o false (documentación) | <x-maristas::rule :do="false">…</x-maristas::rule> |
Esta página solo existe cuando APP_ENV es local o testing.