Core

Commons

Button

Parameters

Name	Format	options	Default
color	string	danger, success, primary, link	null
size	string	mini, small, large	null
toggle	boolean	make a toggled button	false
disabled	boolean	make a disabled button	false
full	boolean	make a button with the class: uk-width-1-1	false
margin	boolean	add a margin to button	false

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
  <reactUiKit.button
    color='primary'
    size='large'
    toggle>
      I am a button
  </reactUiKit.button>,
  document.getElementById('test'))

Icon

Parameters

Name	Format	options	Default
icon	string	name of the icon	github
size	string	small, medium ,large	null
spin	boolean	create animated spinning icons	false
hover	boolean	apply a hover effect	false
justify	boolean	add a fixed width to the icon and center it	false

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
  <reactUiKit.icon icon='github' hover spin></reactUiKit.icon>,
  document.getElementById('test'))

Close

Parameters

Name	Format	options	Default
alt	boolean	apply an alternative styling to the close button	false
alert	boolean	prepare the close for a alert	false
tag	string	The tag that will be used	a

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
  <reactUiKit.close icon='github' alt tag='div'></reactUiKit.close>,
  document.getElementById('test'))

Badge

Parameters

Name	Format	options	Default
color	string	success, danger, warning	null
notification	boolean	make a notification badge	false
tag	string	The tag that will be used	div

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
  <reactUiKit.badge color='danger' notification>I am a badge</reactUiKit.badge>,
  document.getElementById('test'))

Alert

Parameters

Name	Format	options	Default
color	string	success, danger, warning	null
large	boolean	make the alert bigger	false
close	boolean	if it has a closed button	true

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
  <reactUiKit.alert color='danger'>I am a alert</reactUiKit.alert>,
  document.getElementById('test'))

Column

Parameters

Name	Format	options	Default
split	object	default,small,medium,large,xlarge	{default: 3,large:2}

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
    <test.column split={{large:8,default:3}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate est dui, ut lobortis diam posuere a. Pellentesque nec urna a quam pellentesque interdum et eget mi. Integer efficitur enim tellus, eget ultricies leo auctor in. Donec luctus leo quis elit luctus, eget pharetra nunc venenatis. Nulla malesuada, libero sit amet placerat gravida, odio lacus ultricies ipsum, nec placerat mauris ex non eros. Maecenas sollicitudin iaculis magna, ut placerat arcu malesuada sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce facilisis ante a ligula euismod maximus. Curabitur interdum nibh ut scelerisque bibendum. Cras rutrum vel elit at finibus. Etiam et commodo felis. Curabitur vestibulum elit et velit vestibulum consectetur.
    </test.column>,document.getElementById('test')
  );

Overlay

Parameters

Name	Format	options	Default
src	string	src of the image	null
alt	string	the attribute alt of img tag	null
hover	boolean	when the mouse go over the image, the caption will show	false
transition	string	slide-top,slide-left,slide-right,slide-bottom,fade,scale,spin,grayscale	null
background	boolean	Caption will have a background	false
icon	boolean	show a icon	false
image	string	The caption can be another image, so in image you must write the src of the image	null
position	string	top,left,right,bottom,cover	null
href	string	If the image is a link, you must write in href the link	null
flex	string	uk-flex-center,uk-flex-middle,etc	null

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
    <test.overlay
      src='http://getuikit.com/docs/images/placeholder_600x400.svg'
      alt='imagen-prueba'
      hover
      transition='fade'
      icon
      href='http://www.getuikit.com'
      background
      position='top'
      >
      <h3>yeah!</h3>
      It is a test caption
    </test.overlay>,document.getElementById('test')
  );

Text

Parameters

Name	Format	options	Default
styles	array	small,large,bold,muted,etc	null
size	string	small,large	null
align	string	left,right,center,etc	null
wrap	string	break,truncate,nowrap	null
tag	string	What tag must be used, example: p,span,etc	span

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
    <test.text size='small' align='center' styles={['bold','success']}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate est dui, ut lobortis diam posuere a. Pellentesque nec urna a quam pellentesque interdum et eget mi. Integer efficitur enim tellus, eget ultricies leo auctor in. Donec luctus leo quis elit luctus, eget pharetra nunc venenatis. Nulla malesuada, libero sit amet placerat gravida, odio lacus ultricies ipsum, nec placerat mauris ex non eros. Maecenas sollicitudin iaculis magna, ut placerat arcu malesuada sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce facilisis ante a ligula euismod maximus. Curabitur interdum nibh ut scelerisque bibendum. Cras rutrum vel elit at finibus. Etiam et commodo felis. Curabitur vestibulum elit et velit vestibulum consectetur.
    </test.text>,document.getElementById('test')
  );

Thumbnail

Parameters

Name	Format	options	Default
tag	string	img,a,figure	img
size	string	large,medium,small,mini	null
src	string	src of the image	null
alt	string	the attribute alt of img tag	null
caption	string	The caption you want to add

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

ReactDOM.render(
    <test.text size='small' align='center' styles={['bold','success']}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate est dui, ut lobortis diam posuere a. Pellentesque nec urna a quam pellentesque interdum et eget mi. Integer efficitur enim tellus, eget ultricies leo auctor in. Donec luctus leo quis elit luctus, eget pharetra nunc venenatis. Nulla malesuada, libero sit amet placerat gravida, odio lacus ultricies ipsum, nec placerat mauris ex non eros. Maecenas sollicitudin iaculis magna, ut placerat arcu malesuada sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce facilisis ante a ligula euismod maximus. Curabitur interdum nibh ut scelerisque bibendum. Cras rutrum vel elit at finibus. Etiam et commodo felis. Curabitur vestibulum elit et velit vestibulum consectetur.
    </test.text>,document.getElementById('test')
  );

Animation

Parameters

Name	Format	options	Default
hover	boolean	true,false	true
moreDuration	boolean	The animation length is 15 seconds	false
animation	string	fade,scale-up,scale-down,slide-top,...	fade
reverse	boolean	reverse the animation	false
behavior	string	is the origin modifier of uikit, top-left, top-center, ...	null

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

  ReactDOM.render(
    <reactUiKit.animation  behavior='slide-right'>
      Este es el boton
    </reactUiKit.animation>,document.getElementById('test')
  );

Elements

Table

Parameters

Name	Format	options	Default
hover	boolean	When the mouse go over the row change into a darker color	true
striped	boolean	Add zebra-striping to a table	false
condensed	string	make table cells more compact	false
responsive	boolean	creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself	false

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

  ReactDOM.render(
    <reactUiKit.table.table hover striped responsive>
      <reactUiKit.table.head>
        <tr>
          <th>Title 1</th>
          <th>Title 2</th>
        </tr>
      </reactUiKit.table.head>
      <reactUiKit.table.body>
        <tr>
          <td>Huee 1</td>
          <td>Huee 2</td>
        </tr>
        <tr>
          <td>Huee 1</td>
          <td>Huee 2</td>
        </tr>
        <tr>
          <td>Huee 1</td>
          <td>Huee 2</td>
        </tr>
      </reactUiKit.table.body>
      <test.table.foot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
        </tr>
      </test.table.foot>
    </reactUiKit.table.table>,document.getElementById('test')
  );

Description List

Parameters

Name	Format	options	Default
horizontal	boolean	make a horizontal list	false

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

  ReactDOM.render(
    <reactUiKit.descriptionList>
      <dt>Title</dt>
      <dd>it is the description</dd>
      <dt>Title 2</dt>
      <dd>it is the description 2</dd>
      <dt>Title 3</dt>
      <dd>it is the description 3</dd>
    </reactUiKit.descriptionList>,document.getElementById('test')
  );

List

Parameters

Name	Format	options	Default
line	boolean	add a line at bottom of each `<li>`	false
striped	boolean	Add zebra-striping to a table	false
space	boolean	the space between `<li>` is bigger	false

Example

var React = require('react');
var ReactDOM = require('react-dom');
var reactUiKit = require('reactuikit');

  ReactDOM.render(
    <reactUiKit.list striped>
      <li>hello</li>
      <li>Hi</li>
      <li>sayounara</li>
    </reactUiKit.list>,document.getElementById('test')
  );

Core

Core

Commons

Button

Icon

Close

Badge

Alert

Column

Overlay

Text

Thumbnail

Animation

Elements

Table

Description List

List

results matching ""

No results matching ""