UNPKG

@inkline/inkline

Version:

Inkline is the Vue.js UI/UX Library built for creating your next design system

57 lines (54 loc) 2.15 kB
<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>