Box component

Box base

Box base es un componente que hace referencia a un panel o card dentro del tema de rocketman.

  • Se utiliza la directiva x-box::box para utilizarlo.
  • Puedes indicar clases y atributos en la misma directiva.

Ejemplos:

A continuación se muestran 2 ejemplos de uso, ambos con padding de 5 y texto centrado:


  • Box base:

    <x-box::box class="text-center p-5">
    <p class="font-medium text-primary text-lg mb-2">Box base</p>
    Panel base. Puedes indicar el padding y otras clases en la misma directiva ya que no cuenta con padding automático.
</x-box::box>


  • Report box: agrega el tag de report-box.

    <x-box::box report-box class="text-center p-5">
    <p class="font-medium text-primary text-lg mb-2">Box con relieve</p>
    Puedes indicar el padding y otras clases en la misma directiva ya que no cuenta con padding automático.
</x-box::box>


Dialog Box

El componente Dialog Box se basa de un Box base con padding automático dividido en secciones. Utiliza la directiva x-box::dialog-box y cuenta con los siguientes slot:

  • title: requerido
  • settings: opcional
  • body: requerido
  • footer: opcional


Ejemplo:

<x-box::dialog-box report-box>
    <x-slot name="title" class="text-priamry">
        Título del panel
    </x-slot>
    <x-slot name="settings">
        <button class="btn btn-elevated-secondary inline-block">Acciones</button>
    </x-slot>
    <x-slot name="body">
        Cuerpo del panel.
    </x-slot>
    <x-slot name="footer" class="text-right">
        Pie del panel.
    </x-slot>
</x-box::dialog-box>