文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将bootstrap navbar实现为lit-html/lit-element组件

问如何将bootstrap navbar实现为lit-html/lit-element组件
EN

Stack Overflow用户

提问于 2019-05-30 18:31:16

回答 2查看 1.5K关注 0票数 0

我想知道如何在lit-element/lit-html中实现引导导航栏

我已经在lit-element中创建了导航栏组件，但是导航栏下拉和切换不起作用。

我必须将顶部固定的导航栏实现为html中的lit-element组件。请检查代码并卡住。如果有任何替代方案，请提供解决方案。

// 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>

html

css

bootstrap-4

lit-element

lit-html

回答 2

Stack Overflow用户

发布于 2019-10-19 17:17:35

如果您愿意放弃Shadow DOM，您可以通过覆盖lit-element类中的createRenderRoot方法将呈现根切换到元素，而不是阴影根：

class Navbar extends LitElement {
    createRenderRoot() {
        return this;
    }
    // etc
}

票数 1

Stack Overflow用户

发布于 2019-05-30 22:26:44

你可以将Bootstrap与一些导入到影子dom类的第三方一起使用，但我认为直接使用lit-html的方式可能如下所示：

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);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56376475

复制

相似问题

问如何将bootstrap navbar实现为lit-html/lit-element组件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将bootstrap navbar实现为lit-html/lit-element组件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将bootstrap navbar实现为lit-html/lit-element组件
EN