Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente divisor

Última actualización:

Divisor CSS Tailwind solo para CSS: horizontal y vertical con etiqueta centrada opcional. Variantes de color y tamaño. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes divisores crean una separación visual entre las secciones de contenido. Los divisores, livianos y semánticos, ayudan a estructurar la información de manera jerárquica y mejoran la legibilidad. El sistema divisor Frutjam admite orientaciones horizontales y verticales con contenido de texto opcional para separaciones etiquetadas entre secciones.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
dividerBaseRegla horizontal con texto de etiqueta centrado opcional
divider-horizontalModificadorOrientación horizontal (predeterminada)
divider-verticalModificadororientación vertical
divider-startModificadorAlinea el texto de la etiqueta al inicio
divider-endModificadorAlinea el texto de la etiqueta al final
divider-solidEstiloEstilo de línea sólida
divider-dashedEstiloEstilo de línea discontinua
divider-dottedEstiloEstilo de línea punteada
divider-primaryColorColor del tema principal
divider-secondaryColorColor del tema secundario
divider-accentColorColor del tema de acento
divider-neutralColorColor de tema neutro
divider-infoColorColor semántico de información
divider-successColorColor semántico del éxito
divider-warningColorColor semántico de advertencia
divider-errorColorColor semántico del error

Uso básico

<div class="divider"></div>

<div className="divider"></div>

Direcciones del divisor

Divisor horizontal

html 
<div class="divider divider-horizontal"></div>

Divisor vertical

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical"></div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Divisor con texto

Horizontal con texto

html 
<div class="divider divider-horizontal">OR</div>

Vertical con texto

html 
1
2
3
4
5
6
7
8
9
<div class="flex gap-4 w-full">
    <div class="card card-outline w-full">
       <div class="card-content">content 1</div>
    </div>
    <div class="divider divider-vertical">OR</div>
    <div class="card card-outline w-full">
        <div class="card-content">content 2</div>
    </div>
</div>

Colores del divisor

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="flex flex-col gap-8 w-full">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

Posiciones de contenido divisor

Puede alinear el texto dentro de un divisor al inicio, al centro (predeterminado) o al final de la línea.

Posiciones horizontales

html 
1
2
3
4
5
<div class="flex w-full gap-8 flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

Posiciones verticales

html 
1
2
3
4
5
<div class="flex justify-center w-full h-64 gap-12">
  <div class="divider divider-vertical divider-start">Start</div>
  <div class="divider divider-vertical">Default</div>
  <div class="divider divider-vertical divider-end">End</div>
</div>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Divisor según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP