ThemeEditorRootPanel

ThemeEditorRootPanel is used to create inline panels inside the: ThemeEditorDrawer component.

It's a "dummy" component that provides: icon and title props needed by ThemeEditorDrawer.

View source

Import

Community Version

import { ThemeEditorRootPanel } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ThemeEditorRootPanel } from '@hypertheme-editor-pro/chakra-ui'

Usage

This component works only inside the ThemeEditorDrawer component.

Simple Panel

Here's an example of a simple panel added to a custom theme editor:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        {/* inline ThemeEditorRootPanel with a custom content */}
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="My Custom Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Simple Custom Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        {/* inline ThemeEditorRootPanel with a custom content */}
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="My Custom Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Simple Custom Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Multiple Panels

Here's an example with two inline panels added to a custom theme editor:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="First Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Simple Inline Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>

        <ThemeEditorRootPanel icon={MdAccountBalanceWallet} title="Second Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="primary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Another Inline Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer>
        <ThemeEditorRootPanel icon={MdAddShoppingCart} title="First Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="secondary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Simple Inline Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>

        <ThemeEditorRootPanel icon={MdAccountBalanceWallet} title="Second Panel">
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            minH="200px"
            bg="primary.500"
            color="white"
            borderRadius="md"
          >
            <Text size="sm">Another Inline Panel</Text>
          </Flex>
        </ThemeEditorRootPanel>
      </ThemeEditorDrawer>
    </ThemeEditor>
  )
}

Props

Name	Type	Default	Short Description
`title`	`string`	`undefined`	title to render on the accordion header
`icon`	`IconType`	`undefined`	react-icon to render on the accordion header

title

A string to render inside the ThemeEditorDrawer accordion header.

This prop accepts a string value.

This prop is mandatory.

icon

A react-icon icon to render inside the ThemeEditorDrawer accordion header.

This props accepts a IconType value from react-icons package, you can search for icons here.

This prop is mandatory.

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting

Getting Started

Guides

Components

Hooks

Editors