Create button (#62)

This commit is contained in:
Adrian O.V
2023-06-05 23:34:52 -04:00
committed by GitHub
parent ae3a35816e
commit d98a6adfb3
6 changed files with 444 additions and 2 deletions

View File

@@ -0,0 +1,116 @@
# Dropdown
<DemoContainer>
<DropdownButton
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
default-value="delete"
name="dropdown-one"
>
<template #delete>
<TrashIcon /> Delete
</template>
<template #save>
<CheckIcon /> Save
</template>
<template #recycle>
<UpdatedIcon /> Recycle
</template>
<template #reduce>
<ChevronDownIcon /> Reduce
</template>
<template #reuse>
<TransferIcon /> Reuse
</template>
</DropdownButton>
<DropdownButton
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
default-value="delete"
name="dropdown-two"
render-up
>
<template #delete>
<TrashIcon /> Delete
</template>
<template #save>
<CheckIcon /> Save
</template>
<template #recycle>
<UpdatedIcon /> Recycle
</template>
<template #reduce>
<ChevronDownIcon /> Reduce
</template>
<template #reuse>
<CalendarIcon /> Reuse
</template>
</DropdownButton>
<DropdownButton
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
default-value="delete"
name="dropdown-three"
disabled
>
<template #delete>
<TrashIcon /> Delete
</template>
<template #save>
<CheckIcon /> Save
</template>
<template #recycle>
<UpdatedIcon /> Recycle
</template>
<template #reduce>
<ChevronDownIcon /> Reduce
</template>
<template #reuse>
<CalendarIcon /> Reuse
</template>
</DropdownButton>
<DropdownButton
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
default-value="delete"
name="dropdown-four"
render-up
disabled
>
<template #delete>
<TrashIcon /> Delete
</template>
<template #save>
<CheckIcon /> Save
</template>
<template #recycle>
<UpdatedIcon /> Recycle
</template>
<template #reduce>
<ChevronDownIcon /> Reduce
</template>
<template #reuse>
<CalendarIcon /> Reuse
</template>
</DropdownButton>
</DemoContainer>
```vue
<DropdownButton
:options="['delete', 'save', 'recycle', 'reduce', 'reuse']"
default-value="delete"
@option-click="handleOptionClick"
render-up
>
<template #delete>
<TrashIcon /> Delete
</template>
<template #save>
<CheckIcon /> Save
</template>
<template #recycle>
<UpdatedIcon /> Recycle
</template>
<template #reduce>
<ChevronDownIcon /> Reduce
</template>
<template #reuse>
<CalendarIcon /> Reuse
</template>
</DropdownButton>
```