@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
HTML
<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>