UNPKG

@inkline/inkline

Version:

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

inkline.io

inkline/inkline

57 lines (54 loc) • 2.15 kB
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
<i-input v-model="prepend" placeholder="Type something.."> <template #prepend> <i-dropdown> <i-button>Dropdown</i-button> <template #body> <i-dropdown-item>Action</i-dropdown-item> <i-dropdown-item>Another action</i-dropdown-item> <i-dropdown-item disabled>Disabled action</i-dropdown-item> <i-dropdown-divider /> <i-dropdown-item>Separated item</i-dropdown-item> </template> </i-dropdown> </template> </i-input> <i-input v-model="append" placeholder="Type something.."> <template #append> <i-dropdown> <i-button>Dropdown</i-button> <template #body> <i-dropdown-item>Action</i-dropdown-item> <i-dropdown-item>Another action</i-dropdown-item> <i-dropdown-item disabled>Disabled action</i-dropdown-item> <i-dropdown-divider /> <i-dropdown-item>Separated item</i-dropdown-item> </template> </i-dropdown> </template> </i-input> <i-input v-model="prependAppend" placeholder="Type something.."> <template #prepend> <i-dropdown> <i-button>Dropdown</i-button> <template #body> <i-dropdown-item>Action</i-dropdown-item> <i-dropdown-item>Another action</i-dropdown-item> <i-dropdown-item disabled>Disabled action</i-dropdown-item> <i-dropdown-divider /> <i-dropdown-item>Separated item</i-dropdown-item> </template> </i-dropdown> </template> <template #append> <i-dropdown> <i-button>Dropdown</i-button> <template #body> <i-dropdown-item>Action</i-dropdown-item> <i-dropdown-item>Another action</i-dropdown-item> <i-dropdown-item disabled>Disabled action</i-dropdown-item> <i-dropdown-divider /> <i-dropdown-item>Separated item</i-dropdown-item> </template> </i-dropdown> </template> </i-input>