skip to main content
skip to navigation sidebar
skip to context sidebar
Collection of theme-ui and external components.
Theme UI
Edit this page
created:3/15/2021
updated:3/15/2021
source lines:128
comments %:14

PanelContainer

@component-controls/components
3.4.5

Action container with built-in collapsible panels

Component

browse
docs
issues
import { PanelContainer } from '@component-controls/components';

Visible Tabs

browse
docs
issues
() => {
  return (
    <PanelContainer actions={actions} visibleTabs={true}>
      <Donut value={1} />
    </PanelContainer>
  );
}

Properties

Name
Description
Default
openTab

by default, which tab to have open.

ReactNode
-
visibleTabs

if true, the tabs on the panels will be visible

boolean
false
background

background pattern type

darklight
-
direction

direction type

ltrrtl
-
actions

optional actions provided to the component

ActionItem[]
[]
plain

if plain, skip the border and spacing around the children

boolean
-

External dependencies

package
imports
peer
react
^17.0.1
ReactuseStateuseMemouseEffectuseCallbackReactNodeMouseEventFCCSSProperties
*
theme-ui
^0.6.0-alpha.7
ButtonPropsButton

Internal dependencies

file
imports
"../Collapsible"
Collapsible
"../Tabs"
TabTabsTabListTabPanel
"../ActionBar"
getSortedPanelsActionItemsActionItem
"../ActionContainer"
ActionContainerActionContainerProps
"../ThemeContext"
useTheme

Component JSX

<Button
style
/>
theme-ui
^0.6.0-alpha.7
<div
style
/>
div

Stories

Overview

browse
docs
issues
() => {
  return (
    <Box style={{ width: '100%' }}>
      <PanelContainer actions={actions}>
        <Box sx={{ mt: '30px' }}>
          <Donut value={1} />
        </Box>
      </PanelContainer>
    </Box>
  );
}

Open Tab

panel 1

browse
docs
issues
() => {
  return (
    <PanelContainer actions={actions} openTab="panel-1">
      <Donut value={1} />
    </PanelContainer>
  );
}
Previous
component-controls/Pagination
Next
component-controls/Popover