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

cant work on material nav #3407

{{title}}

Replies: 0 comments

Select a reply

cant work on material nav #3407

cn-kali-team Sep 21, 2023

index.html

nav

Replies: 0 comments

cn-kali-team
Sep 21, 2023