Question

我想在我已经创建的Electron应用程序中添加一个标签栏。

我已经下载了electronic-tabs软件包并创建了renderer.js并具有

<div class="etabs-tabgroup">
    <div class="etabs-tabs"></div>
    <div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
<script>
     // You can also require other files to run in this process
     require('./renderer.js')
</script>

在我的index.html中。正在显示某些内容，但这只是一个灰色条。似乎renderer.js中的代码未执行。我在package.json中设置了renderer：“ renderer.js”。我不确定这是否正确。我还以为是这样，因为在index.html中有两个样式表（标准样式表和electron-tabs.css），但是即使删除标准样式表也无法解决。

我可以仅获取一个示例应用程序，然后尝试将其合并到其中，但是我想了解这里发生的事情。

main.js

const electron = require ('electron');
const { app, ipcMain, Menu, BrowserWindow , shell } = require('electron')
const url = require('url');

// Tabs implementation
let tabsWindow;

app.on('ready', function() {


    const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize
    // Create new window
    mainWindow = new BrowserWindow({title: "Popcorn", width, height, icon: __dirname + '/popcorn_icon.ico'});
    // Load html into window
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

      // When the main window is closed, also close the tabbed windows
     mainWindow.on("closed", () => {
     mainWindow = null;
     tabsWindow && tabsWindow.close();
     });

    // Build menu from template
    const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
    // Insert menu
    Menu.setApplicationMenu(mainMenu);
});


// Create menu template 
const mainMenuTemplate = [
    {
        label: 'File',
        submenu: [
            {
                label: 'Quit',
                accelerator: process.platform == 'darwin' ? 'Command+Q' : 'Ctrl+Q',
                click(){
                    app.quit();
                }
            }
        ],
    },
    {
        label: 'View',
        submenu: [
            {
                label: 'Toggle Fullscreen',
                click(){
                    mainWindow.isFullScreen() == true ? mainWindow.setFullScreen(false) : mainWindow.setFullScreen(true)
                }
            }
        ],

    },
    {
        label: 'About',
        submenu: [
            {
                label: 'Version Info',
                click(){
                    newPopup('version.html')
                }
            }
        ],
    }

];


  function newPopup(url) {

    window = new BrowserWindow({title: "Version Info", width: 400, height: 85, resizable: false,  icon: __dirname + '/popcorn_icon.ico'});
    window.setMenuBarVisibility(false)
    window.loadURL(__dirname + '/' + url)
    }

renderer.js



// 1. Require the module
const TabGroup = require("electron-tabs");

// 2. Define the instance of the tab group (container)
let tabGroup = new TabGroup({
    // If you want a new button that appends a new tab, include:
    newTab: {
        title: 'New Tab',
        // The file will need to be local, probably a local-ntp.html file
        // like in the Google Chrome Browser.

        src: "tile_menu/top.html",
        visible: true,
        webviewAttributes: {
            nodeintegration: true
        }
    }
});

// 3. Add a tab from a website
let tab1 = tabGroup.addTab({
    title: "Top",
    src: "tile_menu/top.html",
    visible: true
});

// 4. Add a new tab that contains a local HTML file
let tab2 = tabGroup.addTab({
    title: "Local File",
    src: "tile_menu/top.html",
    visible: true,
    // If the page needs to access Node.js modules, be sure to
    // enable the nodeintegration
    webviewAttributes: {
        nodeintegration: true
    }
});

如何使用电子标签包创建标签？

0 个答案: