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:77
comments %:32

BlockContainer

@component-controls/components
3.4.5

Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation.

Component

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

Overview

Block title

browse
docs
issues
({ title }: BlockContainerProps) => {
  return (
    <BlockContainer title={title}>
      <Donut value={1 / 2} />
    </BlockContainer>
  );
}

Controls

Name
Description
Default
Controls
title

optional section title for the block.

string
-

Properties

Name
Description
Default
BlockContainerOwnProps (6 properties)
title

optional section title for the block.

string
-
description

optional markdown description.

string
-
id

optional id to be used for the block if no id is provided, one will be calculated automatically from the title.

string
-
collapsible

if false, will nothave a collapsible frame.

boolean
true
data-testid

testing id

string
-
plain

inner container variant or plain

boolean
false
HTMLAttributes (42 properties)
Attributes (1 properties)
AriaAttributes (48 properties)
DOMAttributes (161 properties)
- (1 properties)
BoxOwnProps (4 properties)
SpaceProps (28 properties)
BackgroundColorProps (2 properties)
OpacityProps (1 properties)

External dependencies

package
imports
peer
@primer/octicons-react
^10.0.0
ChevronRightIconChevronDownIcon
react
^17.0.1
useStateFC
*
theme-ui
^0.6.0-alpha.7
jsxTextLinkFlexDividerBoxPropsBox

Internal dependencies

file
imports
"../Collapsible"
Collapsible
"../LinkHeading"
LinkHeading
"../Description"
Description

Component JSX

<Box
variant
/>
theme-ui
^0.6.0-alpha.7
<Description
/>
Description
from"../Description"
<Collapsible
isOpen
/>
Collapsible
from"../Collapsible"
<Divider
/>
theme-ui
^0.6.0-alpha.7

Stories

Not Collapsible

BlockContainer

browse
docs
issues
() => {
  return (
    <BlockContainer title="BlockContainer" collapsible={false}>
      <Donut value={1 / 2} />
    </BlockContainer>
  );
}

Custom Id

BlockContainer

browse
docs
issues
() => {
  return (
    <BlockContainer title="BlockContainer" id="custom-id">
      <Donut value={1 / 2} />
    </BlockContainer>
  );
}

Description

H3 title

Markdown

google

browse
docs
issues
() => {
  return (
    <ThemeProvider>
      <BlockContainer
        description={`
### H3 title
*Markdown*
[google](https://www.google.com)
`}
      >
        <Donut value={1 / 2} />
      </BlockContainer>
    </ThemeProvider>
  );
}
Previous
component-controls/ActionContainer
Next
component-controls/Collapsible