2017-06-27 15:38:44 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
2020-03-10 15:53:22 -05:00
|
|
|
<title>electron-tabs-demo</title>
|
2017-06-27 15:38:44 -05:00
|
|
|
</head>
|
|
|
|
|
<body style="margin:0">
|
|
|
|
|
|
2022-05-24 03:49:24 -05:00
|
|
|
<tab-group new-tab-button="true" sortable="true">
|
|
|
|
|
<style>
|
2024-12-07 19:49:40 -05:00
|
|
|
/* If you use a custom titlebar, add drag ability to navigation bar */
|
|
|
|
|
/* Electron Documentation: https://www.electronjs.org/docs/latest/tutorial/custom-window-interactions#custom-draggable-regions */
|
|
|
|
|
.nav {-webkit-app-region: drag} /* Apply to navigation bar */
|
|
|
|
|
.tab {-webkit-app-region: no-drag} /* Unapply it from the tabs */
|
|
|
|
|
button {-webkit-app-region: no-drag} /* Unapply it from the buttons */
|
|
|
|
|
|
2022-05-25 08:14:37 -05:00
|
|
|
/* Add custom styles */
|
2022-05-25 07:44:29 -05:00
|
|
|
.my-badge {
|
|
|
|
|
background-color: #327BB1;
|
2022-05-24 03:49:24 -05:00
|
|
|
}
|
2022-05-25 08:14:37 -05:00
|
|
|
.my-custom-tab {
|
2022-05-25 08:18:35 -05:00
|
|
|
color: #d135d1;
|
2022-05-25 08:14:37 -05:00
|
|
|
font-style: italic;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
2022-05-24 03:49:24 -05:00
|
|
|
</style>
|
|
|
|
|
</tab-group>
|
2017-06-27 15:38:44 -05:00
|
|
|
|
2022-05-24 16:38:25 -05:00
|
|
|
<script src="../dist/electron-tabs.js"></script>
|
2017-06-27 15:38:44 -05:00
|
|
|
<script>
|
2022-05-23 11:10:29 -05:00
|
|
|
const tabGroup = document.querySelector("tab-group");
|
2022-05-24 03:05:04 -05:00
|
|
|
tabGroup.on("ready", () => console.info("TabGroup is ready"));
|
2022-05-23 12:17:47 -05:00
|
|
|
|
2022-05-23 16:18:52 -05:00
|
|
|
tabGroup.setDefaultTab({
|
2024-12-07 19:49:40 -05:00
|
|
|
title: "Opengist",
|
|
|
|
|
src: "https://gist.sudovanilla.org/all",
|
2022-05-24 03:05:04 -05:00
|
|
|
active: true,
|
|
|
|
|
ready: () => console.info("New Tab is ready")
|
2022-05-23 12:17:47 -05:00
|
|
|
});
|
2020-02-04 05:13:57 -05:00
|
|
|
|
|
|
|
|
tabGroup.addTab({
|
2024-12-07 19:49:40 -05:00
|
|
|
title: "electron-tabs | SudoVanilla Ark",
|
|
|
|
|
src: "https://ark.sudovanilla.org/Korbs/electron-tabs/",
|
2022-05-25 07:44:29 -05:00
|
|
|
badge: {
|
|
|
|
|
text: "5",
|
|
|
|
|
classname: "my-badge"
|
|
|
|
|
}
|
2020-02-04 05:13:57 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
tabGroup.addTab({
|
2024-12-07 19:49:40 -05:00
|
|
|
title: "electron-tabs | SudoVanilla Registry",
|
|
|
|
|
src: "https://registry.sudovanilla.org/-/web/detail/@sudovanilla/electron-tabs",
|
2022-05-25 07:44:29 -05:00
|
|
|
iconURL: "mark-github.svg",
|
2020-02-04 05:13:57 -05:00
|
|
|
active: true
|
|
|
|
|
});
|
2017-06-27 15:38:44 -05:00
|
|
|
|
2022-05-25 07:51:16 -05:00
|
|
|
tabGroup.addTab({
|
2022-05-25 08:18:35 -05:00
|
|
|
title: "My Custom Tab",
|
2022-05-25 08:14:37 -05:00
|
|
|
src: "page.html",
|
|
|
|
|
ready: function(tab) {
|
|
|
|
|
tab.element.classList.add("my-custom-tab");
|
|
|
|
|
}
|
|
|
|
|
});
|
2017-06-27 15:38:44 -05:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
