public Element CreateElement() { var heading = new Heading("Draw"); var subtitle = new Paragraph("Click to draw a masterpiece"); var toolSel = new Select(); toolSel.AppendChild(new Option { Text = "Boxes", Value = "box" }); toolSel.AddOption("Circles", "circle"); var canvas = new Canvas { Width = 320, Height = 240, }; var context = canvas.GetContext2D(); canvas.Click += (s, e) => { var radius = 10; context.BeginPath(); if (toolSel.Value == "box") { context.Rect(e.OffsetX - radius, e.OffsetY - radius, 2 * radius, 2 * radius); } else { context.Arc(e.OffsetX, e.OffsetY, radius, 0, 2 * Math.PI, true); } context.Fill(); }; canvas.Style.Cursor = "pointer"; canvas.Style.BorderColor = "#CCC"; canvas.Style.BorderStyle = "solid"; canvas.Style.BorderWidth = "1px"; var clearbtn = new Button("Clear") { Type = ButtonType.Submit, ClassName = "btn btn-danger", }; clearbtn.Click += (s, e) => { context.ClearRect(0, 0, canvas.Width, canvas.Height); }; clearbtn.Style.Display = "block"; var app = new Div(); app.AppendChild(heading); app.AppendChild(subtitle); app.AppendChild(new Div(toolSel)); app.AppendChild(canvas); app.AppendChild(clearbtn); return(app); }
/// <summary> /// 1. IsMultiSelect == false && IsCompact == true => render as a drop down select element /// 2. IsMultiSelect == false && IsCompact == false => render as a list of radio buttons /// 3. IsMultiSelect == true => render as a list of toggle inputs /// </summary> protected static Element ChoiceSetRender(AdaptiveChoiceSetInput adaptiveChoiceSetInput, ElementAdaptiveRenderContext context) { if (!adaptiveChoiceSetInput.IsMultiSelect) { if (adaptiveChoiceSetInput.Style == AdaptiveChoiceInputStyle.Compact) { var uiSelectElement = new Select() .SetAttr("name", adaptiveChoiceSetInput.Id) .AddClass("ac-input") .AddClass("ac-multichoiceInput") .Style("width", "100%"); foreach (var choice in adaptiveChoiceSetInput.Choices) { var option = new Option() { Text = choice.Title } .SetAttr("value", choice.Value); if (choice.Value == adaptiveChoiceSetInput.Value) { option.SetAttr("selected", string.Empty); } uiSelectElement.AppendChild(option); } return(uiSelectElement); } else { return(ChoiceSetRenderInternal(adaptiveChoiceSetInput, context, "radio")); } } else { return(ChoiceSetRenderInternal(adaptiveChoiceSetInput, context, "checkbox")); } }