@dpa-id-components/dpa-event-item

@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