@dpa-id-components/dpa-media-item

DpaMediaItem Vue 2.x domain sepecific UI component for dpa media genres (i.e. text, picture, graphic, video, audio) based on the dpa Design Kit

Installation

yarn add @dpa-id-components/dpa-media-item

Usage

<!-- SomeComponent.vue using DpaMediaItem -->
<template>
  <dpa-media-item genre="text" is-fulfilled auto-size style="cursor: pointer;">
    <span slot="timePublished">15.11.2021 16:41</span>
    <span slot="description">News Feature im Basisdienst</span>
    <span>BKA-Chef: Cannabis bleibt beliebteste Droge in Deutschland</span>
    <span slot="textLength">104 dpa-Zeilen / 7176 Zeichen</span>
  </dpa-media-item>
</template>

<script>
import DpaMediaItem from "@dpa-id-components/dpa-media-item";
import "@dpa-id-components/dpa-media-item/dist/DpaMediaItem.css";

export default {
  components: { DpaMediaItem }
};
</script>

Demo

View a demo of <dpa-media-item> on Storybook

API

Props

Name	Type	Required	Default	Description
genre	String	true		Genre variant; either `"text"
isFulfilled	Boolean	flase	false	Whether the media item has been fulfilled/delivered (true), or planned (false)
imgSrc	String	flase		The src attribute of the img tag used for the thumbnail of pictures
imgAlt	String	flase	"Thumbnail"	The alt attribute of the img tag used for the thumbnail of pictures
imgCount	Number	flase	0	The number of pictures published in this media coverage item

Slots

Name	Description
default	slot for the media item's headline/title
timePublished	slot for the media item's time of publishing for fulfilled items
description	slot for the media item's description placed above the headline
planning	slot for the media item's planning notes (e.g. schedule) placed to the right of the description
textLength	slot for the media item's text length (e.g. schedule) placed below the description/headline