Tron Extras
In this section you will find additional components provided by Tron UI Kit. With these components you will be able to build full-featured website or application.
In this section you will find additional components provided by Tron UI Kit. With these components you will be able to build full-featured website or application.
Switch is a common UI element on especially mobile devices that is used for binary on/off or true/false data input.
Below are the live examples and markup needed for creating toggable switch element. Note that for capturing user input we used hidden input.
<div class="switch on">
<div class="knob">
<span class="label">On</span>
<span class="label">Off</span>
</div>
<input type="hidden" value="on">
</div>
<div class="switch switch-outlined">
<div class="knob">
<span class="label">On</span>
<span class="label">Off</span>
</div>
<input type="hidden" value="off">
</div>
In case there is no need for lables simply do not put .label inside .knob.
<div class="switch on">
<div class="knob"></div>
<input type="hidden" value="on">
</div>
Choose between 4 additional color variations. Place modifier class .switch-success, .switch-info, .switch-warning or .switch-danger on .switch element.
<div class="switch switch-success"> ... </div>
<div class="switch switch-info"> ... </div>
<div class="switch switch-warning"> ... </div>
<div class="switch switch-danger"> ... </div>
Add the .disabled class on a .switch to prevent user interaction and generate a different look.
<div class="switch on">
<div class="knob">
<span class="label">On</span>
<span class="label">Off</span>
</div>
<input type="hidden" value="on">
</div>
<div class="switch switch-outlined">
<div class="knob">
<span class="label">On</span>
<span class="label">Off</span>
</div>
<input type="hidden" value="off">
</div>
Plugin supports modern browsers. Basically, anything below IE9 is not compatible with this plugin!
Every single slider used on the page should be initialized individually.
Below are different examples of how bootstrap-slider.js plugin can be used (included in tron-ui.js).
Basic example with custom formatter and colored selected region
<!-- HTML -->
<input id="slider-basic" type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="15"/>
<!-- Javascript -->
$('#slider-basic').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
Position slider vertically by adding data-slider-orientation="vertical" attribute.
<!-- HTML -->
<input id="slider-vertical" type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="15" data-slider-orientation="vertical"/>
<!-- Javascript -->
$('#slider-vertical').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});
Convert slider to range selector with options specified via data attribute.
<!-- HTML -->
<label>Filter by price interval:</label><br>
<b>$ 10</b> <input id="slider-range" type="text" data-slider-min="100" data-slider-max="1000" data-slider-step="10" data-slider-value="[300,700]"/> <b>$ 1000</b>
<!-- Javascript -->
$('#slider-range').slider();
Add the data-slider-enabled="false" attribute to prevent user interaction and trigger a different look.
<!-- HTML -->
<input id="slider-vertical" type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="15" data-slider-enabled="false"/>
For more information regarding usage, options and methods of bootstrap-slider.js plugin refer to official plugin documentation page on GitHub.
Javascript dependent components for setting date via user friendly interface.
Every single slider used on the page should be initialized individually.
Requires minimum setup. Optionally you can highlight current date.
<!-- HTML -->
<input id="datepicker-base" type="text" class="form-control">
<!-- Javascript -->
$('#datepicker-base').datepicker({
todayHighlight: true
});
<!-- HTML -->
<div class="input-group">
<input id="datepicker-addon" type="text" class="form-control addon-right"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
<!-- Javascript -->
$('#datepicker-addon').datepicker({
todayHighlight: true
});
Useful component for selecting fro/to date range.
<!-- HTML -->
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="form-control addon-right" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control addon-left" name="end" />
</div>
<!-- Javascript -->
$('.input-daterange').datepicker();
Use <div> element instead of input to always show datepicker on the page.
<!-- HTML -->
<div id="datepicker-inline"></div>
<!-- Javascript -->
$('#datepicker-inline').datepicker({
todayHighlight: true
});
For more information regarding usage, options, methods and events of bootstrap-datepicker.js plugin refer to official plugin documentation page.
There is also bootstrap-datepicker sandbox available where you can tweak the options and resulted code appears in real time. You than just need to copy and paste it onto your page. Link to sanbox.
Tag is a non-hierarchical keyword or term that helps describe an item and allows it to be found again by browsing or searching. They are widely used in blogging platforms such as WordPress as part of blog post metadata.
Add .tag class to anchor <a> element or if you do not need to link tag simply place class on <span> element.
<a href="#" class="tag">Clickable tag</a>
<span class="tag">Inactive tag</span>
Simply add .tag-success, .tag-info, .tag-warning or .tag-danger modifier class to .tag element.
<a href="#" class="tag">Default tag</a>
<a href="#" class="tag tag-success">Success tag</a>
<a href="#" class="tag tag-info">Info tag</a>
<a href="#" class="tag tag-warning">Warning tag</a>
<a href="#" class="tag tag-danger">Danger tag</a>
<a href="#" class="tag active">Default tag</a>
<a href="#" class="tag tag-success active">Success tag</a>
<a href="#" class="tag tag-info active">Info tag</a>
<a href="#" class="tag tag-warning active">Warning tag</a>
<a href="#" class="tag tag-danger active">Danger tag</a>
Social media has given us great ways to build our digital reputations and promote our online businesses. Nowadays almost every business or individual has social accounts. And every website certainly should have links to these accounts.
Add .social-btn class to anchor <a> element along with network specific class (.sb-facebook for instance).
<a href="#" class="social-btn sb-behance"><i class="fa fa-behance"></i></a>
<a href="#" class="social-btn sb-bitbucket"><i class="fa fa-bitbucket"></i></a>
<a href="#" class="social-btn sb-codepen"><i class="fa fa-codepen"></i></a>
<a href="#" class="social-btn sb-deviantart"><i class="fa fa-deviantart"></i></a>
<a href="#" class="social-btn sb-digg"><i class="fa fa-digg"></i></a>
<a href="#" class="social-btn sb-dribbble"><i class="fa fa-dribbble"></i></a>
<a href="#" class="social-btn sb-dropbox"><i class="fa fa-dropbox"></i></a>
<a href="#" class="social-btn sb-facebook"><i class="fa fa-facebook"></i>></a>
<a href="#" class="social-btn sb-flickr"><i class="fa fa-flickr"></i></a>
<a href="#" class="social-btn sb-foursquare"><i class="fa fa-foursquare"></i></a>
<a href="#" class="social-btn sb-github"><i class="fa fa-github-alt"></i></a>
<a href="#" class="social-btn sb-google-plus"><i class="fa fa-google-plus"></i></a>
<a href="#" class="social-btn sb-instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="social-btn sb-jsfiddle"><i class="fa fa-jsfiddle"></i></a>
<a href="#" class="social-btn sb-lastfm"><i class="fa fa-lastfm"></i></a>
<a href="#" class="social-btn sb-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="social-btn sb-paypal"><i class="fa fa-paypal"></i></a>
<a href="#" class="social-btn sb-pinterest"><i class="fa fa-pinterest"></i></a>
<a href="#" class="social-btn sb-reddit"><i class="fa fa-reddit"></i></a>
<a href="#" class="social-btn sb-skype"><i class="fa fa-skype"></i></a>
<a href="#" class="social-btn sb-soundcloud"><i class="fa fa-soundcloud"></i></a>
<a href="#" class="social-btn sb-stack-overflow"><i class="fa fa-stack-overflow"></i></a>
<a href="#" class="social-btn sb-steam"><i class="fa fa-steam"></i></a>
<a href="#" class="social-btn sb-stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a href="#" class="social-btn sb-trello"><i class="fa fa-trello"></i></a>
<a href="#" class="social-btn sb-tumblr"><i class="fa fa-tumblr"></i></a>
<a href="#" class="social-btn sb-twitch"><i class="fa fa-twitch"></i></a>
<a href="#" class="social-btn sb-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="social-btn sb-vimeo"><i class="fa fa-vimeo-square"></i></a>
<a href="#" class="social-btn sb-vine"><i class="fa fa-vine"></i></a>
<a href="#" class="social-btn sb-vk"><i class="fa fa-vk"></i></a>
<a href="#" class="social-btn sb-wechat"><i class="fa fa-wechat"></i></a>
<a href="#" class="social-btn sb-wordpress"><i class="fa fa-wordpress"></i></a>
<a href="#" class="social-btn sb-xing"><i class="fa fa-xing"></i></a>
<a href="#" class="social-btn sb-yahoo"><i class="fa fa-yahoo"></i></a>
<a href="#" class="social-btn sb-yelp"><i class="fa fa-yelp"></i></a>
<a href="#" class="social-btn sb-youtube"><i class="fa fa-youtube"></i></a>
<a href="#" class="social-btn sb-email"><i class="fa fa-envelope"></i></a>
Like with normal buttons you can set different social button sizes via modifier classes .sb-sm and .sb-lg.
<a href="#" class="social-btn sb-twitter sb-sm"><i class="fa fa-twitter"></i></a>
<a href="#" class="social-btn sb-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="social-btn sb-twitter sb-lg"><i class="fa fa-twitter"></i></a>
Nowadays it is quite popular to present content using grid layouts. Tile is created especially for this purpose. You can wrap your blog posts, shop items in tiles. Tiles take less space and look nicely on the page.
Tiles are 100% width by default and limited by parent container width as well as by max-width set to 460px which you can easily change. The best way to use tiles is to put them inside Bootstrap columns and control their width using predefined classes like .col-md-6.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
<div class="row">
<!-- Constraining column -->
<div class="col-sm-6">
<!-- Tile -->
<div class="tile">
<div class="thumb">
<div class="action">
<a href="#" class="btn-outlined btn-light icon-right">View More <i class="fa fa-caret-right"></i></a>
</div>
<img src="img/thumb2.png" alt="Thumbnail">
</div>
<div class="caption">
<h4>Tile Label</h4>
<p> ... </p>
</div>
</div>
</div>
...
</div>
Bordered version is for the cases when image has white backgrounds. To turn to bordered version you simply need to add .bordered class to .tile element.
If you use subscription payment system to sell your products or services than pricing plans is the best way to inform user about it.
Pricing plans are 100% width by default and limited by parent container width as well as by max-width set to 460px which you can easily change. The best way to use pricing plans is to put them inside Bootstrap columns and control their width using predefined classes like .col-md-6.
<div class="row">
<!-- Constraining column -->
<div class="col-sm-6">
<!-- Pricing Plan -->
<div class="pricing-plan">
<div class="pp-heading">
<h3 class="pp-title">Free Plan </h3>
<div class="pp-price">Free</div>
</div>
<div class="pp-body">
<ul>
<li>5GB of space </li>
<li>1 account </li>
<li>limited support</li>
</ul>
<a href="#" class="btn btn-default">Sign Up </a>
</div>
</div>
</div>
...
</div>
<!-- Pricing Plan -->
<div class="pricing-plan">
<div class="pp-heading">
<div class="pp-icon"><i class="fa fa-file-text-o"></i></div>
<h3 class="pp-title">Free Plan </h3>
<div class="pp-price">Free</div>
</div>
<div class="pp-body">
<ul>
<li>5GB of space </li>
<li>1 account </li>
<li>limited support</li>
</ul>
<a href="#" class="btn btn-default">Sign Up </a>
</div>
</div>
Besides colors in the example above which are default (no extra class) and primary with .pricing-plan-primary class there are 4 other color classes: .pricing-plan-success, .pricing-plan-info, .pricing-plan-warning and .pricing-plan-danger.
<!-- Pricing Plan Success -->
<div class="pricing-plan pricing-plan-success">
...
</div>
<!-- Pricing Plan Info -->
<div class="pricing-plan pricing-plan-info">
...
</div>
<!-- Pricing Plan Warning -->
<div class="pricing-plan pricing-plan-warning">
...
</div>
<!-- Pricing Plan Danger -->
<div class="pricing-plan pricing-plan-danger">
...
</div>
Update your browser to view this website correctly. Update my browser now