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

代码语言:html

所属分类:选项卡

代码描述:lit-element与lit-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.co.........完整代码请登录后点击上方下载按钮下载查看

网友评论0