https://www.electronjs.org/assets/js/1b98baea.20f32fe7.js

1"use strict";(self.webpackChunkelectronjs=self.webpackChunkelectronjs||[]).push([["27313"],{8343(e,t,n){n.r(t),n.d(t,{metadata:()=>r,default:()=>p,frontMatter:()=>o,contentTitle:()=>i,toc:()=>u,assets:()=>c});var r=JSON.parse('{"id":"latest/tutorial/examples","title":"Examples Overview","description":"A set of examples for common Electron features","source":"@site/docs/latest/tutorial/examples.md","sourceDirName":"latest/tutorial","slug":"/latest/tutorial/examples","permalink":"/docs/latest/tutorial/examples","draft":false,"unlisted":false,"editUrl":"https://github.com/electron/electron/edit/main/docs/tutorial/examples.md","tags":[],"version":"current","frontMatter":{"title":"Examples Overview","description":"A set of examples for common Electron features","slug":"examples","hide_title":false},"sidebar":"docs","previous":{"title":"Security","permalink":"/docs/latest/tutorial/security"},"next":{"title":"Dark Mode","permalink":"/docs/latest/tutorial/dark-mode"}}'),a=n(74848),l=n(28453),s=n(78476);let o={title:"Examples Overview",description:"A set of examples for common Electron features",slug:"examples",hide_title:!1},i="Examples Overview",c={},u=[{value:"How to...?",id:"how-to",level:2}];function d(e){let t={a:"a",h1:"h1",h2:"h2",header:"header",p:"p",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"examples-overview",children:"Examples Overview"})}),"\n",(0,a.jsxs)(t.p,{children:["In this section, we have collected a set of guides for common features\nthat you may want to implement in your Electron application. Each guide\ncontains a practical example in a minimal, self-contained example app.\nThe easiest way to run these examples is by downloading ",(0,a.jsx)(t.a,{href:"https://www.electronjs.org/fiddle",children:"Electron Fiddle"}),"."]}),"\n",(0,a.jsx)(t.p,{children:'Once Fiddle is installed, you can press on the "Open in Fiddle" button that you\nwill find below code samples like the following one:'}),"\n",(0,a.jsx)(s.A,{files:{"index.html":'<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="UTF-8">\n    <title>Hello World!</title>\n    <meta http-equiv="Content-Security-Policy" content="script-src \'self\' \'unsafe-inline\';" />\n</head>\n<body>\n    <h1>Hello World!</h1>\n    <p>\n        We are using Node.js <span id="node-version"></span>,\n        Chromium <span id="chrome-version"></span>,\n        and Electron <span id="electron-version"></span>.\n    </p>\n</body>\n</html>\n',"main.js":"const { app, BrowserWindow } = require('electron/main')\nconst path = require('node:path')\n\nfunction createWindow () {\n  const win = new BrowserWindow({\n    width: 800,\n    height: 600,\n    webPreferences: {\n      preload: path.join(__dirname, 'preload.js')\n    }\n  })\n\n  win.loadFile('index.html')\n}\n\napp.whenReady().then(() => {\n  createWindow()\n\n  app.on('activate', () => {\n    if (BrowserWindow.getAllWindows().length === 0) {\n      createWindow()\n    }\n  })\n})\n\napp.on('window-all-closed', () => {\n  if (process.platform !== 'darwin') {\n    app.quit()\n  }\n})\n","preload.js":"window.addEventListener('DOMContentLoaded', () => {\n  const replaceText = (selector, text) => {\n    const element = document.getElementById(selector)\n    if (element) element.innerText = text\n  }\n\n  for (const type of ['chrome', 'node', 'electron']) {\n    replaceText(`${type}-version`, process.versions[type])\n  }\n})\n"},dir:"docs/latest/fiddles/quick-start",version:"44.5.1",focus:"main.js"}),"\n",(0,a.jsx)(t.h2,{id:"how-to",children:"How to...?"}),"\n",(0,a.jsx)(t.p,{children:'You can find the full list of "How to?" in the sidebar.'})]})}function p(e={}){let{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},57250(e,t,n){n.d(t,{A:()=>o});var r=n(74848);n(96540);var a=n(18215),l=n(57663);function s({children:e,className:t,hidden:n}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.A)("tabItem_Ymn6",t),hidden:n,children:e})}function o({children:e,className:t,value:n}){let{selectedValue:a,lazy:i}=(0,l.uc)(),c=n===a;return!c&&i?null:(0,r.jsx)(s,{className:t,hidden:!c,children:e})}},50773(e,t,n){n.d(t,{A:()=>p});var r=n(74848);n(96540);var a=n(18215),l=n(88287),s=n(57663),o=n(28584),i=n(19863);function c({className:e}){let{selectedValue:t,selectValue:n,tabValues:l,block:i}=(0,s.uc)(),u=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.a_)(),p=e=>{let r=e.currentTarget,a=l[u.indexOf(r)].value;a!==t&&(d(r),n(a))},h=e=>{let t=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":{let n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{let n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1]}}t?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":i},e),children:l.map(({value:e,label:n,attributes:l})=>(0,r.jsx)("li",{role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,ref:e=>{u.push(e)},onKeyDown:h,onClick:p,...l,className:(0,a.A)("tabs__item","tabItem_LNqP",l?.className,{"tabs__item--active":t===e}),children:n??e},e))})}function u({children:e}){return(0,r.jsx)("div",{className:"margin-top--md",children:e})}function d({className:e,children:t}){return(0,r.jsxs)("div",{className:(0,a.A)(l.G.tabs.container,"tabs-container","tabList__CuJ"),children:[(0,r.jsx)(c,{className:e}),(0,r.jsx)(u,{children:t})]})}function p(e){let t=(0,i.A)(),n=(0,s.OC)(e);return(0,r.jsx)(s.O_,{value:n,children:(0,r.jsx)(d,{className:e.className,children:(0,s.vT)(e.children)})},String(t))}},57663(e,t,n){n.d(t,{OC:()=>p,O_:()=>f,uc:()=>m,vT:()=>u});var r=n(74848),a=n(96540),l=n(56347),s=n(99989),o=n(96629),i=n(80618),c=n(41367);function u(e){return a.Children.toArray(e).filter(e=>"\n"!==e)}function d({value:e,tabValues:t}){return t.some(t=>t.value===e)}function p(e){let t,{defaultValue:n,queryString:r=!1,groupId:u}=e,p=function(e){let{values:t,children:n}=e;return(0,a.useMemo)(()=>{let e=t??a.Children.toArray(n).flatMap(e=>{if(!e)return[];if((0,a.isValidElement)(e)&&function(e){let{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return[e];

1let t="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${t}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:t,attributes:n,default:r}})=>({value:e,label:t,attributes:n,default:r})),r=(0,i.XI)(e,(e,t)=>e.value===t.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[t,n])}(e),[h,m]=(0,a.useState)(()=>(function({defaultValue:e,tabValues:t}){if(0===t.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!d({value:e,tabValues:t}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let n=t.find(e=>e.default)??t[0];if(!n)throw Error("Unexpected error: 0 tabValues");return n.value})({defaultValue:n,tabValues:p})),[f,v]=function({queryString:e=!1,groupId:t}){let n=(0,l.W6)(),r=function({queryString:e=!1,groupId:t}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,o.aZ)(r),(0,a.useCallback)(e=>{if(!r)return;let t=new URLSearchParams(n.location.search);t.set(r,e),n.replace({...n.location,search:t.toString()})},[r,n])]}({queryString:r,groupId:u}),[x,b]=function({groupId:e}){let t=e?`docusaurus.tab.${e}`:null,[n,r]=(0,c.Dv)(t);return[n,(0,a.useCallback)(e=>{t&&r.set(e)},[t,r])]}({groupId:u}),w=d({value:t=f??x,tabValues:p})?t:null;return(0,s.A)(()=>{w&&m(w)},[w]),{selectedValue:h,selectValue:(0,a.useCallback)(e=>{if(!d({value:e,tabValues:p}))throw Error(`Can't select invalid tab value=${e}`);m(e),v(e),b(e)},[v,b,p]),tabValues:p,lazy:e.lazy??!1,block:e.block??!1}}let h=(0,a.createContext)(null);function m(){let e=a.useContext(h);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function f(e){return(0,r.jsx)(h.Provider,{value:e.value,children:e.children})}},78476(e,t,n){n.d(t,{A:()=>u});var r=n(74848);n(96540);var a=n(50773),l=n(57250),s=n(1113);let o="dot_YdbR",i={"main.js":4,"preload.js":3,"index.html":2,"renderer.js":1};function c({children:e,version:t,gitDir:n}){return(0,r.jsxs)("div",{className:"editorWindow_ZQWz",children:[(0,r.jsxs)("div",{className:"editorWindowHeader_GqG7",children:[(0,r.jsxs)("div",{className:"buttons_msmS",children:[(0,r.jsx)("span",{className:o,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:o,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:o,style:{background:"#58cb42"}})]}),(0,r.jsxs)("a",{className:"editorTitle_buME",href:`https://github.com/electron/electron/tree/v${t}/${n}`,children:[n," (",t,")"]}),(0,r.jsx)("a",{target:"_blank",className:"button button--primary button--md",href:`https://fiddle.electronjs.org/launch?target=electron/v${t}/${n}`,rel:"noreferrer",children:"Open in Fiddle"})]}),(0,r.jsx)("div",{className:"editorWindowBody_R11m",children:e})]})}let u=e=>{let{files:t,focus:n,version:o,dir:u}=e,d=u.replace(/docs\/[a-zA-Z0-9-]+\/fiddles/,"docs/fiddles"),p=Object.keys(t).sort((e,t)=>i[t]-i[e]),h=p.map(e=>({label:e,value:e}));return(0,r.jsx)(c,{version:o,gitDir:d,children:(0,r.jsx)(a.A,{values:h,defaultValue:n||"main.js",children:p.map(e=>(0,r.jsx)(l.A,{value:e,children:(0,r.jsx)(s.A,{className:`language-${e.split(".").pop()}`,children:t[e]})},e))})})}},28453(e,t,n){n.d(t,{R:()=>s,x:()=>o});var r=n(96540);let a={},l=r.createContext(a);function s(e){let t=r.useContext(l);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),r.createElement(l.Provider,{value:t},e.children)}}}]);