CodeCraft Kit

Chakra-UI ReactJs Next.JS

@codecraftkit

Documentation

BoxContainer

Description#

The Box Container is used to wrap an element inside a box and add title or actions to the container.

Import#

it can be imported from the core.

Code Example

import { BoxContainer } from "@codecraftkit/core";

or alone.

Code Example

import BoxContainer from "@codecraftkit/boxcontainer";

Usage#

Code Example

<BoxContainer>
    Some interesting Text
</BoxContainer>

Title#

Code Example

<BoxContainer title="Title">
    Some interesting Text
</BoxContainer>

Actions#

Code Example

<BoxContainer
    title="Title"
        actions={
      <Button
         size='xs'
         onClick={()=>alert("Hello World")}
       >
         Show Alert
       </Button>
     }
    >
    Some interesting Text
</BoxContainer>

Advance#

Code Example

<BoxContainer
    title="Countries"
    noBorder
    styles={{ padding: 0 }}
    titleContainerStyles={{gap:2}}
    actions={
      <>
        <Grid templateColumns='1fr repeat(2, auto)' gap={2}>
          <Button size='xs'>
            Refresh
          </Button>
          <Button size='xs' colorScheme='green'>
            Create
          </Button>
        </Grid>
        <Grid gridColumn='span 2'>
          <Input placeholder='Enter Name' />
        </Grid>
      </>
    }
  >
      Some interesting Text
</BoxContainer>

Props#

name

type

required

default

description

title

ComponentString

The name that the box will take as title

actions

Component

Actions on the right side of the box

children

Component

Component that will be the content of the box

styles

Object

Box Container custom styles

noBorder

Boolean

false

Remove Box Container border

titleContainerStyles

Object

title container styles

titleStyles

Object

title styles