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

0.1.11 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

0

Version

0.1.11

License

MIT

Unpacked Size

624 kB

Total Files

10

Last publish

Collaborators

  • goersch.juliane
  • martinherweg
  • borchert.manja
  • roessel.nico
  • karlbanke
  • hajo.cirksena.dpa
  • schubert.florian
  • michelle3105
  • arifpehlivan
  • dpa-connect-deployment
  • antje.sommer
  • mlnmln
  • andrewbeng89
  • mridul_dpa