Skip to content

Instantly share code, notes, and snippets.

@GeDiez

GeDiez/readme.md

Last active September 5, 2018 21:33
Show Gist options
  • Save GeDiez/370925636abf6b1e90ec3efc29845da5 to your computer and use it in GitHub Desktop.
Save GeDiez/370925636abf6b1e90ec3efc29845da5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
readme.md

Nucleus

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

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/[email protected]/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="[email protected]" 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment