DetailsPanel

Panel for showing additional content on the right side of the page.

#
Documentation

#
Usage


import { Button } from "@optiaxiom/react";
import {
  DetailsPanel,
  DetailsPanelBody,
  DetailsPanelFooter,
  DetailsPanelHeader,
} from "@optiaxiom/react/unstable";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <DetailsPanel>
        <DetailsPanelHeader>Panel Title</DetailsPanelHeader>
        <DetailsPanelBody>This is the details panel body</DetailsPanelBody>
        <DetailsPanelFooter>
          <Button>Share</Button>
        </DetailsPanelFooter>
      </DetailsPanel>
    </Canvas>
  );
}

#
Anatomy


import {
  DetailsPanel,
  DetailsPanelBody,
  DetailsPanelFooter,
  DetailsPanelHeader,
} from "@optiaxiom/react/unstable";
 
export default () => (
  <DetailsPanel>
    <DetailsPanelHeader />
    <DetailsPanelBody />
    <DetailsPanelFooter />
  </DetailsPanel>
);

#
Props

#
DetailsPanel

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
DetailsPanelHeader

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`addonAfter` Display content inside the header after `children`. `ReactNode`
`addonBefore` Display content inside the header before `children`. `ReactNode`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`description` Add secondary text after the primary title. `ReactNode`

#
DetailsPanelBody

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
DetailsPanelFooter

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`

#
Changelog

#
1.6.0

Added component