@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 |