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

@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"\|"picture"\|"graphic"\|"video"\|"audio"`
`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