KVision
Primary version
Primary version
  • KVision Guide
  • Introduction
  • Migration
    • Migration from 8.x to 9.x
    • Migration from 7.x to 8.x
    • Migration from 6.x to 7.x
    • Migration from 5.x to 6.x
    • Migration from 4.x to 5.x
  • 1. Getting Started
    • Setting Up
    • Modules
    • Creating a New Application
    • Development Workflow
    • Hot Module Replacement
    • Debugging
    • Building For Production
  • 2. Frontend Development Guide
    • UI Structure
    • Root Container
    • Theming
    • Dark mode
    • Type safe CSS Properties
    • Basic Components
    • Icons and Images
    • Buttons and Toolbars
    • Layout Containers
    • Events
    • Working with State
    • DOM Bindings & Lifecycle Hooks
    • W3C, Snabdom, and KVision Elements
    • Forms
    • Form controls
    • Drag and drop
    • Internationalization
    • Adding custom tags (SVG example)
    • Custom components
  • 3. Optional UI Functionality (via modules)
    • Using Redux
    • Bootstrap
      • Navigation and menus
      • Tooltips and popovers
      • Modals, windows and toasts
    • Charts
    • Toasts
    • Tabulator Tables
    • Handlebars.js Templates
    • JS Routing with Navigo
    • jQuery Bindings
    • Using REST Services
  • 4. Integrating With Javascript Libraries
    • Integrating With React Components
  • 5. Fullstack Development Guide
    • Select Remote
    • Tom Select Remote
    • Tom Typeahead Remote
    • Tabulator Remote
  • FAQ
  • Useful References
Powered by GitBook
On this page
  1. 2. Frontend Development Guide

Adding custom tags (SVG example)

You may need to include HTML tags that aren't provided out of the box. For example, your app may need to draw SVG diagrams.

To support this, kvision provides the CustomTag class, illustrated by example as follows:

fun Div.svg(width: Int, height: Int, block: CustomTag.() -> Unit = {}) {
    customTag("svg") {
        setAttribute("width", "$width")
        setAttribute("height", "$height")
        block()
    }
}

fun CustomTag.line(x1: Int, y1: Int, x2: Int, y2: Int, stroke: Col, block: CustomTag.() -> Unit = {}) {
    customTag("line") {
        setAttribute("x1", "$x1")
        setAttribute("y1", "$y1")
        setAttribute("x2", "$x2")
        setAttribute("y2", "$y2")
        setAttribute("stroke", stroke.name)
        block()
    }
}

To use it, we can simply do:

       root("kvapp") {
            div {
                svg(500, 500) {
                    line(0, 0, 100, 100, Col.AQUA)
                    line(100, 100, 150, 150, Col.BLACK)
                }
            }
        }
PreviousInternationalizationNextCustom components

Last updated 26 days ago