@lumavate/components

Lumavate Component Library

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Feb 28, 2019Feb 26, 2018Minified + gzip package size for @lumavate/components in KB

Readme

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.