@maggioli-design-system/mds-bibliography v2.11.4
mds-bibliography
Install
Install the component via npm
by running the following command
npm install @maggioli-design-system/mds-bibliography
This package works also with yarn:
yarn add @maggioli-design-system/mds-bibliography
Import
Import the component in your project via TypeScript
as follows:
import { defineCustomElements as dceMdsBibliography } from '@maggioli-design-system/mds-bibliography/loader'
dceMdsBibliography()
MdsBibliography
depends on MdsText
, so you will have to import it as well:
import { defineCustomElements as dceMdsText } from '@maggioli-design-system/mds-text/loader'
dceMdsText()
If you need to support older browsers (i.e. IE or early version of Edge), you can wrap the defineCustomElements
in another utility awailable in the same package:
import { applyPolyfills as apMdsBibliography, defineCustomElements as dceMdsBibliography } from '@maggioli-design-system/mds-bibliography/loader'
apMdsBibliography().then(dceMdsBibliography())
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
MdsBibliography
accepts the following attributes:
author
: specifies a single or multiple authors, accepts a string or an array of stringsdate
: specifies the date of the bibliographyformat
: specifies the bibliography formatlocation
: specifies the location of the bibliographyname
: specifies the name of the bibliographypublisher
: specifies the publisher of the bibliographyrel
: specifies relationship between the current document and the URLtypography
: specifies the font typography of the elementurl
: specifies the URL of the bibliographyvariant
: specifies the variant fortypography
<mds-bibliography
author="John Doe"
date="2022-10-04"
location="London"
name="Meet John Doe"
publisher="Maggioli Editore"
url="https://www.maggioli.com"
variant="read"
></mds-bibliography>
Wrap first name or last name to crop them correctly:
author="'Jhon Arthur' Doe"
author="'Jhon Arthur' 'Doe Jhonson'"
For multiple authors, you can separate the names using comma, and can still wrap first/last name to crop them:
author="'Jhon Arthur' 'Doe Jhonson', Mike Collins, Erik 'Ross Anderson'"
You can use single or double quotation marks for composite names.
If needed, you can customize the color of the text, the url
text and the color of the url
text when overed overriding the value of the CSS custom properties
listed below
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.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
author | author | Specifies a single or mupltiple authors, this field expect a string or an array of strings. First name and Last name: "Jhon Doe", you can wrap first name or last name to crop them correctly: "'Jhon Arthur' Doe", "'Jhon Arthur' 'Doe Jhonson'", and for multiple authors "'Jhon Arthur' 'Doe Jhonson', 'Mike Collins', Erik 'Ross Anderson'", you can use single or double quotation marks for composite names | string \| undefined | undefined |
date | date | Specifies the date of the bibliography | string \| undefined | undefined |
format | format | Specifies the bibliography format to rapresent the bibliography content | "apa" \| "mla" \| "turabian" | 'apa' |
location | location | Specifies the location of the bibliography | string \| undefined | undefined |
name | name | Specifies the name of the bibliography | string \| undefined | undefined |
publisher | publisher | Specifies the publisher of the bibliography | string \| undefined | undefined |
rel | rel | Specifies relationship between the current document and the URL | "author" \| "external" | 'external' |
typography | typography | Specifies the font typography of the element | "caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip" | 'detail' |
url | url | Specifies the URL of the bibliography | string \| undefined | undefined |
variant | variant | Specifies the variant for typography | "code" \| "info" \| "read" \| "title" \| undefined | undefined |
CSS Custom Properties
Name | Description |
---|---|
--mds-bibliography-color | Sets the text color of the component |
--mds-bibliography-text-decoration | Sets the text decoration color of the link |
--mds-bibliography-text-decoration-hover | Sets the text decoration color of the link when the mouse is over it |
Dependencies
Depends on
Graph
graph TD;
mds-bibliography --> mds-text
style mds-bibliography fill:#f9f,stroke:#333,stroke-width:4px
Built with love @ Gruppo Maggioli from R&D Department
21 days ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
6 months ago
7 months ago
8 months ago
6 months ago
6 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago