Tabs Components
Explore different implementations of the Accordion pattern using the HvSection component.
My Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
My Section
Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam iaculis justo sed urna condimentum ultricies. Integer nec interdum tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non gravida dui pharetra quis.
My Section
Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam iaculis justo sed urna condimentum ultricies. Integer nec interdum tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non gravida dui pharetra quis.
import { useState } from "react";
import {
HvButton,
HvSection,
HvTypography,
} from "@hitachivantara/uikit-react-core";
export default function Demo() {
// only one section allowed to be expanded at a time, so we need to manage the state of the sections
const [expandedSection, setExpandedSection] = useState<string | null>(
"section2",
);
return (
<div className="flex flex-col gap-sm w-320px">
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section1"}
title={<HvTypography variant="title4">My Section</HvTypography>}
actions={<HvButton variant="primaryGhost">Action</HvButton>}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section1" : null);
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section2"}
title={<HvTypography variant="title4">My Section</HvTypography>}
actions={<HvButton variant="primaryGhost">Action</HvButton>}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section2" : null);
}}
>
<HvTypography>
Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam
iaculis justo sed urna condimentum ultricies. Integer nec interdum
tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla
volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non
gravida dui pharetra quis.
</HvTypography>
</HvSection>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section3"}
title={<HvTypography variant="title4">My Section</HvTypography>}
actions={<HvButton variant="primaryGhost">Action</HvButton>}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section3" : null);
}}
>
<HvTypography>
Nulla dapibus accumsan est, a pharetra velit consequat et. Nullam
iaculis justo sed urna condimentum ultricies. Integer nec interdum
tortor. Nulla molestie nibh in elit congue malesuada. Donec fringilla
volutpat sapien id maximus. Vestibulum faucibus pellentesque ex, non
gravida dui pharetra quis.
</HvTypography>
</HvSection>
</div>
);
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
import { useState } from "react";
import { HvSection, HvTypography } from "@hitachivantara/uikit-react-core";
export default function Demo() {
// only one section allowed to be expanded at a time, so we need to manage the state of the sections
const [expandedSection, setExpandedSection] = useState<string | null>(
"section2",
);
return (
<HvSection classes={{ root: "w-320px", content: "p-0" }}>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section1"}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section1" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: "b-b-1 b-b-border",
content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section2"}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section2" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: "b-b-1 b-b-border",
content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section3"}
onToggle={(event, expanded) => {
setExpandedSection(expanded ? "section3" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: expandedSection === "section3" ? "b-b-1 b-b-border" : "",
content: "p-t-xs bg-bgContainerSecondary",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
</HvSection>
);
}My Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi nisl, sodales vitae blandit tincidunt, malesuada id sapien.
import { useState } from "react";
import {
HvButton,
HvSection,
HvStatusIcon,
HvTypography,
} from "@hitachivantara/uikit-react-core";
export default function Demo() {
// only one section allowed to be expanded at a time, so we need to manage the state of the sections
const [expandedSection, setExpandedSection] = useState<string | null>(
"section2",
);
return (
<HvSection
raisedHeader
title={
<>
<HvStatusIcon
variant="default"
customIcon={<div className="i-ph-gear" />}
/>
<HvTypography variant="title4">My Section</HvTypography>
</>
}
actions={<HvButton variant="primaryGhost">Action</HvButton>}
classes={{ root: "w-320px", content: "p-0!" }}
>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section1"}
onToggle={(_, expanded) => {
setExpandedSection(expanded ? "section1" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: "b-b-1 b-b-border",
content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
<HvSection
expandableHeader
expandable
expanded={expandedSection === "section2"}
onToggle={(_, expanded) => {
setExpandedSection(expanded ? "section2" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: "b-b-1 b-b-border",
content: "p-t-xs bg-bgContainerSecondary b-b-1 b-b-border",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
<HvSection
expandable
expandableHeader
expanded={expandedSection === "section3"}
onToggle={(_, expanded) => {
setExpandedSection(expanded ? "section3" : null);
}}
title="Section Title"
classes={{
root: "border-none rounded-b-none",
header: expandedSection === "section3" ? "b-b-1 b-b-border" : "",
content: "p-t-xs bg-bgContainerSecondary",
}}
>
<HvTypography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor
blandit ipsum quis sollicitudin. Aliquam erat volutpat. Praesent nisi
nisl, sodales vitae blandit tincidunt, malesuada id sapien.
</HvTypography>
</HvSection>
</HvSection>
);
}