How to implement bootstrap navbar as component in lit-html/lit-element
Asked Answered
H

2

2

I would like to know how to implement bootstrap navbar in lit-element/lit-html

I have created navbar component in lit-element but navbar dropdown and toggling are not working.

I have to implement fixed-top navbar as a lit-element component in html. please check the code and got stuck. If any alternatives, kindly provide solution.

// component.js
import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  render(){
    return html`
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
      <div>
            <header>
    <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
      <a class="navbar-brand"><img src="../images/send4x.svg" alt="" class="logoC mr-4"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown mr-4">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownProvider" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Providers
            </a>
            <div class="dropdown-menu mr-4" aria-labelledby="navbarDropdownProvider">
              <a class="dropdown-item"
                href="#">trans</a>
              <a class="dropdown-item"
                href="#">fund</a>
            </div>
          </li>
                  </ul>
      </div>
    </nav>
  </header>
      </div>
    `;
  }
}
customElements.define('my-element', MyElement);


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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

  <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

  <script type="module" src="./my-element.js"></script>
  <title>lit-element code sample</title>
</head>
<body>
  <my-element>  </my-element>
</body>
</html>

Haro answered 30/5, 2019 at 10:31 Comment(0)
D
5

If you are willing to give up on Shadow DOM, you can switch the render root to the element instead of the shadow root by overriding the createRenderRoot method in your lit-element class:

class Navbar extends LitElement {
  createRenderRoot() {
    return this;
  }
}
Deleterious answered 19/10, 2019 at 9:17 Comment(2)
what do you loose by giving up shadow dom?Gewirtz
not sure but, you can check this page: lit.dev/docs/components/shadow-dom/…Caporal
S
1

You may use Bootstrap with some 3rd parties imported to shadow dom classes, but I think the direct way may use lit-html like :

demo

import { html, render } from 'lit-html/lit-html.js'; 


const myTemplate = ()=>  html`

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
      <div>
            <header>
    <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
      <a class="navbar-brand"><img src="../images/send4x.svg" alt="" class="logoC mr-4"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item dropdown mr-4">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownProvider" data-toggle="dropdown"
              aria-haspopup="true" aria-expanded="false">
              Providers
            </a>
            <div class="dropdown-menu mr-4" aria-labelledby="navbarDropdownProvider">
              <a class="dropdown-item"
                href="#">trans</a>
              <a class="dropdown-item"
                href="#">fund</a>
            </div>
          </li>
                  </ul>
      </div>
    </nav>
  </header>
      </div>

    `;

render(myTemplate(), document.body);
Skiba answered 30/5, 2019 at 14:26 Comment(2)
thanks for helping, is it possible to do using lit-element,Haro
I found a package called lit-element-bootstrap, Please check the link #56388527Haro

© 2022 - 2024 — McMap. All rights reserved.