Container

the Container component is the basic component, it is included in most of other components. This component specifies the type of html element. The Container component has variations that can be set in the theme, these variations contain parameters depending on the size of the html element, which is validated with the @container at-rule of the css standard. There are default variations, which is root and parent. 'root' is useful for containers that are displayed in full width. When the @container max-width rule of the html element is enforced, a max-width rule is enforced on those children what use an attribute eg.: container-type={'root-page'}. This set up apply the maximum width of the children.

In the theme's function.scss

$container: (
    root: (
        xs: (
            min-width: 1px,
            children: (
                page: (
                    max-width: 100%
                ),
                side: (
                    min-width: 100%
                )
            ),
        ),
        vs: (
            min-width: 320px,
            children: (
                page:(
                    max-width: 100%
                ),
                side:(
                    min-width: 320px
                )
            ),
        ),
        sm: (
            min-width: 576px,
            children: (
                page:(
                    max-width: 540px
                ),
            ),
        ),
        md: (
            min-width: 768px,
            children: (
                page:(
                    max-width: 720px
                )
            ),
        ),
        lg: (
            min-width: 992px,
            children: (
                page:(
                    max-width: 960px
                )
            ),
        ),
        xl: (
            min-width: 1200px,
            children: (
                page: (
                    max-width: 1040px
                )
            ),
        ),
        xxl: (
            min-width: 1440px,
            children: (
                page: (
                    max-width: 1400px
                )
            ),
        ),
    ),
    parent: (
        xs: (
            min-width: 1px,
            children: (
                side: (
                    min-width: 100%
                )
            ),
        ),
        md: (
            min-width: 320px,
            children: (
                side: (
                    min-width: 320px,
                )
            ),
        ),
    )
)

Props

Props of the Color | Container components are also available.

Name	Type	Description
children	node	The content of the component.
Component	element type	The component used for the root node. Either a string to use a HTML element or a component.
variant or containerVariant	string - root, parent	The variant to use.
effect	function	This function will be called back when the component mounted with an `{actions}` input that contains an `actions.setClassName(newClassName)` function. This function allows to change className without reloading the component and its children.
defaultClassName	string	This className that remain even after changing className with actions.setClassName.

The ref is forwarded to the root element.

Examples

Usage example for full width pages

<Container containerVariant={'root'}>
    <Paper container-type={'root-page'}>
        {children}
    </Paper>
</Container>

A usage example for a relative nested menu that depends on the parent container is and for the menu's internal dropdown menus, which depend on the root container. In this example, css variables were used instead of the html attribute

/*noinspection ALL*/
.menuBasePaperDependsOnParentContainer {
    min-width: var(--digby-container-parent-side-min-width);
}

/*noinspection ALL*/
.menuPopoverPaperDependsOnRootContainer {
    min-width: var(--digby-container-root-side-min-width);
}

/*noinspection ALL*/
.menuModalDependsOnRootContainer > [data-popper-placement] {
    min-width: var(--digby-container-root-side-min-width);
}

A React based UI kit for DIGBY Design

Container

Props

Examples

ver: iyx6hb