0.0.6 • Published 10 months ago
renji-ui v0.0.6
renji-ui 是一个Web Components 组件库。
组件
已更新组件：标签页窗口组件
预览
http://renji-ui.shadowroot.host
快速上手
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/libs/bootstrap/version/bootstrap-5.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/libs/bootstrap-icons/version/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style type="text/css">
renji-tabs-window{position:absolute;}
renji-tabs-window>.tab-content{height:100%;}
</style>
</head>
<body>
<div id="renji-tabs-window-content-001" style="display: none;">
<div class="d-flex w-100 h-100">
<button class="btn btn-outline-primary">111</button>
</div>
</div>
<div id="renji-tabs-window-content-002" style="display: none;">
<div class="d-flex w-100 h-100">
<button class="btn btn-outline-primary">222</button>
</div>
</div>
<div id="renji-tabs-window-content-003" style="display: none;">
<div class="d-flex w-100 h-100">
<button class="btn btn-outline-primary">333</button>
</div>
</div>
<renji-tabs-window>
<div class="tab-content" slot="tab-content">
<div for="renji-tabs-window-content-001">demo1</div>
<div for="renji-tabs-window-content-002">demo2</div>
</div>
</renji-tabs-window>
<renji-tabs-window>
<div class="tab-content" slot="tab-content">
<div for="renji-tabs-window-content-003">demo3</div>
</div>
</renji-tabs-window>
<script type="module" src="./test.js"></script>
</body>
</html>js
import { registerAll, mergeWindow } from "../dist/index.esm.min.js";
registerAll();
const shadowHost1 = document.querySelector("renji-tabs-window");
const shadowHost2 = shadowHost1.nextElementSibling;
shadowHost2.style.left = window.innerWidth / 4 + 'px';
shadowHost2.style.top = window.innerHeight / 4 + 'px';
// 小工具按钮的图标字体
shadowHost1.addFont(
"/libs/bootstrap-icons/version/1.11.3/font/bootstrap-icons.min.css"
);
// 添加按钮工具
// shadowHost1.addRightTool({ iconImg: "/img/demo.png" }, (ev) => {
// alert(1);
// });
shadowHost1.addRightTool({ icon: "bi-pc-display" }, (ev) => {
alert(1);
});
shadowHost1.addRightTool({ icon: "bi-tablet" }, (ev) => {
alert(2);
});
shadowHost1.addRightTool({ icon: "bi-phone" }, (ev) => {
alert(3);
});
/**
* 多个窗口合并
* 虽然默认支持同时创建多个标签页，但还是建议只创建一个，
* 然后通过窗口合并来实现首次创建多个标签页。
*/
// mergeWindow(shadowHost1, shadowHost2)VUE
main.ts
import { registerAll } from 'renji-ui';
registerAll();demo-component.ts
// 下一个版本将在支持下面写法基础上，优化更简单的写法。
const domid = 'renji-tabs-window-content-' + count;
const content = ref(null) as any;
onMounted(async ()=>{
const win = document.createElement('renji-tabs-window');
win.style.cssText = 'position:absolute;';
win.innerHTML = `<div slot="tab-content"><div for="${domid}">${props.title}</div></div>`;
content.value.after(win);
})<template>
<div :id="domid" ref="content" style="display: none;">
<slot></slot>
</div>
</template>