@orcden/od-cabinet NPM

A component to house expanding content.

<od-cabinet> is a simple component that can control the behaviour of <od-cabinet-items>. The content expands into view and can be configured to only ever display one pice of content at a time.

Installation

Install with npm

npm i @orcden/od-cabinet

Usage

import '@orcden/od-cabinet';

<od-cabinet hold-open>
    <od-cabinet-item>
        <span slot='title'>Testing</span>
        <p>
            Test 1
        </p>
    </od-cabinet-item>

    <od-cabinet-item>
        <span slot='title'>Testing2</span>
        <p>
            Test 2
        </p>
    </od-cabinet-item>

    <od-cabinet-item>
        <span slot='title'>Testing3</span>
        <p>
            Test 3
        </p>
    </od-cabinet-item>
</od-cabinet>

Attributes

OD-Cabinet

Attribute	Type	Default	Description
`closed`	Boolean	true	Get. You can set this to true to close all items. otherwise does nothing
`hold-open`	Boolean	false	Set this to true so that the gallery doesn't automatically close other cabinet items

OD-Cabinet-Item

Attribute	Type	Default	Description
`open`	Boolean	false	Use this property to show or hide the content in the cabinet item

Properties

OD-Cabinet

Attribute	Type	Default	Description
`closed`	Boolean	true	Get. You can set this to true to close all items. otherwise does nothing
`holdOpen`	Boolean	false	Set this to true so that the gallery doesn't automatically close other cabinet items

OD-Cabinet-Item

Attribute	Type	Default	Description
`open`	Boolean	false	Use this property to show or hide the content in the cabinet item

Functions

OD-Cabinet

Name	Parameters	Description
`closeItems`	None	Closes all the child cabinet items

OD-Cabinet-Item

Name	Parameters	Description
`toggleOpen`	None	Can be used to open and close the cabinet item content

Styling

CSS variables are available to alter the default styling provided

OD-Cabinet

Shadow Parts	Description
cabinet	The div used to house the cabinet items

OD-Cabinet-Item

Shadow Parts	Description
title	The div used to house the title slot
sliding-container	A div used to transition the content. Change 'transition' to adjust timings
sliding-item	A div used to transition the content.
content	The div used to house the actual cabinet item content.