JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div>
<div id="htmlEditor"></div>
<div style="position:absolute; left:300px; top:90px; z-index:1; visibility:hidden">
<div id="radialMenu"></div>
</div>
</div>
JavaScript
$(function () {
function setFontSize(_size) {
if (_size == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontsize", _size);
}
function setFontFamily(_font) {
if (_font == null) return;
$("#htmlEditor").igHtmlEditor("executeAction", "fontname", _font);
}
// create the html editor
$("#htmlEditor").igHtmlEditor({
width: "98%",
height: "450px"
});
$("#htmlEditor").igHtmlEditor("setContent", "The Radial Menu control is essentially a context menu presenting its items in a circular arrangement around a center button. The circular arrangement of the items speeds up items selection, because each item is equally positioned in relation to the center. The Radial Menu supports different item types for choosing numerical values, color values or performs actions. Sub-Items are also supported.<br/>By default the only visible part of the Radial Menu is the center button. When the user click on the center button, the Radial Menu opens and shows the root level menu items. Clicking on the center button when the root level items are shown closes the Radial Menu. To navigate Sub-Items the user should click the arrows in the outer ring and the corresponding sub-items group will be displayed. Clicking on the center button when a sub-items group is shown will display the items on the previous level.", "html");
// create the radial menu
$("#radialMenu").igRadialMenu({
width: "300px",
height: "300px",
minWedgeCount: 1,
items:
[
{
type: "numericitem",
header: "Font Size",
iconUri: "https://igniteui.com/images/samples/radial-menu/Size.png",
value: "8",
...