mds-author

Installation

Install the component via npm by running the following command:

npm i @maggioli-design-system/mds-author

This package works also with yarn:

yarn add @maggioli-design-system/mds-author

Import

Import the component in your project via TypeScript as follows:

import { defineCustomElements as dceMdsAuthor } from '@maggioli-design-system/mds-author/loader'

dceMdsAuthor()

If you need to support older browsers (i.e. IE or early version of Edge), you can wrap the defineCustomElements in another utility available in the same package:

import { applyPolyfills as apMdsAuthor, defineCustomElements as dceMdsAuthor } from '@maggioli-design-system/mds-author/loader'

apMdsAuthor().then(dceMdsAuthor())

Use alias for defineCustomElements method to initialize multiple web components in the same place:

import { defineCustomElements as dceMdsComponentOne } from '@maggioli-design-system/mds-component-one/loader'
import { defineCustomElements as dceMdsComponentTwo } from '@maggioli-design-system/mds-component-two/loader'

dceMdsComponentOne()
dceMdsComponentTwo()

You can check how browser support works at this page.

Integration

How to use it in HTML

MdsAuthor accepts a specific slot named avatar which is used to display an element on the left side (usually an image, or the initials of the author if no src is provided), while accepts multiple slots to be displayed on the right side for author's name and description. An example follow:

<mds-author>
  <mds-avatar slot="avatar" initials="jd" src="<some-url>"></mds-avatar>
  <mds-text typography="h6">John Doe</mds-text>
  <mds-text typography="caption">Associated professor</mds-text>
</mds-author>

You can try it out on the component's Storybook website!

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Slots

| Slot | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | | "avatar" | Insert an avatar image, it is recommended to add mds-avatar element. | | "default" | Add text string, HTML elements or components to this slot. Insert author information, name, role or other useful author infos. |

Built with love @ Gruppo Maggioli from R&D Department