Blades

HvBlades is a component that groups multiple HvBlade components.

It allows for better control over the expanded state of blades, suitable for both controlled and uncontrolled scenarios.

Source Code

uikit-react-lab

This is a lab component and as such is not considered stable and may be subject to breaking changes in future releases. You need to import it from @hitachivantara/uikit-react-lab.

atMostOneExpanded

atLeastOneExpanded

fullWidthBlades

<HvBlades 
  atMostOneExpanded
  atLeastOneExpanded={false}
  fullWidthBlades
>
  <p label="1">
    <div className="flex items-center p-xs">
      Content 1
    </div>
  </p>
  <p label="2">
    <div className="flex items-center p-xs">
      Content 2
    </div>
  </p>
  <p label="3">
    <div className="flex items-center p-xs">
      Content 3
    </div>
  </p>
  <p label="4">
    <div className="flex items-center p-xs">
      Content 4
    </div>
  </p>
</HvBlades>

<HvBlades 
  atMostOneExpanded
  atLeastOneExpanded={false}
  fullWidthBlades
>
  <p label="1">
    <div className="flex items-center p-xs">
      Content 1
    </div>
  </p>
  <p label="2">
    <div className="flex items-center p-xs">
      Content 2
    </div>
  </p>
  <p label="3">
    <div className="flex items-center p-xs">
      Content 3
    </div>
  </p>
  <p label="4">
    <div className="flex items-center p-xs">
      Content 4
    </div>
  </p>
</HvBlades>

Controlled

If you want to have your HvBlades component controlled you can use the expanded prop to indicate which blades should be expanded and the onChange prop to handle the changes to its state.

Step 1

Step 1 content

Step 2

Step 3

import { useState } from "react";


export default function Demo() {
  const [expandedState, setExpandedState] = useState([0]);
  const handleToggle = (key: number) => {
    const newValue = [...expandedState];
    if (expandedState.includes(key)) {
      newValue.splice(newValue.indexOf(key), 1);
    } else {
      newValue.push(key);
    }


    setExpandedState(newValue);
  };
  const handleAll = (option: boolean) => {
    setExpandedState(option ? [0, 1, 2] : []);
  };


  return (
    <div className="flex flex-col gap-sm w-full">
      <div className="flex justify-evenly mb-sm">
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(0)}>
          Step 1
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(1)}>
          Step 2
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(2)}>
          Step 3
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleAll(false)}>
          Close all
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleAll(true)}>
          Expand all
        </HvButton>
      </div>
      <HvBlades
        expanded={expandedState}
        onChange={(e, newState) => setExpandedState(newState)}
        style={{ height: 340 }}
      >
        <HvBlade label="Step 1">
          <div className="h-full flex items-center p-xs">Step 1 content</div>
        </HvBlade>
        <HvBlade label="Step 2">
          <div className="h-full flex items-center p-xs">Step 2 content</div>
        </HvBlade>
        <HvBlade label="Step 3">
          <div className="h-full flex items-center p-xs">Step 3 content</div>
        </HvBlade>
      </HvBlades>
    </div>
  );
}

import { useState } from "react";

export default function Demo() {
  const [expandedState, setExpandedState] = useState([0]);
  const handleToggle = (key: number) => {
    const newValue = [...expandedState];
    if (expandedState.includes(key)) {
      newValue.splice(newValue.indexOf(key), 1);
    } else {
      newValue.push(key);
    }

    setExpandedState(newValue);
  };
  const handleAll = (option: boolean) => {
    setExpandedState(option ? [0, 1, 2] : []);
  };

  return (
    <div className="flex flex-col gap-sm w-full">
      <div className="flex justify-evenly mb-sm">
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(0)}>
          Step 1
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(1)}>
          Step 2
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleToggle(2)}>
          Step 3
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleAll(false)}>
          Close all
        </HvButton>
        <HvButton variant="secondarySubtle" onClick={() => handleAll(true)}>
          Expand all
        </HvButton>
      </div>
      <HvBlades
        expanded={expandedState}
        onChange={(e, newState) => setExpandedState(newState)}
        style={{ height: 340 }}
      >
        <HvBlade label="Step 1">
          <div className="h-full flex items-center p-xs">Step 1 content</div>
        </HvBlade>
        <HvBlade label="Step 2">
          <div className="h-full flex items-center p-xs">Step 2 content</div>
        </HvBlade>
        <HvBlade label="Step 3">
          <div className="h-full flex items-center p-xs">Step 3 content</div>
        </HvBlade>
      </HvBlades>
    </div>
  );
}

Blade Breadcrumb