lit-element与lit-html开发的选项卡代码-html代码-BFW代码库

lit-element与lit-html开发的选项卡代码

代码语言：html

所属分类：选项卡

代码描述：lit-element与lit-html开发的选项卡代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap');

:root {
  --color-line: #dedede;
  --color-inactive: #f1f1f1;
}

:not(:defined) {
  display: none;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

example-tabs::part(tab-bar) {
  display: flex;
}

example-tabs::part(content) {
  border: 1px solid var(--color-line);
  padding: 15px;
}

example-tabs::part(tab) {
  user-select: none;
  margin-right: -1px;
  margin-bottom: -1px;
  background: var(--color-inactive);
  border: 1px solid var(--color-line);
  padding: 10px 15px;

}

example-tabs::part(tab-selected) { 
  background: white;
  border-bottom: 0;
}
</style>




  <script type="importmap">
  {"imports": {
    "lit-html/": "https://unpkg.com/lit-html@1.1.2/",
    "lit-html": "https://unpkg.com/lit-html@1.1.2/lit-html.js",
    "lit-element": "https://unpkg.com/lit-element@2.2.1/lit-element.js"
  }}
  </script>
</head>
<body>

  <example-tabs>
    <example-tab title="Tab 1">
      <p>This is the first tab.</p>
    </example-tab>

    <example-tab title="Tab 2">
      <p>This is the second tab.</p>
    </example-tab>

    <example-tab title="Tab 3">
      <p>This is the third tab.</p>
    </example-tab>
  </example-tabs>
  


  
      <script type="module">
import { Lit.........完整代码请登录后点击上方下载按钮下载查看