Media WebUI

Radial Classes

The following table describes the classes available in WebUI for radial controls.

Class
Description
radial
Defines a container for the radial control.
radial-content
Defines the content area for radial items.
radial-item
Specifies that an element should be included in the radial item collection.
radial-activator
Specifies the element that will toggle the radial transition.

Radial Settings

The following table describes the javascript settings available in WebUI for radial controls.

Setting
Description
mode
Defines the arc of a circle to be used by radial items.
Can be set to "full", "top", or "bottom". Default: full.
Setting the mode to "full" will create a full circle radial item spread. If set to "top", the spread will form an arc around the top half of the radial area. If set to "bottom", then the arc will cover the bottom half only.
zoom
The zoom number and will change the spread area in relation to the size of the radial container element.
responsive
Specifies that the radial control width will adjust with the width of its parent element.
Can be true or false. Default: true.
transitionDuration
A value in milliseconds specifying the fade in and expand/shrink animation duration.

Radials

Full Circle Radial

Example
Markup
<div class="radial width-full height-xl" id="radialFull">        
  <div class="radial-content">
    <a href="#" class="radial-item link-button link-button-lg fa fa-home fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-facebook fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-twitter fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-linkedin fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-github fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-rss fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-pinterest fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-asterisk fa-lg"></a>
  </div>
                                
  <a href="#" class="link-button place-middle-center fa fa-bars fa-lg radial-activator"></a>
</div>
Script
webui.ready(function() {

  ui("#radialFull").radialControl({
    zoom: 0.75,
    mode: "full",
    responsive: true,
    transitionDuration: 500
  });

});

Top Arc Radial

Example
Markup
<div class="radial width-full height-xl" id="radialTop">        
  <div class="radial-content">
    <a href="#" class="radial-item link-button link-button-lg fa fa-home fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-facebook fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-twitter fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-linkedin fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-github fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-rss fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-pinterest fa-lg"></a>
    <a href="#" class="radial-item link-button link-button-lg fa fa-asterisk fa-lg"></a>
  </div>
                                
  <a href="#" class="link-button place-middle-center fa fa-bars fa-lg radial-activator"></a>
</div>
Script
webui.ready(function() {

  ui("#radialTop").radialControl({
    zoom: 0.75,
    mode: "top",
    responsive: true,
    transitionDuration: 500
  });

});