Tabs and button component
This commit is contained in:
jorgemike
@@ -10,8 +10,8 @@ export default function Page() {
|
||||
items={[
|
||||
{ id: "box", label: "Box" },
|
||||
{ id: "gradients", label: "Gradientes" },
|
||||
{ id: "scale-hover", label: "Escala al pasar el cursor" },
|
||||
{ id: "hover-bg", label: "Color de fondo al pasar el cursor" },
|
||||
{ id: "scale-hover", label: "Escala al pasar el cursor" },
|
||||
{ id: "hover-bg", label: "Color de fondo al pasar el cursor" },
|
||||
]}
|
||||
/>
|
||||
<div className="my-5">
|
||||
@@ -44,6 +44,36 @@ export default function Page() {
|
||||
</div>
|
||||
</VistaComponente>
|
||||
|
||||
<VistaComponente
|
||||
id="box"
|
||||
title="Estilo: Box activado"
|
||||
description="El estilo normal de la caja se puede activar con la clase <code>.active</code> para resaltar un elemento seleccionado o activo."
|
||||
code={`<div className="box active">
|
||||
<h1><code>div</code> con className <code>.box</code></h1>
|
||||
</div>`}
|
||||
>
|
||||
<div className="box active mb-3">
|
||||
<h1 className="mb-0">
|
||||
<code>div</code> con className <code>.box</code> <code>.active</code>
|
||||
</h1>
|
||||
</div>
|
||||
</VistaComponente>
|
||||
|
||||
<VistaComponente
|
||||
id="box"
|
||||
title="Estilo: Box desactivado"
|
||||
description="El estilo normal de la caja se puede desactivar con la clase <code>.disabled</code> para indicar que un elemento no está disponible o no se puede seleccionar."
|
||||
code={`<div className="box disabled">
|
||||
<h1><code>div</code> con className <code>.box</code></h1>
|
||||
</div>`}
|
||||
>
|
||||
<div className="box disabled mb-3">
|
||||
<h1 className="mb-0">
|
||||
<code>div</code> con className <code>.box</code> <code>.disabled</code>
|
||||
</h1>
|
||||
</div>
|
||||
</VistaComponente>
|
||||
|
||||
<VistaComponente
|
||||
id="gradients"
|
||||
title="Estilo: bg-gradient"
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
|
||||
import { CodeBlock } from "@/components/code-block";
|
||||
import IndiceContenido from "@/components/content-index";
|
||||
import Tabs from "@/components/tabs";
|
||||
import VistaComponente from "@/components/vista-componente";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<>
|
||||
<IndiceContenido
|
||||
items={[
|
||||
{ id: "tabs-basico", label: "Pestañas básicas" },
|
||||
{ id: "tabs-desactivadas", label: "Pestañas desactivadas" },
|
||||
{ id: "tabs-estilos", label: "Estilos del componente" },
|
||||
{ id: "tabs-props", label: "Props del componente" },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="my-5">
|
||||
<h1 className="mb-4 display-5">
|
||||
🧩 Componente: <code>Tabs</code>
|
||||
</h1>
|
||||
|
||||
<p className="mb-4 text-muted">
|
||||
El componente <code><Tabs /></code> permite organizar contenido
|
||||
en pestañas, ofreciendo opciones de estilos y soporte para pestañas
|
||||
desactivadas.
|
||||
<br />
|
||||
El tiempo de animacion de las pestañas es de 0.3s. pero se puede
|
||||
modificar en el archivo <code>src/styles/sass/_tabs.scss</code>
|
||||
</p>
|
||||
|
||||
<CodeBlock code={`import Tabs from "@/components/tabs";`} />
|
||||
|
||||
<hr className="my-5" />
|
||||
|
||||
<VistaComponente
|
||||
id="tabs-basico"
|
||||
title="📌 Pestañas básicas"
|
||||
description="Un conjunto de pestañas funcionales para organizar contenido."
|
||||
code={`<Tabs
|
||||
tabs=[
|
||||
{ id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
|
||||
{ id: "profile", title: "Perfil", content: <p>Contenido del perfil</p> },
|
||||
{ id: "settings", title: "Configuraciones", content: <p>Contenido de configuraciones</p> },
|
||||
]
|
||||
/>`}
|
||||
>
|
||||
<Tabs
|
||||
tabs={[
|
||||
{
|
||||
id: "home-1",
|
||||
title: "Inicio",
|
||||
content: <p>Contenido de inicio</p>,
|
||||
},
|
||||
{
|
||||
id: "profile-1",
|
||||
title: "Perfil",
|
||||
content: <p>Contenido del perfil</p>,
|
||||
},
|
||||
{
|
||||
id: "settings-1",
|
||||
title: "Configuraciones",
|
||||
content: <p>Contenido de configuraciones</p>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</VistaComponente>
|
||||
|
||||
<VistaComponente
|
||||
id="tabs-desactivadas"
|
||||
title="🚫 Pestañas desactivadas"
|
||||
description="Puedes desactivar pestañas para evitar que sean seleccionadas."
|
||||
code={`<Tabs
|
||||
tabs=[
|
||||
{ id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
|
||||
{ id: "disabled", title: "Desactivado", content: <p>No seleccionable</p>, disabled: true },
|
||||
]
|
||||
/>`}
|
||||
>
|
||||
<Tabs
|
||||
tabs={[
|
||||
{
|
||||
id: "home-2",
|
||||
title: "Inicio",
|
||||
content: <p>Contenido de inicio</p>,
|
||||
},
|
||||
{
|
||||
id: "disabled-2",
|
||||
title: "Desactivado",
|
||||
content: <p>No seleccionable</p>,
|
||||
disabled: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</VistaComponente>
|
||||
|
||||
<VistaComponente
|
||||
id="tabs-estilos"
|
||||
title="🎨 Estilos del componente"
|
||||
description="El componente admite diferentes estilos, como el diseño en cajas."
|
||||
code={`<Tabs
|
||||
tabs=[
|
||||
{ id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
|
||||
{ id: "profile", title: "Perfil", content: <p>Contenido del perfil</p> },
|
||||
]
|
||||
style="box"
|
||||
/>`}
|
||||
>
|
||||
<Tabs
|
||||
style="box"
|
||||
tabs={[
|
||||
{
|
||||
id: "home-3",
|
||||
title: "Inicio",
|
||||
content: <p>Contenido de inicio</p>,
|
||||
},
|
||||
{
|
||||
id: "profile-3",
|
||||
title: "Perfil",
|
||||
content: <p>Contenido del perfil</p>,
|
||||
},
|
||||
{
|
||||
id: "settings-3",
|
||||
title: "Configuraciones",
|
||||
content: <p>Contenido del perfil</p>,
|
||||
disabled: true,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</VistaComponente>
|
||||
|
||||
{/* PROPS */}
|
||||
<section className="mb-5" id="tabs-props">
|
||||
<h2 className="h5 mb-3">⚙️ Props del componente</h2>
|
||||
<table className="table table-bordered table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Prop</th>
|
||||
<th scope="col">Tipo</th>
|
||||
<th scope="col">Descripción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>tabs</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>Tab[]</code>
|
||||
</td>
|
||||
<td>Lista de pestañas con ID, título y contenido.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>style?</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>"default" | "box"</code>
|
||||
</td>
|
||||
<td>Estilo de las pestañas.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>className?</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>
|
||||
{"{ container?: string; tab?: string; content?: string; }"}
|
||||
</code>
|
||||
</td>
|
||||
<td>
|
||||
Clases CSS personalizables para diferentes partes del
|
||||
componente.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>Tab.id</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>string</code>
|
||||
</td>
|
||||
<td>Identificador único de la pestaña.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>Tab.title</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>string | JSX.Element</code>
|
||||
</td>
|
||||
<td>Título de la pestaña.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>Tab.content</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>JSX.Element</code>
|
||||
</td>
|
||||
<td>Contenido dentro de la pestaña.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>Tab.disabled?</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>boolean</code>
|
||||
</td>
|
||||
<td>Si la pestaña debe estar deshabilitada.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -94,6 +94,12 @@ import BootstrapClient from "@/components/bootstrap-client";`}
|
||||
<div className="col-lg-4">
|
||||
<ComponentCard title="Sidebar" src="/sidebar.png" href="sidebar" />
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<ComponentCard title="Button" src="/button.png" href="button" />
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<ComponentCard title="Tabs" src="/tabs.png" href="tabs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { useState, JSX } from "react";
|
||||
|
||||
interface Tab {
|
||||
id: string;
|
||||
title: string | JSX.Element;
|
||||
content: JSX.Element;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface TabsProps {
|
||||
tabs: Tab[];
|
||||
style?: "default" | "box";
|
||||
className?: {
|
||||
container?: string;
|
||||
tab?: string;
|
||||
content?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function Tabs({
|
||||
tabs,
|
||||
style = "default",
|
||||
className,
|
||||
}: TabsProps) {
|
||||
const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul className={`nav nav-tabs style-${style}`} id="myTab" role="tablist">
|
||||
{tabs.map((tab) => (
|
||||
<li
|
||||
key={tab.id}
|
||||
className="nav-item"
|
||||
role="presentation"
|
||||
title={tab.title.toString()}
|
||||
>
|
||||
<button
|
||||
className={`nav-link ${tab.disabled ? "disabled" : ""} ${
|
||||
activeTab === tab.id ? "active" : ""
|
||||
}`}
|
||||
id={`tab-${tab.id}`}
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target={`#tab-pane-${tab.id}`}
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls={`tab-pane-${tab.id}`}
|
||||
aria-selected={activeTab === tab.id}
|
||||
onClick={() => !tab.disabled && setActiveTab(tab.id)}
|
||||
>
|
||||
{tab.title.toString().length > 35
|
||||
? `${tab.title.toString().slice(0, 35)}...`
|
||||
: tab.title}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="tab-content mt-3" id="myTabContent">
|
||||
{tabs.map((tab) => (
|
||||
<div
|
||||
key={tab.id}
|
||||
className={`tab-pane fade ${
|
||||
activeTab === tab.id ? "show active" : ""
|
||||
} ${className?.content}`}
|
||||
id={`tab-pane-${tab.id}`}
|
||||
role="tabpanel"
|
||||
aria-labelledby={`tab-${tab.id}`}
|
||||
>
|
||||
{activeTab === tab.id && tab.content}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,11 @@
|
||||
@extend .bg-opacity-75;
|
||||
@extend .text-white;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@extend .text-muted;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
|
||||
.unlink {
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
.tab-pane.fade {
|
||||
transition: opacity 10s linear !important;
|
||||
}
|
||||
|
||||
.nav-tabs.style-box {
|
||||
border-bottom: 0cap;
|
||||
gap: 0.8rem;
|
||||
.nav-item .nav-link {
|
||||
@extend .box;
|
||||
@extend .py-2;
|
||||
@extend .text-black;
|
||||
|
||||
margin: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -26,6 +26,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
@import "utilities";
|
||||
@import 'sidebar';
|
||||
@import 'hover';
|
||||
@import 'tabs';
|
||||
|
||||
//Add additional custom code here
|
||||
|
||||
|
||||
Reference in New Issue
Block a user