Kompose wrappers for material-components-web
APACHE-2.0 License
The library is currently very experimental with no API stability guarantees. Breaking changes are being introduced each release.
A set of Kotlin wrappers over [email protected] library providing Jetbrains Compose DSL for building beautiful WEB UIs. The API surface is identical to JS version, except for few places where slight adjustments are made to make it more fluid for compose.
KMDC wraps each MDC module 1:1 and as such allows you to pick and choose which exact components you'd like to use. This is recommended approach as it helps in reducing bundle size. However, for the lazy ones out there, a "shortcut" module is also available, which brings in all KMDC modules as transitive dependencies under a single dependency.
Either approach can be installed by declaring relevant dependencies in your jsMain
sourceSet.
Additionally, you need to enable SCSS support.
plugins {
kotlin("multiplatform")
id("org.jetbrains.compose")
}
kotlin {
js {
browser {
commonWebpackConfig {
cssSupport { enabled.set(true) }
scssSupport { enabled.set(true) }
}
}
}
sourceSets {
named("jsMain") {
dependencies {
// Be lazy and use the shortcut
implementation("dev.petuska:kmdc:_")
implementation("dev.petuska:kmdcx:_")
// Do some work and see dem gains
implementation("dev.petuska:kmdc-button:_")
implementation("dev.petuska:kmdc-radio:_")
implementation("dev.petuska:kmdcx-icons:_")
}
}
}
}
Most of the API maps closely to MDC JS API, making all examples there semi-valid. KMDC components follow a specific
naming convention to make its components more discoverable as well. The convention
is MDC[UpperCamelCaseMDCComponentName]
(e.g. MDCTopAppBar
) for the top-level component
and UpperCamelCaseLogicalName
for all subcomponents. Most of the components also follow the same argument order
schema:
...requiredMdcOptions
- MDC-specific options with no default values...optionalMdcOptions
- MDC-specific options with default valuesattrs: (AttrsBuilder<out HTMLElement>.() -> Unit)? = null
- compose attributes builder for the underlying HTML elementcontent: (ComposableBuilder<out HTMLElement>.() -> Unit)? = null
- compose inner content builder for the underlying HTML elementHere's a quick peek how these things come together (more showcases can be found in the sandbox)
@Composable
fun Showcase() {
var checked by remember { mutableStateOf(false) } // Declaring controlled state
MDCFormField { // Using implicit `content` argument to wrap MDCCheckbox inside MDCFormField UI as recommended by the MDC docs
MDCCheckbox(
checked = checked,
label = "Yes/No",
attrs = { // Overriding underlying HTMLInput element attributes
onInput { checked = !checked }
}
) // MDCCheckbox doesn't allow for additional inner content
}
}
Here's a tracker list of currently completed material-components-web modules:
Other libraries and extensions:
KMDC project modules can be categorised into three groups:
./gradlew assemble
to build js binaries./sandbox/
to render components in browser (needs to be linked separately in IDEA)
./gradlew jsBrowserRun -t
to start development serverFurther details can be found in Contributing Guidelines
All contributions are welcome. Have a look for a good first issue in the issue tracker, or open your own issue if you have some ideas. If you want to chat, either start a discussion or ping me on slack.
Further details can be found in Contributing Guidelines
Thanks to all the people who contributed to kmdc so far!