@lumavate/components
TypeScript icon, indicating that this package has built-in type declarations

0.5.15 • Public • Published

Lumavate Components

These are set of base components developed by the API Team. They were built using Stencil, which is a simple compiler for generating Web Components.

By default, these components rely on the Roboto font and Google Material Icons. Please include the following in your app, if you plan to use these components.

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

To use in your project

 npm install @lumavate/components --save

 and include 

 '../node_modules/@lumavate/components/dist/lumavate-components.js'

Components

Name Description
lumavate-quote Simple component to display quoted text
lumavate-large-nav-card Allows you to display a large navigation card
lumavate-small-nav-card Allows you to display a small navication card.
lumavate-nav-bar Allows you to display a navigation bar at top or bottom of body, with or without icon svg links.

lumavate-quote

 <lumavate-quote
    quote-text='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    font-size=12
    show-card=true
    card-color='#FFF'
    quotation-marks=true
    color='#6A1F64'>
  </lumavate-quote>

lumavate-large-nav-card

  <lumavate-large-nav-card
    caption=true
    caption-text='Dropbox Onboarding Case Study'
    caption-text-color='#000'
    caption-background-color='#FFF'
    card-color='#D8E7FF'
    card-image=true
    image-source='http://via.placeholder.com/140x40'
    image-scaling='contain'
    card-link-'https://www.google.com'>
  </lumavate-large-nav-card>

lumavate-small-nav-card

  <lumavate-small-nav-card
    sub-title=true
    sub-title-text='This is Subtitle'
    title-text='Dropbox Onboarding Case Study'
    title-text-color='#000'
    card-color='#D8E7FF'
    card-image=true
    image-source='http://via.placeholder.com/140x40'
    image-scaling='contain'
    card-ling='https://www.dropbox.com'>
  </lumavate-small-nav-card>

lumavate-nav-bar

  <lumavate-nav-bar
    nav-bar-background-color='#741367'
    nav-bar-item-color='#ff6248'
    nav-bar-position='bottom | top'
    nav-bar-items='[
    {"text":"Bing","linkTo":{"url":"http://www.bing.com"}},
    {"text":"Bing","linkTo":{"url":"http://www.yahoo.com"},"imageSource":{"preview":"https://s3.amazonaws.com/assets.labelnexusdev.com/images/ic_3d_rotation_black_24px.svg"}},
    {"text":"Google","linkTo":{"url":"http://www.google.com"},"imageSource":{"preview":"https://s3.amazonaws.com/assets.labelnexusdev.com/images/ic_3d_rotation_black_24px.svg"}}
    ]'>
  </lumavate-nav-bar>

Readme

Keywords

Package Sidebar

Install

npm i @lumavate/components

Weekly Downloads

0

Version

0.5.15

License

MIT

Unpacked Size

400 kB

Total Files

143

Last publish

Collaborators

  • lumavate