GeDiez/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Nucleus

Nucleus is a library of web-components stand-alone for all products of MiFiel

Getting Started

Simply add the follow tags into your html and ready! you can use them
  <head>
    ...
    <link rel="stylesheet" href="https://cdn.mifiel.co/nucleus@0.0.1-rc/nucleus.css">
  </head>

  <body>
    ...
    <script src="/build/nucleus.js" defer></script>
  </body>
Components availables

Nucleus contains basic components that you can use as html tags

components have their own propierties
components handle their own events


Note: you can assign callback to events with .addEventListener() method

Mi Main Container

Mi Main Container is a wrapper for all projects, you dont need say it what proyect is, it just will render the correct header and footer
  <mi-main-container id-container="mainContainer" email="user@vexbi.com" avatar-path="./assets/avatar-default.png">
And depending what theme is, you will need to pass it some props


Property
type
options


id-container
number


email
string


avtar-path
string
path


tickers
object
Array of what currency is trading


isWhiteOnMobile
boolean
true false


Buttons

Nucleus has many variants for buttons from basic and primary until hyperlinks, you can make them small and larges, with icon, change colors, send a text to the clipboard.
  <mi-button ...properties> mi button <mi-button>


Property
type
options


theme
string
vex  vol


block
boolean
true  false


color
string


disabled
boolean
true  false


href
string
path


size
string
xs sm md lg


submit
boolean
true  false


tiny
boolean
true  false


type
string
basic  outline


target
string
_self _blank


icon
string
path


name
string


class-name
string


clipboard-text
string
some text to send to the clipboard


state
string
is-active is-scale is-scaleOnActive


Events Supportted

buttonClick


buttonMouseEnter


buttonMouseLeave


Toggle Button

It seems like a button group but only supports two options
  <mi-toggle-button ...properties><mi-toggle-button>


Property
type
options


type
string
basic


color
string
primary


block
boolean
true  false


is-active
boolean
true  false


first-text
string


last-text
string


Events Supportted

firstButtonClick


lastButtonClick


Links

Links are simplest componets, you can modify the same props as any <a> also it provides some styles
  <mi-link ...properties><mi-link>


Property
type
options


class-name
string


type
string
vex  vol basic bg


color
string
white | n50ToG200 | n250ToG200 | n350ToWhite | y300ToG200 | n300ToN500 | r150ToN500


spacing
boolean
true  false


strong
boolean
true  false


bold
boolean
true  false


strong
boolean
true  false


active
boolean
true  false


underline
boolean
true  false


has-caret
boolean
true  false


target
string
_self _blank


Events Supportted

linkClick


Inputs

Input support all variants such as to accept only numbers, password, email, letters,
also this provides validations
  <mi-input ...properties />
Input component has methods that allow apply actions on itself
  var element = document.getElementByTagName('mi-input');

  element.isValid() // true or false
  element.reset()   // clear inputs messages
  element.clear()   // same that reset also this lets empty value


Property
type
options


theme
string
vex  vol


email
boolean
true  false


number
boolean
true  false


required
boolean
true  false


password
boolean
true  false


phone-number
boolean
true  false


currency
boolean
true  false


letters
boolean
true  false


decimals
boolean
true  false


disabled
boolean
true  false


block
boolean
true  false


is-dark
boolean
true  false


show-password
boolean
true  false


color
string


min-lenght
number


max-lenght
number


label-text
string


with-abbr
string


name
string


place-holder
string


success
boolean
true  false


message-success
string


error
boolean
true  false


message-error
string


Events Supportted

valueChange


Checkbox

A simple checkbox with validations
  <mi-checkbox checked="true" name="name2" class-name="mi_u-marginB20" error="true" error-message="you have to read and check the message above before withdrawing to it." type="basic" color="g200">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima recusandae similique vitae rerum possimus.</p>
  </mi-checkbox>


Property
type
options


class-name
string


type
string
basic


color
string
g200


value
string


required
string
true false


checked
string
true false


disabled
string
true false


error
string
true false


error-message
string


Events Supportted

checkChange


Sidenav

Sidenav reusable
  <mi-side-nav ...properties />


Property
type
options


theme
string
vex  vol


type
string
basic


block
boolean
true  false


Add items to the sidenav
  var sidenav = document.getElementByTagName('mi-side-nav');

  const options = [
      { label: 'Account', url: '/path' },
      { label: 'Security', url: '/path-2' },
      { label: 'Account verification', url: '/path-3' },
      { label: 'Bank accounts', url: '/path-4', active: true }
    ];

  sidenav.options = options;
Events Supportted

not supportted


Tabs

  <mi-tabs position-tabs="bottom" grow="">
    <mi-tab-header slot="header" name="tab1">Tab 1</mi-tab-header>
    <mi-tab-header slot="header" name="tab2">Tab 2</mi-tab-header>
    <mi-tab-content slot="content" name="tab1">
      <h1>Tab one</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et hic nobis error blanditiis laboriosam, vitae omnis
        fugit tempore optio delectus voluptate sed quidem voluptatibus dicta quod sint, expedita, explicabo aut. </p>
    </mi-tab-content>
    <mi-tab-content slot="content" name="tab2">
      <h1>Tab two</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, vero! Dignissimos iure architecto doloribus
        a tenetur? Similique possimus provident porro ut perferendis placeat illo quasi, dolores accusantium ullam,
        deleniti qui! </p>
    </mi-tab-content>
  </mi-tabs>
Properties for mi-tabs


Property
type
options


type
string
basic whiteToG200


grow
boolean
true  false


positionTabs
string
top bottom


Properties for mi-tab-header


Property
type
options


index
string


name
string


grow
boolean
true  false


isSelected
string
top bottom


slot
string
header


Properties for mi-tab-content


Property
type
options


name
string


isSelected
string
top bottom


slot
string
content


Events Supportted
For mi-tab-header

tabSelect


Input code verification

  <mi-input-code id="input-code" is-dark></mi-input-code>
Aditionally it receives a child or slot to show a message error
  <mi-input-code id="input-code" error>
    <p slot="messageError">Ups! Some went wrong</p>
  </mi-input-code>
Properties


Property
type
options


type
string
basic


color
string
primary


id-name
string


class-name
string


label-text
string


is-dark
boolean
true  false


error
boolean
true  false


number-digits
number


Input code component has the .isValid() method that allow you validate if input is required or has errors.
  var inputCode = document.getElementByTagName('mi-input-code');

  inputCode.isValid() // true or false
Events Supportted

not supportted


Breadcrumbs

Show a trace of the browser history
  <mi-breadcrumbs></mi-breadcrumbs>


Property
type
options


theme
string
vex vol


class-name
string


Add items to the breadcrumbs component
  var breadcrumbs = document.getElementByTagName('mi-breadcrumbs');

  const options = [
      { label: 'Account', url: '/path' },
      { label: 'Security', url: '/path-2' },
      { label: 'Account verification', url: '/path-3' },
      { label: 'Bank accounts', url: '/path-4', active: true }
    ];

  breadcrumbs.options = options;
Events Supportted

not supportted


Progress bar

Progress bar works with percentages, i mean, you should use values between 1 - 100
use customs colors for show the bar and progress
  <mi-progress-bar percentage="10" color-progress="#e6004d"></mi-progress-bar>


Property
type
options


class-name
string


color-progress
string
color i.e. #e6004d


color-bar
string
color i.e. #e6004d


percentage
number
1 - 100 %


Events Supportted

not supportted


Notify

A component that shows notifications at the top-right corner
  <mi-notify>
    body's message: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </mi-notify>


Property
type
options


theme
string
vex vol


class-name
string


type
string
success error


notify-title
string


show
boolean
true false


Events Supportted

closeNotify


Dropdown

  <mi-dropdown rounded>
    <mi-dropdown-toggle slot="toggle" caret alignment="right">
      <span>Button</span>
    </mi-dropdown-toggle>

    <mi-dropdown-menu slot="menu" placement="bottom-right" block>
      <ul>
        <li>
          <mi-link strong>Opcion 1</mi-link>
        </li>
        <li>
          <mi-link strong>Opcion 2</mi-link>
        </li>
        <li>
          <mi-link strong>Opcion 3</mi-link>
        </li>
      </ul>
    </mi-dropdown-menu>
  </mi-dropdown>
Properties for mi-dropdown


Property
type
options


theme
string
vex vol


class-name
string


type
string
basic


color
string
nb650AndWhite nb650 nb550


rounded
boolean
true false


block
boolean
true false


active
boolean
true false


padding
boolean
sm md


Properties for  mi-dropdown-toggle


Property
type
options


slot
string
toggle


class-name
string


type
string
basic


color
string
nb650AndWhite nb650 nb550


caret
boolean
true false


block
boolean
true false


active
boolean
true false


activeOnHover
boolean
true false


aligment
string
left right center between


Properties for  mi-dropdown-menu


Property
type
options


slot
string
menu


class-name
string


block
boolean
true false


placement
string
left-top left-bottom top-left top-right right-top right-bottom bottom-left bottom-right


Events Supportted
Events for mi-dropdown-toggle

dropdownToggle


Status circles

This component add a label with a circle before it, the circle can take a color depending of status property, if status is not set it will show a empty circle
  <mi-notify>
    body's message: Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </mi-notify>


Property
type
options


status
string
approved reject


Events Supportted

not supprted
Property	type	options
id-container	number
email	string
avtar-path	string	`path`
tickers	object	Array of what currency is trading
isWhiteOnMobile	boolean	true false
Property	type	options
theme	string	`vex` `vol`
block	boolean	`true` `false`
color	string
disabled	boolean	`true` `false`
href	string	`path`
size	string	`xs` `sm` `md` `lg`
submit	boolean	`true` `false`
tiny	boolean	`true` `false`
type	string	`basic` `outline`
target	string	`_self` `_blank`
icon	string	path
name	string
class-name	string
clipboard-text	string	`some text to send to the clipboard`
state	string	`is-active` `is-scale` `is-scaleOnActive`
Property	type	options
type	string	`basic`
color	string	`primary`
block	boolean	`true` `false`
is-active	boolean	`true` `false`
first-text	string
last-text	string
Property	type	options
type	string	`basic` `whiteToG200`
grow	boolean	`true` `false`
positionTabs	string	`top` `bottom`
Property	type	options
index	string
name	string
grow	boolean	`true` `false`
isSelected	string	`top` `bottom`
slot	string	`header`
Property	type	options
class-name	string
color-progress	string	color i.e. `#e6004d`
color-bar	string	color i.e. `#e6004d`
percentage	number	`1 - 100` %
Property	type	options
slot	string	`toggle`
class-name	string
type	string	`basic`
color	string	`nb650AndWhite` `nb650` `nb550`
caret	boolean	`true` `false`
block	boolean	`true` `false`
active	boolean	`true` `false`
activeOnHover	boolean	`true` `false`
aligment	string	`left` `right` `center` `between`
Property	type	options
slot	string	`menu`
class-name	string
block	boolean	`true` `false`
placement	string	`left-top` `left-bottom` `top-left` `top-right` `right-top` `right-bottom` `bottom-left` `bottom-right`