Enzyme UI

# Collapse

Collapse component can be used whenever you need to toggle visibility of element. Collapse component itself is just a functional div which will make your content which you pass inside Collapse collapsible.

There are 2 ways to control your collapse elements: with v-collapse directive and custom id, or with a direct collapse component instance ref and utilizing open, close or toggle functions.

# Using collapse with v-collapse directive

In order to toggle your collapse component automatically when another element is clicked, you can use v-collapse directive and provide unique id prop to your collapse element and same id to this controller element where you use v-collapse directive

<Button v-collapse="collapseIdVariable">Toggle Collapse</Button>
<collapse :id="collapseIdVariable">
    <div class="my-4 p-3 bg-success text-white rounded">
        <b>A div with collapsed element</b>
        <p class=" mb-0">With some nice text which is not lorem ipsum</p>
    </div>
</collapse>
<script>
    export default {
        data(){
            return {
              collapseIdVariable: 'some-random-generated-id-for-collapse'
            }   
        }
    }
</script>

You can also use multiple elements as controllers for your collapse element.

# Using collapse with $refs and control functions

If you wish to programmatically control the state of collapse you can reference the collapse instance with ref and use open, close, or toggle functions.

<Button @click="$refs['collapse-ref'].toggle()">Toggle Collapse</Button>
<Button @click="$refs['collapse-ref'].open()">Open Collapse</Button>
<Button @click="$refs['collapse-ref'].close()">Close Collapse</Button>
<collapse ref="collapse-ref">
<div class="my-4 p-3 bg-success text-white rounded">
    <b>A div with collapsed element</b>
    <p class=" mb-0">With some nice text which is not lorem ipsum</p>
</div>
</collapse>

# Events

When Collapse component changes it's state, it will emit open event when it is opened or close event when it is closed. You can listen to these events to provide additional functionality within your application. These events don't provide any value, they are used purely as notifiers.

<collapse 
    @open="openEventListener"
    @close="closeEventListener"
>
    Some collapsible content
</collapse>
<script>
    export default {
        methods:{
            openEventListener:()=>{
                // Do something             
            },
            closeEventListener:()=>{
                // Do something             
            },
        }   
    }
</script>

# Props

name description required type
id Unique id for collapse false String
showInitially If set to true - collapse content will be shown initially false Boolean

← Dropdown →