Is there a way to use custom bootstrap components in KVision such as <https://www.npmjs.com/package/...

# kvision

[Big Chungus]

Is there a way to use custom bootstrap components in KVision such as https://www.npmjs.com/package/bootstrap4-toggle#initialize-with-code?

[Robert Jaros]

It's quite easy.
Add dependency to Gradle:

implementation(npm("bootstrap4-toggle"))

Use the component:

class App : Application() {
    init {
        require("bootstrap4-toggle/css/bootstrap4-toggle.min.css")
        require("bootstrap4-toggle")
    }

    override fun start() {
        root("kvapp") {
            val toggle = checkBoxInput {
                setAttribute("data-toggle", "toggle")
            }
            button("Get value").onClick {
                console.log(toggle.getElementJQuery()?.prop("checked"))
            }
        }
    }
}

[Robert Jaros]

There are some issues with event handling, but it's specific to this component I think.

[Robert Jaros]

You can also create your own class and initialize the component with code inside the afterInsert method:

class Toggle : CheckBoxInput() {
    override fun afterInsert(node: VNode) {
        getElementJQueryD().bootstrapToggle(obj {
            on = "Enabled"
            off = "Disabled"
        })
    }
}

class App : Application() {
    init {
        require("bootstrap4-toggle/css/bootstrap4-toggle.min.css")
        require("bootstrap4-toggle")
    }

    override fun start() {
        root("kvapp") {
            val toggle = Toggle()
            add(toggle)
            button("Get value").onClick {
                console.log(toggle.getElementJQuery()?.prop("checked"))
            }
        }
    }
}

[Big Chungus]

Thanks, that helps a lot

[Big Chungus]

Mind if i raise pr to add this component to kvision once i polish all events?

[Robert Jaros]

Of course you can