2023最新electron-tabs入门教程：从安装到实现拖拽排序的5个步骤-拓冰建站

2023最新electron-tabs入门教程：从安装到实现拖拽排序的5个步骤

【免费下载链接】electron-tabsTab component for Electron项目地址: https://gitcode.com/gh_mirrors/el/electron-tabs

Electron-tabs 是一个专为 Electron 应用程序设计的简单易用的标签页组件，它让开发者为桌面应用添加现代化标签界面变得轻松。这个强大的工具完全兼容 Electron ≥ 17，并且符合 Electron 安全推荐标准，无需启用nodeIntegration: true即可正常工作。无论你是 Electron 新手还是经验丰富的开发者，electron-tabs 都能帮助你快速构建具有拖拽排序功能的标签页界面。🚀

什么是 electron-tabs？

electron-tabs是一个基于 TypeScript 和 Web Components 构建的标签页组件，专为 Electron 应用程序设计。它提供了完整的标签页管理功能，包括：

🔧开箱即用的拖拽排序- 轻松实现标签页的拖拽重新排序
🎨高度可定制化- 通过 CSS 变量轻松调整样式
🔒安全合规- 遵循 Electron 安全最佳实践
📱响应式设计- 适应不同尺寸的应用窗口
🔔丰富的事件系统- 监听标签页的各种状态变化

第一步：安装 electron-tabs

开始使用 electron-tabs 非常简单，只需要几个命令即可完成安装：

# 克隆仓库（如果需要从源码构建） git clone https://gitcode.com/gh_mirrors/el/electron-tabs # 进入项目目录 cd electron-tabs # 安装依赖 npm install # 构建项目 npm run build

或者直接通过 npm 安装：

npm install --save electron-tabs

安装完成后，你可以在dist/目录中找到构建好的文件，其中最重要的是electron-tabs.js。

第二步：配置 Electron 主进程

在使用 electron-tabs 之前，需要在 Electron 主进程中启用 webview 标签支持。编辑你的主进程文件（如main.js）：

const { BrowserWindow } = require('electron') const mainWindow = new BrowserWindow({ webPreferences: { webviewTag: true // 必须启用这个选项 } })

这个配置确保 electron-tabs 能够正常使用 webview 来加载页面内容。

第三步：在 HTML 中添加标签页组件

在你的渲染进程 HTML 文件中，添加 electron-tabs 组件：

<!DOCTYPE html> <html> <head> <title>我的 Electron 应用</title> </head> <body style="margin:0"> <!-- 添加标签页组件 --> <tab-group new-tab-button="true" sortable="true"></tab-group> <!-- 引入 electron-tabs --> <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script> <script> // 标签页初始化代码将在这里 </script> </body> </html>

<tab-group>元素支持以下属性：

new-tab-button="true"- 显示"新建标签页"按钮
sortable="true"- 启用拖拽排序功能
close-button-text="关闭"- 自定义关闭按钮文本
visibility-threshold="0"- 标签栏可见性阈值

第四步：创建和管理标签页

现在让我们来看看如何创建和管理标签页。在<script>标签中添加以下代码：

const tabGroup = document.querySelector("tab-group") // 设置默认标签页配置 tabGroup.setDefaultTab({ title: "新建页面", src: "page.html", active: true }) // 添加第一个标签页 const tab1 = tabGroup.addTab({ title: "维基百科", src: "https://www.wikipedia.org/", active: true, ready: (tab) => { console.log("标签页已准备就绪:", tab.getTitle()) } }) // 添加带图标的标签页 const tab2 = tabGroup.addTab({ title: "GitHub", src: "https://github.com/", iconURL: "mark-github.svg", badge: { text: "3", classname: "my-badge" } }) // 添加本地页面标签页 const tab3 = tabGroup.addTab({ title: "设置", src: "settings.html", closable: false // 这个标签页不能关闭 })

第五步：实现拖拽排序和高级功能

electron-tabs 最强大的功能之一就是开箱即用的拖拽排序。只需在<tab-group>元素上设置sortable="true"，用户就可以通过拖拽来重新排列标签页顺序。

自定义样式和主题

你可以通过 CSS 变量轻松定制 electron-tabs 的外观：

<tab-group new-tab-button="true" sortable="true"> <style> :host { --et-tab-height: 40px; --et-tab-background: #f0f0f0; --et-tab-active-background: #ffffff; --et-tab-border-color: #ddd; --et-tab-font-size: 14px; } /* 自定义徽章样式 */ .my-badge { background-color: #327BB1; color: white; border-radius: 10px; } </style> </tab-group>

监听标签页事件

electron-tabs 提供了丰富的事件系统，让你可以监听标签页的各种状态变化：

// 监听标签页添加事件 tabGroup.on("tab-added", (tab, tabGroup) => { console.log("新标签页已添加:", tab.getTitle()) }) // 监听标签页激活事件 tabGroup.on("tab-active", (tab, tabGroup) => { console.log("标签页已激活:", tab.getTitle()) }) // 监听标签页关闭事件 tab.on("closing", (tab, abort) => { if (tab.getTitle() === "重要页面") { if (!confirm("确定要关闭这个重要页面吗？")) { abort() // 取消关闭操作 } } })

访问 webview 元素

每个标签页都包含一个 Electron webview 元素，你可以直接访问它：

const tab = tabGroup.getActiveTab() if (tab) { const webview = tab.webview // 使用 webview 的方法 webview.loadURL("https://example.com") webview.goBack() webview.reload() }

实战示例：创建一个标签页管理器

让我们创建一个完整的示例，展示如何使用 electron-tabs 构建一个功能齐全的标签页管理器：

<tab-group new-tab-button="true" sortable="true" id="myTabGroup"> <style> /* 自定义样式 */ .important-tab { border-left: 3px solid #ff6b6b !important; } .pinned-tab { background-color: #f8f9fa !important; } </style> </tab-group> <script src="node_modules/electron-tabs/dist/electron-tabs.js"></script> <script> const tabGroup = document.querySelector("#myTabGroup") // 初始化标签页 tabGroup.setDefaultTab({ title: "新标签页", src: "about:blank", active: true }) // 添加几个示例标签页 const pages = [ { title: "首页", src: "home.html", icon: "🏠" }, { title: "文档", src: "docs.html", badge: "12" }, { title: "设置", src: "settings.html", closable: false } ] pages.forEach(page => { const tab = tabGroup.addTab({ title: page.title, src: page.src, icon: page.icon, badge: page.badge ? { text: page.badge } : null, closable: page.closable !== false, ready: function(tab) { if (page.title === "首页") { tab.element.classList.add("important-tab") } } }) }) // 添加快捷键支持 document.addEventListener("keydown", (e) => { if (e.ctrlKey && e.key === "t") { // Ctrl+T 新建标签页 tabGroup.addTab() e.preventDefault() } else if (e.ctrlKey && e.key === "w") { // Ctrl+W 关闭当前标签页 const activeTab = tabGroup.getActiveTab() if (activeTab && activeTab.closable) { activeTab.close() e.preventDefault() } } }) </script>