@dpa-id-components/dpa-event-items-preview
v0.2.7
Published
DpaEventItemsPreview vue component with dpa Design Kit
Downloads
8
Maintainers
Keywords
Readme
@dpa-id-components/dpa-event-items-preview
DpaEventItemsPreview
Vue 2.x domain sepecific UI component for a 5 day preview of event items based on the dpa Design Kit
Installation
yarn add @dpa-id-components/dpa-event-items-preview
Usage
<!-- SomeComponent.vue using DpaEventItemsPreview -->
<template>
<DpaEventItemsPreview :events="eventsGroupedByDay" top="128">
<template v-slot:default="slotProps">
<DpaEventItem :event="slotProps.event" />
</template>
</DpaEventItemsPreview>
</template>
<script>
import DpaEventItemsPreview from "@dpa-id-components/dpa-event-items-preview";
import "@dpa-id-components/dpa-event-items-preview/dist/DpaEventItemsPreview.css";
export default {
components: { DpaEventItemsPreview },
};
</script>
Demo
View a demo of <dpa-event-items-preview>
on Storybook
API
Props
| Name | Type | Required | Default | Description | | ------ | ------ | -------- | ------- | ------------------------------------------------------- | | events | Array | true | [] | An array of event objects, formatted and grouped by day | | top | Number | false | 0 | top position for the sticky header in px |
Slots
| Name | Description |
| --------- | ---------------------------------------- |
| default
| slot for the rendering of the event item |