cant work on material nav #3407

cn-kali-team · 2023-09-21T09:41:02Z

cn-kali-team
Sep 21, 2023

I am trying to use material when I copy the code to 'yew' in the example
https://getmdl.io/components/index.html#layout-section/layout

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link data-trunk rel="css" href="static/material.css">
    <script data-trunk src="static/material.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

</body>
</html>

nav

use yew::prelude::*;

pub struct Nav {
  expanded: bool,
}

impl Component for Nav {
  type Message = ();
  type Properties = ();

  fn create(ctx: &Context<Self>) -> Self {
    Self { expanded: true }
  }

  fn view(&self, ctx: &Context<Self>) -> Html {
    html! {
      <>
    <div class="mdl-layout mdl-js-layout">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <span class="mdl-layout-title">{"Title"}</span>
          <div class="mdl-layout-spacer"></div>
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">{"Link"}</a>
            <a class="mdl-navigation__link" href="">{"Link"}</a>
            <a class="mdl-navigation__link" href="">{"Link"}</a>
            <a class="mdl-navigation__link" href="">{"Link"}</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">{"Title"}</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">{"Link"}</a>
          <a class="mdl-navigation__link" href="">{"Link"}</a>
          <a class="mdl-navigation__link" href="">{"Link"}</a>
          <a class="mdl-navigation__link" href="">{"Link"}</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
      </main>
    </div>
      </>
      }
  }
}

run trunk server and open

I can't see this button

Expected to see the button for expanding the menu

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

cant work on material nav #3407

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

cant work on material nav #3407

Uh oh!

cn-kali-team Sep 21, 2023

index.html

nav

Replies: 0 comments

cn-kali-team
Sep 21, 2023