Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jordi-star/leptos-material
Leptos component wrapper for Material Web Components
https://github.com/jordi-star/leptos-material
Last synced: 23 days ago
JSON representation
Leptos component wrapper for Material Web Components
- Host: GitHub
- URL: https://github.com/jordi-star/leptos-material
- Owner: jordi-star
- License: mit
- Created: 2024-08-19T05:25:27.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T00:17:30.000Z (5 months ago)
- Last Synced: 2024-12-01T08:14:02.280Z (about 1 month ago)
- Language: Rust
- Size: 51.8 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-leptos - leptos-material - web.dev/), along with some extra components to fill in the gaps. (Components / Unofficial)
README
# leptos-material
leptos-material is a Leptos component wrapper for [Material Web Components](https://material-web.dev/) (MWC), along with some extra components to fill in the gaps.
This library aims to stay close to the original MWC component specs, meaning you should be able to use everything
as specified in their [docs](https://material-web.dev/).
leptos-material also implements some components not yet implemented in MWC, such as Cards and Date Pickers.
Many components have a wide variety of attributes supported. For brevity, leptos-material does not completely expose all attributes,
instead, many components use `attr:attribute_name=value` syntax in the `view` macro to add attributes. For example:
```html
```
## Installing
To install `leptos-material`, run the following command from your project directory:
```
cargo add leptos-material
```
Or, to use the latest repository updates in your project, add
```
leptos-material = { git = "https://github.com/jordi-star/leptos-material" }
```
to your Cargo.toml
## Using
Use the `UseMaterialWebComponents` component at the root of your main component to initialize MWC.
For example, if you have a main component named `App`, your code will look like this:
```rust
#[component]
fn App() -> impl IntoView {
view! {
... // The rest of your site
}
}
```
Then, enable the features for any components you'd like to use.
For example, to use the `Icon` component, you'd enable the `icon` feature.
Finally, you can use the component in your code.
```rust
#[component]
fn App() -> impl IntoView {
view! {
{"Hello from leptos-material!"}
}
}
```
## Features
Every component is gated behind a feature. This library will bundle any needed MWC components into a single JS file for use with `UseMaterialWebComponents`. By default, leptos-material uses the `full` feature, which will include all MWC components.
To reduce compile time and save webpage load time, [disable default-features](https://doc.rust-lang.org/cargo/reference/features.html#dependency-features) and only add features related to the components you need.
## `nightly` Note
This library does not use `nightly` Rust to allow this library to work in projects that are using the stable Rust toolchain.
Using Leptos with `nightly` Rust allows function-call syntax for Signals, instead of using `.get()` and `.set()`. This functionality is not essential to this library, so leptos-material will stick to stable Rust for the foreseeable future.
## Work in progress
This library is a work in progress, and does not currently implement *all* MWC components.
Here's a list of all currently implemented feature-flags:
* checkbox
* textfield
* button
* icon
* iconbutton
* card
* elevation
* progress
* datepicker
* select
* chips