Dropdown

Basic usage

Dropdown
Dropdown
Dropdown
Dropdown
<div class="dropdowns">
    <mu-dropdown>
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>

    <mu-dropdown position="top">
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>

    <mu-dropdown position="left">
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>

    <mu-dropdown position="right">
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

Close on click usage

Dropdown
Dropdown
<div class="dropdowns">
    <label> No close on click </label>
    <mu-dropdown :close-on-click="false">
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>

    <label> Close on Click </label>
    <mu-dropdown>
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Gray style usage

Dropdown
Dropdown
Dropdown
Dropdown
<div class="dropdowns">
    <label> No close on click </label>
    <mu-dropdown :close-on-click="false">
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>

    <label> Close on Click </label>
    <mu-dropdown>
        <template slot="button">
            Dropdown
        </template>
        <template slot="body">
            <mu-dropdown-item>Item 1</mu-dropdown-item>
            <mu-dropdown-item>Item 2</mu-dropdown-item>
        </template>
    </mu-dropdown>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Attributes

Attribute Description Type Accepted Values Default
closeOnClick close then inner element clicked Boolean true / false true
className name of class to customize String any empty string
styleName name of style to customize String gray empty string
position position of inner elements String top / bottom / left / right bottom