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