DetailsPanel

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

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


import { Box, Button } from "@optiaxiom/react";
import {
  DetailsPanel,
  DetailsPanelBody,
  DetailsPanelFooter,
  DetailsPanelHeader,
} from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Box bg="bg.page" p="24" style={{ height: "75vh", width: "300px" }}>
      <DetailsPanel>
        <DetailsPanelHeader>Panel Title</DetailsPanelHeader>
        <DetailsPanelBody>This is the details panel body</DetailsPanelBody>
        <DetailsPanelFooter>
          <Button>Share</Button>
        </DetailsPanelFooter>
      </DetailsPanel>
    </Box>
  );
}

#
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
`alignItems` Set the element’s `align-items` CSS property. Defaults to `center` when `flexDirection='row'`, and `stretch` when `flexDirection='column'`. `ResponsiveValue<"normal" \| "stretch" \| "center" \| "end" \| "start">`
`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`
`flexDirection` Set the element’s `flex-direction` CSS property. Default: ‘row’ (CSS standard) `ResponsiveValue<"column" \| "column-reverse" \| "row" \| "row-reverse">`

#
Changelog

#
1.6.0

Added component