Compose Multiplatform Material wrappers for androidx.compose.material and Compose HTML

Some simple unified Compose Multiplatform wrappers of common components, layouts, and Material Design components for androidx.compose.material (officially supported on Android, desktop (JVM), iOS, web (Kotlin/Wasm)) and Compose HTML (mainly based on Kobweb Silk and KMDC)

We try to make the function types of the composable components follow those in androidx.compose.foundation and androidx.compose.material, meanwhile being compatible with the Compose HTML APIs. However, only subsets of the composables and composable arguments are supported due to the API differences, limitations of the Compose HTML composables this project depends on, and our limited effort.

Visual consistency across different platforms is not guaranteed.

This project is prototype and there is no documentation yet. Check out the demo project on how to use the components.

Supported features

Components

Common (Foundation) components

• BasicText

ext components

• InlineBasicText

Layouts

• Box
• Column (via flexbox on web)
• Row (via flexbox on web)

Material components

• Button
• Card
• Icon
• IconButton
• ScrollableList/LazyColumn (visually inconsistent for now)
• Text/MaterialText
• TextField
• TopAppBarScaffold

Components in the ext packages

The components in the ext packages don't follow the androidx.compose APIs exactly, but rather provide wrappers are idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the androidx.compose APIs.

Styles (obsolete in the legacy module, for removal)

The ModifierOrAttrsScope.styles function and the StyleScope class provide a universal interface for Modifiers and CSS styles.

The functions in StyleScope:

• height
• margin
• width
• backgroundColor
• platformBorder
• outerBorder

Modifiers

• size modifiers
  • size, sizeIn, fillMaxSize
  • width, widthIn, fillMaxWidth
  • height, heightIn, fillMaxHeight
• padding
• background
• border (visually inconsistent)

ext modifiers

• outerBorder
• roundedCornerBackgroundAndOuterBorder

Add the libraries to your dependency

Maven coordinate:

"com.huanshankeji:compose-multiplatform-$module:$version"

View all the artifacts on Maven Central.

This project depends on Kobweb which is not published to Maven Central yet, so you have to add the following Maven repository:

repositories {
    maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
}

About Kobweb Silk

The Kotlin/JS (Compose HTML) portion of this project depends on Kobweb Compose of Kobweb Silk which is a UI layer built upon Compose HTML that provides Modifier APIs (type-safe CSS API wrappers) and layouts. Here is a list of topics in their README.md that should be helpful when you use this library in Compose HTML:

1. Silk
   1. Modifier
      1. attrsModifier and styleModifier
2. General purpose improvements on top of Compose HTML and Kotlin/JS
3. What about Compose Multiplatform for Web?