hamza1311 / material-yew

Yew wrapper for Material Web Components

Material Yew

Material Yew is a components library for Yew framework which is a wrapper around Material Web Components exposing Yew components. All modern browsers are supported.

Example

use material_yew::Button;
use yew::html;

html! {
    <Button label="Click me!" />
};

Getting started

Installation

Cargo.toml:

[dependencies]
material-yew = "*"

Material icons and a Material font can also be imported for full functionality.
index.html:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

It's also important to note that you need viewport meta tag for the Material Components to be responsive.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Documentation

Full API documentation can be found here.

Contributing

1. Fork it (https://github.com/hamza1311/material-yew)
2. Create your feature branch (git checkout -b your-feature-branch)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin your-feature-branch)
5. Create a new Pull Request

material-yew's Issues

Can't type in textarea or textfield unless max_length is specified.

I tried to type something in textfields in the demo page and find that I can't type in anything unless max_length is specified. I also tried that on textareas and the same thing happened. After browsing the code, I find that it is because maxLength is always specified in mwc-textarea/mwc-textfield even max_length is not specified for MatTextArea/MatTextField and as a result, maxLength becomes 0 and I can't type in anything.
This may be fixed by make max_length in TextAreaProps/TextFieldProps be Option<u64> and use maxLength=self.props.max_length.map(|v| Cow::from(v.to_string())) in view(), but old codes that use a &str to specify max_length have to be modified to be compilable, so I'm not sure if it is a good way to fix it.

cant use MatButton ?

I want to do what is stated in the README, render MatButton

src/main.rs

use yew::prelude::*;
use yew::html;
use material_yew::MatButton;

#[function_component]
fn HelloWorld() -> Html {
    html! {<MatButton label="Click me!" />}
}

#[function_component(App)]
fn app() -> Html {
    html! {
        <>
        <h1>{ "Hello World" }</h1>
        <HelloWorld />
        </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Cargo.toml

[dependencies]
yew = { version = "0.20", features = ["csr"] }
material-yew = { version = "0.1.0", features = ["full"] }

But I get the following error. How can I fix it? I'm new to yew and don't know if this is a bug, I'm asking in QA.
Thanks in advance

error[E0277]: the trait bound `MatButton: yew::Component` is not satisfied
 --> src/main.rs:7:13
  |
7 |     html! {<MatButton label="Click me!" />}
  |             ^^^^^^^^^ the trait `yew::Component` is not implemented for `MatButton`
  |
  = help: the trait `yew::Component` is implemented for `ContextProvider<T>`
  = note: required for `MatButton` to implement `yew::BaseComponent`
  = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)

Hello world not working with latest yew (0.19.3) and latest material-yew (0.2.0)

Tried to add material-yew's use declarations to my app. Tried both of these because both versions appear in the docs:

use material_yew::MatButton;
and
use material_yew::button::MatButton;

But both of them give a similar error:

error[E0432]: unresolved import material_yew::MatButton

My Cargo.toml looks like this:

[package]
name = "test_app"
version = "0.1.0"
edition = "2021"

[dependencies]
yew = "0.19.3"
material-yew = "0.2.0"

I'm using trunk serve to run the app.

Is this crate abandoned?

#24 has been sitting open untouched since March.

#19 is an issue that should at least be addressed in part ASAP.

I understand that this is a work-in-progress, but how can you have a component library where the Button component doesn't even accept onclick events?

I would submit a PR for it but #24 doesn't give me much hope that mine would be addressed.

Provide a statically typed API for specifying icons

There should be an Icon enum which defines all the possible icons. It should be generated in the build script so it's always up-to-date. Similar to how the IconName enum is generated in build.rs of yewprint

Missing click handlers

Hi, thanks for the interesting library.

Not sure if I'm misunderstanding this library, but I tried it out with the MatButton component, but couldn't figure out how to add a click handler to the button. It looks like generic event handling isn't implemented?

MatSelect relies on mod text_inputs

The MatSelect component references the text_inputs module but the text_inputs module is not enabled when using the feature flag of select.

Support a published version of yew and publish to crates.io

Thank you for creating this wonderful library!

Currently, yew-material relies on importing an unpublished version of yew from github as well as using a unpubllished version of yew-material from github. For enabling this library to be used I'd like to have both

• yew-material published on crates.io
• yew-material relying on a (specific) yew version which is published on crates.io

Drawer's open property doesn't seem to do anything

<MatDrawer open={false}>
  <div>
      <p>{"Drawer Content!"}</p>
  </div>
</MatDrawer>

Renders the drawer.

FYI: Up and coming Yew version will introduce breaking changes

The next version of Yew will be introducing the BaseComponent, which will function to replace the existing Component trait. Consequently, existing components will not be able to be used in html! { ... }.

This can be demonstrated by using yew = { git = "https://github.com/yewstack/yew.git", features = ["csr"] } and trying

html! {
    <MatButton label="My Button" />
}

Docs for the new version: https://api.yew.rs/next/yew/prelude/trait.BaseComponent.html

p.s. This component library is exactly what I'm looking for! Thanks for building it!

MatIconButtonToggle doesn't fire onchange event

Unless I'm very confused about how it should work, it doesn't work in the examples website. The icon image changes, but it always reads state:false.

I think this was working for me before the last update.

Name conflict with yew-material

See https://github.com/alibaba-inc/yew-material .

Provide cleaner API for `anchor` prop of Menu

Menu's anchor prop take has signature of anchor: Option<web_sys::HtmlElement>. It's clunky and difficult to use. For example, need to have HtmlElement of the element which isn't possible to obtain in view before returning. The only method of setting it right now that I know of is by using WeakComponentLink::<MatMenu>::set_anchor in after the component is rendered. We need to provide a more elegant API for this.

Provide support for Material "Layout Grid"

Creating a layout with bare HTML is painful and slow.

Objective: Provide support for Material "Layout Grid". ( mdc-layout-grid / mdc-layout-grid__inner / mdc-layout-grid__cell ) and associated attributes.

How to migrate from yew 0.18 to 0.19

I'm using material-yew with yew 0.18, and i want to move to yew 0.19

which would be the way to migrate with material-yew to yew 0.19?

Cannot bind events to buttons?

As far as i could gather, there is no way to bind a callback directly to any component as none are defined in the respective *Props.
This especially makes elements like MatButton pretty useless - i had to wrap it in a div and listen to events in that div.
Am i misunderstanding something or is this actually a missing feature?

Is it working at all?

Hello. Am I do something wrong or it doesn't work? Even example isn't working!

use yew::prelude::*;
use material_yew::MatButton;
use yew::html;

#[function_component(App)]
fn app() -> Html {
    html! {
        <>
         { "Hello World" }
         <MatButton label="Click me!" />
        </>
    }
}

fn main() {
   yew::Renderer::<App>::new().render();
}

Giving me error:

<MatButton label="Click me!" />
   |              ^^^^^^^^^ the trait `yew::Component` is not implemented for `MatButton`

Stale event listener when using MatTopAppBarFixed in a function component

Great work putting together this library. I found it informative both in understanding yew, and also as a useful reference for using material with yew.

I'm using MatDrawer and MatTopAppBarFixed in a way similar to the website source except as a function component. I was running into a problem with the the onnavigationiconclick callback. I'm using the callback to update a bool state created via the use_state_eq hook to track the drawer visibility. I found that the older bool state was being used when the callback was called.

After digging into this further, it seemed like the nav_listener in the MatTopAppBarFixed Component trait implementation could be stale if the onnavigationiconclick property changed.

Assuming, this is a bug and not a user error, below is the commit which fixed this . If you're interested, I can create a PR. Thanks!

ncpenke@b086652

No `MatButton` in the root

I have add material-yew as dependencies in my Cargo.toml:

[dependencies]
yew = "0.18.0"
wasm-bindgen = "0.2.67"
material-yew = "0.1.0"
yew-router = "0.15.0"

And then I'm use the MatButton from material-yew in my rust file

use material_yew::MatButton;

but I get the following error

unresolved import `material_yew::MatButton`

no `MatButton` in the rootrustc(E0432)

Am I missing something?

I don't understand how to receive the value of a Slider

I'm very much a novice when it comes to web development, so maybe this is supposed to be self-evident, but I don't understand how to receive the value of a MatSlider when it changes. The slider demo doesn't exercise this functionality at all. I was reading through the source and I can see how the JavaScript event is marshalled into a CustomEvent holding an InputEvent. However I can't figure out to access the current value of the slider from within the update method. The CustomEvent::detail method returns a JsValue which should be an InputEvent. I figured out how to cast that. But I expected the InputEvent::detail to contain an integer, but it's always zero. Or maybe InputEvent::data, except that's always None. Maybe the cast didn't really work an I'm just getting Default::default()?

I'm probably missing something important because I feel like I shouldn't be diving into web_sys just to get the current value of a slider.

A quick illustration would clarify a lot. Thanks.

Doc states wrong github repo name 'material-yew-components'

material-yew-components = { git = "https://github.com/hamza1311/material-yew-components/", branch = "master", features = ["full"] }

Does not work whereas this works:

yew-material = { git = "https://github.com/hamza1311/yew-material/", branch = "master", features = ["full"] }

How to use these components if event handlers are not implemented?

Hi

Could someone put an example of how to use these components with events? e.g.

 <MatTextField label="Search" value={(*search_query).clone()} >

As the user types I want to take the value from the text input and write into an H1 element below the text field

with a regular input field I would do like this - could someone put an example using this MatTextField componet?

 let search_query = use_state(String::new);

 let oninput = {
        let sq = search_query.clone();
        Callback::from(move |e: InputEvent| {
            let input: HtmlInputElement = e.target_unchecked_into();
            sq.set(input.value());
        })
    };

 yew::html! {
 <div>
   <input type="text" value={(*search_query).clone()} placeholder="Search" {oninput}/>
<h1>{ &*search_query }</h1>
</div>
 }

Any help appreciated

Feature proposal: Allow providing CSS classes for all components

Currently, the only way to add custom styles to a component is to use CSS selectors, which are either too broad (eg. using mwc-textfield will get all textfields) or require wrapping with an element annotated with a custom class (eg. using the rule .foo-class > mwc-textfield). This makes material-yew difficult to use with frameworks such as tailwindcss.com.

I propose a solution as follows: add a class property to all existing components. This would look similar to the following:

...
#[prop_or_default]
pub classes: Cow<'static, str>,
...

It would only be passed straight through to the underlying MWC component, so ideally each material-yew component would only have three lines of additions.

I'd be grateful to hear your thoughts on this - I'm happy to contribute such a change via a PR if you deem it to be suitable.