Some Material components for Compose for Web, based on Material Web (with Web Components) (or material-web, or mwc
) (preferred) and Material Components for the web (or material-components-web, or mdc
) (fallback)
This project is in prototype and the components are not complete. More components will be added. It will probably go through huge refactors and API changes, too.
This project is not currently under active development. Here is a list of reasons and alternatives:
- The material-web team is working on Material You (Material Design 3) support and the Material 2 branch (
mwc
) is no longer under active development. Existing Compose wrappers of their Material 2 components are still kept in the:compose-web-material
subproject but not updated. - KMDC wrapping around material-components-web (
mdc
) provides a much more complete set of Material Design components for Compose for Web. - We are currently focusing more on compose-multiplatform-material to provide multiplatform Compose Material wrappers, whose web portion depends on KMDC and the
:compose-web-common
subproject, which may be occasionally updated for the dependent project.
Some configurations are needed to use this library due to the immaturities of this project and Kotlin/JS.
implementation("com.huanshankeji:compose-web-material:$version")
Call mwcRequires()
in your main
function before calling any component Composable functions.
If you use this library in an app project with Webpack which Kotlin/JS currently uses, you might want to configure it as recommended by Material Web and Material Components for the web. Some instructions on how to do this simply are as below.
This plugin helps add the dependency to this project (if you do this you can skip the "Add the dependency" step above) and the devNpm
dependencies:
plugins {
id("com.huanshankeji.compose-web-material-conventions") version someVersion
}
However, the plugin doesn't make further adjustments to the webpack configuration, so you also need to refer to the demo further adjustments and the demo HTML page to add your own. Just copy and possibly adapt them as you like.