LuxJS

LuxJS is a JavaScript library that makes it easy to create modern and powerful user web-interfaces. It's built on top of Bulma. Written in three different versions: jQuery, AngularJS and VueJS. Crafted with love.

NOTE:

LuxJS is in currently in active development.

v1.0.0 components

• Button ✓
• Button Dropdown
• Group Button ✓
• Tooltip ✓
• Form
  • Validations ✓
  • Styling
• Notification
• Progress Bar
• Modal
• Tabs
• Dropdown Menu

Table of Contents

• Installation
• Documentation

Installation

Clone or download the project and include files of dist folder into your project. Then import the files into your HTML code.

CSS

You can import Bulma and Lux CSS files separately

<link rel="stylesheet" href="bulma.css">
<link rel="stylesheet" href="lux.css">

or just use the combined version which contains both

<link rel="stylesheet" href="lux.combined.css">

JavaScript

jQuery Version

<script src="jquery.lux.js"></script>

AngularJS Version

<script src="angular.lux.js"></script>

Inject Lux to your app

angular.module('yourApp', ['Lux']);

VueJS Version

<script src="vue.lux.js"></script>

Don't forget to install Lux before using it

Vue.use(Lux);

Documentation

Table of Contents

• Buttons
• Button Group
• Tooltip
• Form Validations

Buttons

jQuery Version Live Example

<button id="foo">Bar</button>

$('#foo').button();

The example above will create a really simple button. You can also use options like it's shown below

$('#foo').button({
  type: 'primary',
  size: 'large',
  style: 'outlined' // or inverted
});

Types

Sizes

Change the state of the button

$('#foo').button().loading();
// or
$('#foo').button('loading');
// and
$('#foo').button('reset'); // back to normal

var btn = $('#foo').button();
btn.loading();
btn.disable();
// chaining with jQuery methods
btn.addClass('someClass').html('Awesome Button').enable();

States

Another handy feature is using a promise to change the state of the button

var httpRequest = $.get('http://jsonplaceholder.typicode.com/posts/1');

$('#foo').button('loading', httpRequest);
// or
$('#foo').button().loading(httpRequest);
// or disable it
$('#foo').button('disable', httpRequest);
// you can also use your own class
$('#foo').button('yourClass andAnother', httpRequest);

Button will be at normal state after the request is complete

AngularJS Version Live Example

<lbutton type="primary" size="small">Small Button</lbutton>

You can bind variables in order to control button states

<lbutton loading="{{users.search.searching}}" ng-click="search()">Search</lbutton>

function yourController($scope, $http) {
  $scope.users = {
    search: {
      results: [],
      searching: false
    }
  };
  
  $scope.search = function() {
    $scope.users.search.searching = true;
    $http.get('/search')
      .then(function(results) {
        $scope.users.search.results = results;
        // do something with results...
      })
      .finally(function() {
        $scope.users.search.searching = false;
      });
  }
}

VueJS Version Live Example

<button v-lbutton type="primary" size="small">Small</button>

Bind variables to state

<div class="container">
  <button v-lbutton v-bind:loading="foo">Load Button</button>
</div>

new Vue({
  el: '.container',
  data: {
    foo: false
  }
});

Button Group

jQuery Version Live Example

<p id="choices">
  <button data-value="foo">Choice 1</button>
  <button data-value="bar">Choice 2</button>
  <button data-value="baz">Choice 3</button>
</p>

$('#choices').buttonGroup();
// retrieve the choosen value
$('#choices').data('value');

AngularJS Version Live Example

<div button-group="choice">
  <button data-value="foo">Choice 1</button>
  <button data-value="bar">Choice 2</button>
  <button data-value="baz">Choice 3</button>
</div>

function yourController($scope) {
  $scope.choice = "foo"; // pre-select Choice 1
}

VueJS Version Live Example

<div class="container">
  <div v-button-group="choice">
    <button data-value="foo">Choice 1</button>
    <button data-value="bar">Choice 2</button>
    <button data-value="baz">Choice 3</button>
  </div>
</div>

new Vue({
  el: '.container',
  data: {
    choice: 'foo' // pre-select Choice 1
  }
});

Tooltip

jQuery Version

<button data-tooltip="This is a tooltip">Tooltip Button</button>
<span data-tooltip="Tooltip placed at the bottom">Span with tooltip</span>

$('button').tooltip();

$('span').tooltip({
  placement: 'bottom',
  tigger: 'click'
});

AngularJS Version

<button tooltip="Tooltip on button">Button</button>

<span tooltip="Another Tooltip" placement="right" trigger="click">Click to show tooltip</span>

<!-- dynamic content tooltip -->
<div tooltip="{{foo}}">Tooltip content changes dynamically</div>

VueJS Version

<button v-tooltip="'Tooltip on button'">Button</button>

<span v-tooltip="'Another Tooltip'" placement="right" trigger="click">Click to show tooltip</span>

<!-- dynamic content tooltip -->
<div v-tooltip="foo">Tooltip content changes dynamically</div>

Form Validations

Available validations:

• required
• email
• url
• length[min]-[max]
• digits[min]-[max]
• number[min]-[max]
• equals
• checked

jQuery Version

<form>
  <label class="label">Name</label>
  <p class="control">
    
    <input valid-required class="input" type="text">
  
  </p>
  <label class="label">Username</label>
  <p class="control">
    
    <input valid-length="4-20" class="input" type="text">
  
  </p>
  <label class="label">Email</label>
  <p class="control">
    
    <input valid-email class="input" type="text">
  
  </p>
  <label class="label">Pin Code</label>
  <p class="control">
    
    <input valid-digits="4-*" class="input" type="text">
  
  </p>
  <label class="label">Website</label>
  <p class="control">
    
    <input valid-url class="input" type="text">
  
  </p>
  <label class="label">Choose one</label>
  <p class="control">
    
    <input valid-equals="foo|bar|baz" class="input" type="text">
  
  </p>
  <p class="control">
    <label class="checkbox">
      
      <input type="checkbox" valid-checked="true">
      
      Check me
    </label>
  </p>
</form>

$('form').form();