kjsuikit/README.md

42 lines
1.4 KiB
Markdown
Raw Permalink Normal View History

2021-12-22 08:38:12 +00:00
# JSUIKit Kotlin
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
Hello :) This library is a wrapper for JavaScript/CSS [UIKit](https://getuikit.com) framework. It uses the same
structure as in [UIKit Docs](https://getuikit.com/docs/introduction) and in most cases you may use it.
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
The main target of this wrapper is a [JetBrains Compose JS](https://github.com/JetBrains/compose-jb) and will be useful
for you in case you are using it too.
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
## How to include
2021-12-22 07:51:17 +00:00
2022-01-14 17:32:06 +00:00
Last version: [![Maven Central](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit/badge.svg)](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit)
2021-12-22 07:51:17 +00:00
```groovy
2022-01-14 17:32:06 +00:00
implementation "dev.inmo:kjsuikit:$kjsuikit_version"
2021-12-22 07:51:17 +00:00
```
2021-12-22 08:38:12 +00:00
**THIS LIBRARY DO NOT ADD ANY JS OR CSS**. So, you must download and include UIKit js/css by yourself. See
[UIKit installation instructions](https://getuikit.com/docs/installation)
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
## How to use
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
In this library there are two main entities:
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
* Builder functions - buttons, spinners, icons, grids, etc.
* Modifiers - `UIKitAlign`, `UIKitAnimation`, etc.
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
For example, if you want to add table in your html, you will use next code:
2021-12-22 07:51:17 +00:00
2021-12-22 08:38:12 +00:00
```kotlin
DefaultTable(
listOf("Heading 1", "Heading 2", "Heading 3"),
data, // SnapshotStateList<T>
UIKitTable.Divider // modifier, add dividers
) { i, item -> // i - number of heading, item - item from data; composable callback
when (i) {
0 -> Text(item.toString())
1 -> Text("data 2")
2 -> Text("data 3")
2021-12-22 07:51:17 +00:00
}
}
```