xox v0.0.11

xox

Set of Reusable WebComponents

import 'xox/vendor';
import 'xox/loader';
import 'xox/button';
// Other Components

Components

modal

datepicker

select

context-menu

main-menu

code

input

radio

checkbox

form

field

tabs

import 'xox/tabs';

<x-tabs>
  <section tab="tab1" title="Tab 1" icon="check" active="active">
    Content 1
  </section>
  <section tab="tab2" title="Tab 2" icon="code">
    Content 2
  </section>
  <section tab="tab3" title="Tab 3" icon="config">
    Content 3
  </section>
</x-tabs>

lorem

import 'xox/lorem';

<x-lorem></x-lorem>
<x-lorem words="3"></x-lorem>
<x-lorem sentences="3"></x-lorem>

media

import 'xox/media';

<x-media image="http://lorempixel.com/200/200/?i=1" footered="footered">
  <div slot="title">
    Title
  </div>
  <div slot="date">
    Time
  </div>
  <div slot="desc">
    Desc
  </div>
  <div slot="footer">
    Footer
  </div>
</x-media>

<x-media icon="remove" icon-color="#8f5a57">
  <div slot="title">
    Title
  </div>
  <div slot="date">
    Time
  </div>
  <div slot="desc">
    Desc
  </div>
</x-media>

card

import 'xox/card';

<x-card level="none" padding="micro" elevation="small">
</x-card>

<x-card level="normal" padding="big" elevation="large">
</x-card>

pic

import 'xox/pic';

<x-pic
  url="https://cort.host/img/bg/architecture/golden-gate-bridge.jpg"
  size="100"
  view="view">
</x-pic>

button

import 'xox/button';

<x-button
  title="Click Me"
  color="warning"
  icon="close"
  size="big">
</x-button>

scroller

import 'xox/scroller';

<div is="x-scroller"
  width="10"
  radius="5"
  margin="10"
  color="#be28e6"
  opacity="0.1">
</div>

Loader

import loader from 'xox/loader';

loader
  .start([
    // Primary URLs to load
  ], [
    // Secondary URLs to load
  ])
  .then(() => {
    // Loaded
  });