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. |

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build