bulma-kotlin
is a Kotlin JS library that creates and controls Bulma elements.
It's developed and used at Centyllion (Twitter).
Notes:
- The project is in its early days it needs maturing. The API is subject to changes especially the package name which is now just
bulma
. - There is almost no documentation yet.
- Some elements depends on Bulma extensions like Toasts and Sliders, it needs to be sorted out
Bulma is a CSS only library that allows you to build beautiful websites.
bulma-kotlin
is a Kotlin library for the browser that helps you build web-apps using Bulma with all elements available as classes.
To create an icon just create an bulma.Icon
and add it to the DOM, then you can change it's properties that are applied.
// creates the icon
val icon = Icon('plus')
// adds it to the DOM
document.body.appendChild(icon.root)
// the change in style is automatically applied
icon.rounded = true
bulma-kotlin
allows you to add simple callback on elements like buttons, inputs, etc..
Since Bulma elements can be stacked, it's easy to build complex components.
It also provides controllers that links data and Bulma elements.
Especially a special MultipleController
that deals with lists.
The binaries for bulma-kotlin
are published in the GitHub packages. It requires the new IR
format, (LEGACY
isn't supported).
To be able to download them from your gradle, you'll need a Github Token (see GitHub's instructions). Store your user and token in $HOME/.gradle/gradle.properties
file named gprUser
and gprToken
.
gprUser=me
gptToken=AAAAAAAAA
Then configure your project (with gradle Kotlin DSL) to use the repository and include the dependency.
val grpUser: String by project
val grpToken: String by project
repositories {
maven {
url = uri("https://maven.pkg.github.com/centyllion/bulma-kotlin")
credentials {
username = grpUser
password = grpToken
}
}
// needed for the transitive dependency `kotlinx-html`
maven {
url = uri("https://maven.pkg.jetbrains.space/public/p/kotlinx-html/maven")
}
}
...
dependencies {
implementation("com.centyllion:bulma-kotlin:0.4.2")
}
Other solution can be applied, this one is just one example.
The Bulma CSS library isn't added by bulma-kotlin
, a version must be available (Getting started with Bulma)
and explicit to allow further extensions to be added.
bulma-kotlin
relies a lot on delegated properties to handle Bulma element properties.
It helps to keep the code clear.
The delegated classes can be found in utils.kt.
Implementing a new property is one liner:
// adds a property to handle the class `is-rounded` in the button
var rounded by className(rounded, "is-rounded", root)
This method also apply to multiple children of an element. Here is the complete code for a Box:
/** [Box](https://bulma.io/documentation/elements/box) element. */
class Box(vararg body: BulmaElement) : BulmaElement {
override val root: HTMLElement = document.create.div("box")
var body by bulmaList(body.toList(), root)
}
When the value of multiple elements has changed a simple diff algorithm is applied to update the DOM.
- Adapts to IR
bulma.extension.ToastAnimation
andbulma.extension.ToastOptions
are now interface. UseBasicToastAnimation
orBasicToastOptions
.
- Retrieve missing Slider component
- Migration to GitHub package repository
- Uses Kotlin 1.5.0
- Adds the support for thr badge extension.
- Adds a utility function to add a BulmaElement into another.
- Adds Spacing enum class
- Adds size support for Label
- Correct Panel title change
- Correct Card header icon class
- Correct Select initial selection
- Adds support for multiple select (API change on the listener to a list of Option).
- Adds support for column offsets.
PanelTabsItem.onClick
can now be modified after creation.Delete.onClick
can now be modified after creation.
- Adds Buttons list
- Adds
is-light
for tags.
- Adds support for Bulma
0.8.0
:- Support of
is-light
for buttons. - Support of colors for panels.
- Support of
- Corrects NavBar bug with end placement.
- Adds log when applying diff
- Better constructor for ProgressBar
- Support for input type
- Adds Radio button element
- Adds @JsModule imports for bulmaToast
- Adds Table element
- Adds variable gap for Columns
- Adds support for
is-circle
on Slider - Moves slider to extension
- Moves toast to extension
- Adds support for Switch extension
- Removes reference to InputEvent which isn't supported by Edge.
- Bug fix disable Select element.
- Adds TagDelete element (source).
- Adds size and add-ons for Tags (source).
- Adds support for Delete inside a Tag.
- Bug fix Left and right icons for Control element.
First import with most of the elements and options with Bulma version 0.7.5
.
The known missing elements are:
- Tables
- Radio groups