Nibbling Perfect Macaroni

    @orcden/od-cabinet

    3.1.1 • Public • Published

    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
    

    Install

    npm i @orcden/od-cabinet

    DownloadsWeekly Downloads

    0

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    17.5 kB

    Total Files

    3

    Last publish

    Collaborators

    • iliptikal
    • mackw1990