1.0.9 • Published 3 years ago
@zebbra/ui v1.0.9
ZebbraUI is a collection of Vue components for building accessible high level UI libraries. ZebbraUI doesn't depend on any CSS library. Components are unstyled by default.
ZebbraUI basic example:
Here is a simple dialog:
<div>
<ZbDialogDisclosure :state="dlg1">Open dialog</ZbDialogDisclosure>
<ZbDialog :state="dlg1">
<h2 class="border-b-2 border-gray-500 px-2 py-2">Hy! this is a dialog</h2>
<div class="p-8">
<ZbButton @click="dlg1.close">Click to close</ZbButton>
</div>
</ZbDialog>
<ZbDialogBackdrop class="bg-purple-200 opacity-30" :state="dlg1" />
</div>
<script>
import { defineComponent } from 'vue'
import { useDialog, ZbDialog, ZbDialogDisclosure, ZbDialogBackdrop } from '@zebbra/ui'
export default defineComponent({
components: { ZbDialog, ZbDialogDisclosure, ZbDialogBackdrop },
setup() {
const dlg1 = useDialog()
return { dlg1 }
}
})
</script>
Components List
This project is still in early development. New components will be added regularly.
- Box
- Button
- Checkbox
- Radio
- DatePicker
- Dropdown
- Field
- Group
- Input
- Menu
- Switch
- Textarea
License
Copyright (c) 2018 Zebbra contributors
Licensed under the MIT license.