AisDropdown
An unstyled component to handle button basics. AisDropdown is intended as a building block. Library consumers may use it if they have requirements not fulfilled by the branded options.
Basic Example
vue
<template>
<div class="flex justify-around">
<div>
<AisDropdown label="Using Default Slot" variant="secondary">
<AisMenuItem label="Menu Item 1"></AisMenuItem>
<AisMenuItem label="Menu Item 2"></AisMenuItem>
<AisMenuItem label="Menu Item 3"></AisMenuItem>
</AisDropdown>
</div>
<div>
<AisDropdown label="Using Items Prop" :items="items" variant="secondary"></AisDropdown>
</div>
</div>
</template>
<script setup>
import { AisDropdown } from '@ais-public/ais-components'
import { AisMenuItem } from '@ais-public/ais-components'
import { items } from "@/components/menu/examples/example-items"
</script>
<script>
export default {
name: "AisDropdownExample"
}
</script>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
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
Alignment
vue
<template>
<div class="flex justify-around">
<div>
<AisDropdown label="Align Left (default)"
:items="items"
variant="secondary"
font="sans"
size="md"
rounded
></AisDropdown>
</div>
<div>
<AisDropdown label="Align to the Right"
:items="items"
variant="secondary"
font="sans"
size="md"
rounded
right
></AisDropdown>
</div>
</div>
</template>
<script setup>
import { AisDropdown } from '@ais-public/ais-components'
import { items } from "@/components/menu/examples/example-items.js"
</script>
<script>
export default {
name: "AisDropdownAlignment",
}
</script>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
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
Positioning
vue
<template>
<div class="flex justify-between gap-8">
<div>
<AisDropdown label="Drop-Right"
:items="items"
variant="secondary"
font="sans"
size="sm"
rounded
dropright
></AisDropdown>
</div>
<div>
<AisDropdown label="Drop-Up"
:items="items"
variant="secondary"
font="sans"
size="sm"
rounded
dropup
></AisDropdown>
</div>
<div>
<AisDropdown label="Drop-Up & Align Right"
:items="items"
variant="secondary"
font="sans"
size="sm"
rounded
dropup right
></AisDropdown>
</div>
<div>
<AisDropdown label="Drop-Left"
:items="items"
variant="secondary"
font="sans"
size="sm"
rounded
dropleft
></AisDropdown>
</div>
</div>
</template>
<script setup>
import { AisDropdown } from '@ais-public/ais-components'
import { items } from "@/components/menu/examples/example-items.js"
</script>
<script>
export default {
name: "AisDropdownPositioning",
}
</script>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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
Divider
vue
<template>
<div class="flex gap-8">
<div>
<AisDropdown label="With Divider" variant="secondary" size="md" font="sans" rounded>
<AisMenuItem label="Menu Item 1"></AisMenuItem>
<AisMenuItem label="Menu Item 2"></AisMenuItem>
<AisMenuDivider/>
<AisMenuItem label="Menu Item 3"></AisMenuItem>
</AisDropdown>
</div>
<div>
<AisDropdown label="With Divider Using Items Prop"
:items="items"
variant="secondary"
size="md"
font="sans"
rounded></AisDropdown>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { AisDropdown } from '@ais-public/ais-components'
import { AisMenuItem } from '@ais-public/ais-components'
import { AisMenuDivider } from '@ais-public/ais-components'
const items = ref([
{ key: 'item1', label: 'Menu Item 1' },
{ key: 'item2', label: 'Menu Item 2' },
{ key: 'divider1', type: 'divider' },
{ key: 'item3', label: 'Menu Item 3' },
])
</script>
<script>
export default {
name: "AisDropdownDivider",
}
</script>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
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
Group
vue
<template>
<div class="flex justify-around gap-4">
<div>
<AisDropdown label="Using Default Slot" variant="secondary" size="md" font="sans" rounded>
<AisMenuItem label="Dropdown Item 1"></AisMenuItem>
<AisMenuItem label="Dropdown Item 2"></AisMenuItem>
<AisMenuGroup label="Group 1" header-class="text-sm font-bold">
<AisMenuItem label="Group 1 Item 1"></AisMenuItem>
<AisMenuItem label="Group 1 Item 2"></AisMenuItem>
<AisMenuItem label="Group 1 Item 3"></AisMenuItem>
</AisMenuGroup>
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Nested Menu
vue
<template>
<div class="flex gap-8">
<div>
<AisDropdown label="Multi-Level" variant="secondary" size="md" font="sans" rounded>
<AisMenuItem label="Menu Item 1"></AisMenuItem>
<AisMenuItem label="Menu Item 2"></AisMenuItem>
<AisMenuItem>
<AisMenu label="Nested Menu 1"
icon="group"
dropright
>
<AisMenuItem label="Nested Menu Item 1" icon="person"></AisMenuItem>
<AisMenuItem label="Nested Menu Item 2" icon="person"></AisMenuItem>
<AisMenuItem label="Nested Menu Item 3" icon="person"></AisMenuItem>
</AisMenu>
</AisMenuItem>
</AisDropdown>
</div>
</div>
</template>
<script setup>
import { AisDropdown } from '@ais-public/ais-components'
import { AisMenuItem } from '@ais-public/ais-components'
import { AisMenu } from '@ais-public/ais-components'
</script>
<script>
export default {
name: "AisDropdownNestedMenu",
}
</script>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
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
Button Options (custom and input)
Block:
Hover:
Fast:
Press:
vue
<template>
<div class="flex flex-col gap-8">
<div class="grid grid-cols-4 gap-12">
<div class="col-span-3">
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
<div>
<AisField label="Variant:">
<AisSelect v-model="selectedVariant" size="sm"
:options="['primary', 'secondary', 'default', 'info', 'success', 'warning', 'danger']"/>
</AisField>
</div>
<div class="col-span-2">
<AisField label="Outline:">
<AisToggle v-model="dropdownOutline" class="mt-1.5"/>
</AisField>
</div>
<div>
<AisField label="Size:">
<AisSelect v-model="selectedSize" size="sm" :options="['xs', 'sm', 'md', 'lg', 'xl']"/>
</AisField>
</div>
<div>
<AisField label="Font:">
<AisSelect v-model="selectedFont" size="sm" :options="['caps', 'sans', 'serif']"/>
</AisField>
</div>
<div>
<AisField label="Rounded:">
<AisSelect v-model="selectedRounded" size="sm" :options="['false', 'true', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full']"/>
</AisField>
</div>
</div>
</div>
<div class="flex flex-col place-content-around">
<div class="flex justify-between">
<div>Block:</div>
<div><AisToggle v-model="dropdownBlock"/></div>
</div>
<div class="flex justify-between">
<div>Hover:</div>
<div><AisToggle v-model="dropdownHover"/></div>
</div>
<div class="flex justify-between">
<div>Fast:</div>
<div><AisToggle v-model="dropdownFast"/></div>
</div>
<div class="flex justify-between">
<div>Press:</div>
<div><AisToggle v-model="dropdownPress"/></div>
</div>
</div>
</div>
<div>
<div>
<AisDropdown label="Dropdown"
:items="items"
:variant="selectedVariant"
:alternate="dropdownOutline"
:size="selectedSize"
:font="selectedFont"
:rounded="dropdownRounded"
:block="dropdownBlock"
:hover="dropdownHover"
:press="dropdownPress"
:fast="dropdownFast"
></AisDropdown>
</div>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { AisDropdown } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'
import { AisToggle } from '@ais-public/ais-components'
import { items } from "@/components/menu/examples/example-items"
const selectedVariant = ref('secondary')
const selectedSize = ref('md')
const selectedFont = ref('sans')
const dropdownOutline = ref(false)
const selectedRounded = ref('false')
const dropdownBlock = ref(false)
const dropdownHover = ref(false)
const dropdownPress = ref(false)
const dropdownFast = ref(false)
const dropdownRounded = computed(() => {
if(selectedRounded.value === 'false')
return false
else if (selectedRounded.value === 'true')
return true
return selectedRounded.value
})
</script>
<script>
export default {
name: "AisDropdownButtonOptions"
}
</script>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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108