Radials
Radial Navigation (Half circle - top)
The following example uses the createHeptagonShape() function to create the radial-item shape.
<div class="radial width-xl height-xl" id="radial1">
<div class="radial-content">
<a href="#" class="radial-item width-sm-md height-sm-md background-success">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFF" viewBox="0 0 24 24" width="16" height="16"><path d="M15,24H9V20.487a9,9,0,0,1-2.849-1.646L3.107,20.6l-3-5.2L3.15,13.645a9.1,9.1,0,0,1,0-3.29L.107,8.6l3-5.2L6.151,5.159A9,9,0,0,1,9,3.513V0h6V3.513a9,9,0,0,1,2.849,1.646L20.893,3.4l3,5.2L20.85,10.355a9.1,9.1,0,0,1,0,3.29L23.893,15.4l-3,5.2-3.044-1.758A9,9,0,0,1,15,20.487Zm-4-2h2V18.973l.751-.194A6.984,6.984,0,0,0,16.994,16.9l.543-.553,2.623,1.515,1-1.732-2.62-1.513.206-.746a7.048,7.048,0,0,0,0-3.75l-.206-.746,2.62-1.513-1-1.732L17.537,7.649,16.994,7.1a6.984,6.984,0,0,0-3.243-1.875L13,5.027V2H11V5.027l-.751.194A6.984,6.984,0,0,0,7.006,7.1l-.543.553L3.84,6.134l-1,1.732L5.46,9.379l-.206.746a7.048,7.048,0,0,0,0,3.75l.206.746L2.84,16.134l1,1.732,2.623-1.515.543.553a6.984,6.984,0,0,0,3.243,1.875l.751.194Zm1-6a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"/></svg>
</a>
<a href="#" class="radial-item width-sm-md height-sm-md background-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFFFFF" viewBox="0 0 24 24" width="16" height="16"><g id="_01_align_center" data-name="01 align center"><path d="M24,3H4.242L4.2,2.649A3,3,0,0,0,1.222,0H0V2H1.222a1,1,0,0,1,.993.883L3.8,16.351A3,3,0,0,0,6.778,19H20V17H6.778a1,1,0,0,1-.993-.884L5.654,15H21.836ZM20.164,13H5.419L4.478,5H21.607Z"/><circle cx="7" cy="22" r="2"/><circle cx="17" cy="22" r="2"/></g></svg>
</a>
<a href="#" class="radial-item width-sm height-sm background-accent-1">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFFFFF" viewBox="0 0 24 24" width="16" height="16"><g id="_01_align_center" data-name="01 align center"><path d="M21,2H18V0H16V2H8V0H6V2H3A3,3,0,0,0,0,5V24H24V5A3,3,0,0,0,21,2ZM2,5A1,1,0,0,1,3,4H21a1,1,0,0,1,1,1V8H2ZM2,22V10H22V22Z"/><rect x="15" y="13" width="2" height="2"/><rect x="11" y="13" width="2" height="2"/><rect x="7" y="13" width="2" height="2"/><rect x="15" y="17" width="2" height="2"/><rect x="11" y="17" width="2" height="2"/><rect x="7" y="17" width="2" height="2"/></g></svg>
</a>
<a href="#" class="radial-item width-sm height-sm background-dark">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFFFFF" viewBox="0 0 24 24" width="16" height="16"><path d="M23.259,16.2l-2.6-9.371A9.321,9.321,0,0,0,2.576,7.3L.565,16.35A3,3,0,0,0,3.493,20H7.1a5,5,0,0,0,9.8,0h3.47a3,3,0,0,0,2.89-3.8ZM12,22a3,3,0,0,1-2.816-2h5.632A3,3,0,0,1,12,22Zm9.165-4.395a.993.993,0,0,1-.8.395H3.493a1,1,0,0,1-.976-1.217l2.011-9.05a7.321,7.321,0,0,1,14.2-.372l2.6,9.371A.993.993,0,0,1,21.165,17.605Z"/></svg>
</a>
<a href="#" class="radial-item width-xs-sm height-xs-sm background-accent-3">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFFFFF" viewBox="0 0 24 24" width="14" height="14"><path d="m7.5 13a4.5 4.5 0 1 1 4.5-4.5 4.505 4.505 0 0 1 -4.5 4.5zm0-7a2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 0 0 -2.5-2.5zm7.5 14a5.006 5.006 0 0 0 -5-5h-5a5.006 5.006 0 0 0 -5 5v4h2v-4a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v4h2zm2.5-11a4.5 4.5 0 1 1 4.5-4.5 4.505 4.505 0 0 1 -4.5 4.5zm0-7a2.5 2.5 0 1 0 2.5 2.5 2.5 2.5 0 0 0 -2.5-2.5zm6.5 14a5.006 5.006 0 0 0 -5-5h-4v2h4a3 3 0 0 1 3 3v4h2z"/></svg>
</a>
<a href="#" class="radial-item width-xs-sm height-xs-sm background-info">
<svg xmlns="http://www.w3.org/2000/svg" class="place-middle-center" fill="#FFFFFF" viewBox="0 0 24 24" width="14" height="14"><path d="M13.338.833a2,2,0,0,0-2.676,0L0,10.429v10.4a3.2,3.2,0,0,0,3.2,3.2H20.8a3.2,3.2,0,0,0,3.2-3.2v-10.4ZM15,22.026H9V17a3,3,0,0,1,6,0Zm7-1.2a1.2,1.2,0,0,1-1.2,1.2H17V17A5,5,0,0,0,7,17v5.026H3.2a1.2,1.2,0,0,1-1.2-1.2V11.319l10-9,10,9Z"/></svg>
</a>
</div>
<div class="nav-button-lg radial-activator place-middle-center" id="toggleRadial1"></div>
</div>
HTML
webui.ready(function() {
ui("#radial1 .radial-item").createHeptagonShape();
ui("#radial1").radialControl({
zoomFactor: 0.75,
mode: "top",
responsive: false,
transitionDuration: 500
});
ui("#toggleRadial1").navButtonControl({
transitionDuration: 300,
backgroundColor: "transparent",
color: "currentColor"
});
ui("#toggleRadial1").click( function () {
ui(this).toggleClass("active");
});
});
JS
Radial navigation (Full circle)
The following example uses the createOctagonShape() function to create the radial-item shape.
<div class="radial width-xl height-xl" id="radial2">
<div class="radial-content">
<a href="#" class="radial-item width-sm-md height-sm-md background-success"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-info"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-warning"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-accent-1"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-accent-2"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-accent-3"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-accent-4"></a>
<a href="#" class="radial-item width-sm-md height-sm-md background-accent-5"></a>
</div>
<div class="nav-button-lg radial-activator place-middle-center" id="toggleRadial2"></div>
</div>
HTML
webui.ready(function() {
ui("#radial2 .radial-item").createOctagonShape();
ui("#radial2").radialControl({
zoomFactor: 0.75,
mode: "full",
responsive: false,
transitionDuration: 1000
});
ui("#toggleRadial2").navButtonControl({
transitionDuration: 300,
backgroundColor: "transparent",
color: "currentColor"
});
ui("#toggleRadial2").click( function () {
ui(this).toggleClass("active");
});
});
JS
Classes
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. |
Settings
Javascript settings available for the radial control.
| Setting | Description |
|---|---|
| zoomFactor | A positive decimal number that will change the spread area in relation to the size of the radial container element. |
| 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. |
| 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. |