@dpa-id-components/dpa-event-item
DpaEventItem
Vue 2.x domain sepecific for Events (i.e. topic and event items in dpa-Agenda) component based on the dpa Design Kit
Installation
yarn add @dpa-id-components/dpa-event-item
Usage
<!-- SomeComponent.vue using DpaEventItem -->
<template>
<div ref="container">
<dpa-event-item v-bind="eventProps" />
</div>
</template>
<script>
export default {
data() {
width: 0,
resizeObserver: undefined,
eventProps: {
date: "27. September",
dateDetail: "Ganztägig",
title:
"Auftakt des Kapitalanlegermusterverfahrens am OLG Stuttgart gegen die VW-Holding Porsche SE im Zusammenhang mit dem Dieselskandal",
location: "Berlin",
noticeType: "event",
actionType: "favorite",
comments: "10 Inhalte geplant",
}
},
}
</script>
Demo
View a demo of <dpa-event-item>
on Storybook
API
Props
Name | Type | Required | Description |
---|---|---|---|
title |
String |
true |
The title of the event or topic |
date |
String |
true |
The formatted date of the event or topic |
dateDetail |
String |
false |
Additional date information (e.g. time) |
noticeType |
string |
false |
Either "event" or "topic"
|
comments |
String |
false |
Supplementary text information (e.g. content) |
size |
String |
false |
Size variant; either small , medium , large
|
view |
String |
false |
Which view variant should be used, compact or standard
|
top |
Boolean |
false |
If the event item should displayed as "top entry" |
description |
String |
false |
The teaser text that should be displayed. Only applies to standard view. |
truncateTitle |
Boolean |
false |
Applies a line-clamp of two rows to the event's title field. |
Slots
Name | Description |
---|---|
actions |
slot for a ui-menu activator button for further actions (e.g. copy, share) |
addFavoriteAction |
slot for a ui-tooltip incl. activator button for add to favorite action |
filters |
slot for a DpaFilterBadge components |
planningItems |
slot for a DpaPlanningItem components |