@ima/plugin-atoms
TypeScript icon, indicating that this package has built-in type declarations

10.1.4 • Public • Published

@ima/plugin-atoms

The IMA UI atoms are elementary UI components based on the Pattern Lab design pattern for creating atomic design systems.

This package provides various most commonly needed atoms, but both their functionality and their number are likely to be extended in the future.

The Image, Iframe and others atoms provide the lazy loading functionality by default.

Installation

npm install @ima/plugin-atoms --save

Usage

import { H1, H2, H3, Iframe, Image, Link, Loader, Paragraph, LAYOUT } from '@ima/plugin-atoms';

function MyComponent({title, subtitle, image, embed, text, html, link}) {
  return (
    <>
      <H1>{title}</H1>
      <H2>{subtitle}</H2>
      <div>
        <Paragraph>{text}</Paragraph>
        <Paragraph html={html}/>
        <Link href={lnk.href}>More</Link>
      </div>
      <H3>Examples:<H3>
      <Image src={image.source} width={400} height={300} layout={LAYOUT.RESPONSIVE}/>
      <Iframe src={embed.source} width={300} height={300} layout={LAYOUT.RESPONSIVE}/>
    </>
  )
}

Readme

Keywords

Package Sidebar

Install

npm i @ima/plugin-atoms

Weekly Downloads

30

Version

10.1.4

License

MIT

Unpacked Size

320 kB

Total Files

162

Last publish

Collaborators

  • corvidism
  • mjancarik
  • filipoliko
  • matej.marcisovsky
  • jsimck
  • hartja
  • zdenek.lastuvka
  • jan.kucera
  • ondrej.sliva