"use strict";(self.webpackChunksketchybar_site=self.webpackChunksketchybar_site||[]).push([[616],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return s}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},p=Object.keys(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),d=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},u=function(e){var t=d(e.components);return r.createElement(l.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,p=e.originalType,l=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),m=d(n),s=a,k=m["".concat(l,".").concat(s)]||m[s]||c[s]||p;return n?r.createElement(k,i(i({ref:t},u),{},{components:n})):r.createElement(k,i({ref:t},u))}));function s(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var p=n.length,i=new Array(p);i[0]=m;var o={};for(var l in t)hasOwnProperty.call(t,l)&&(o[l]=t[l]);o.originalType=e,o.mdxType="string"==typeof e?e:a,i[1]=o;for(var d=2;d<p;d++)i[d]=n[d];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},8605:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return l},default:function(){return s},frontMatter:function(){return o},metadata:function(){return d},toc:function(){return c}});var r=n(7462),a=n(3366),p=(n(7294),n(3905)),i=["components"],o={id:"popups",title:"Popup Menus",sidebar_position:1},l=void 0,d={unversionedId:"config/popups",id:"config/popups",title:"Popup Menus",description:"Popup Menus",source:"@site/docs/config/Popup.md",sourceDirName:"config",slug:"/config/popups",permalink:"/SketchyBar/config/popups",tags:[],version:"current",sidebarPosition:1,frontMatter:{id:"popups",title:"Popup Menus",sidebar_position:1},sidebar:"docs",previous:{title:"Special Components",permalink:"/SketchyBar/config/components"},next:{title:"Events & Scripting",permalink:"/SketchyBar/config/events"}},u={},c=[{value:"Popup Menus",id:"popup-menus",level:2}],m={toc:c};function s(e){var t=e.components,n=(0,a.Z)(e,i);return(0,p.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,p.kt)("h2",{id:"popup-menus"},"Popup Menus"),(0,p.kt)("p",null,(0,p.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/22680421/146688291-b8bc5e77-e6a2-42ee-bd9f-b3709c63d936.png",alt:"Simple Popup"})),(0,p.kt)("p",null,"Popup menus are a powerful way to make further ",(0,p.kt)("inlineCode",{parentName:"p"},"items")," accessible in a small popup window below any bar item.\nEvery item has a popup available with the properties:"),(0,p.kt)("pre",null,(0,p.kt)("code",{parentName:"pre",className:"language-bash"},"sketchybar --set <name> popup.<popup_property>=<value>\n")),(0,p.kt)("table",null,(0,p.kt)("thead",{parentName:"table"},(0,p.kt)("tr",{parentName:"thead"},(0,p.kt)("th",{parentName:"tr",align:"center"},"<popup_property",">"),(0,p.kt)("th",{parentName:"tr",align:"center"},"<value",">"),(0,p.kt)("th",{parentName:"tr",align:"center"},"default"),(0,p.kt)("th",{parentName:"tr",align:null},"description"))),(0,p.kt)("tbody",{parentName:"table"},(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"drawing")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"<boolean>")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"off")),(0,p.kt)("td",{parentName:"tr",align:null},"If the ",(0,p.kt)("inlineCode",{parentName:"td"},"popup")," should be rendered")),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"horizontal")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"<boolean>")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"off")),(0,p.kt)("td",{parentName:"tr",align:null},"If the ",(0,p.kt)("inlineCode",{parentName:"td"},"popup")," should render horizontally")),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"height")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"<positive_integer>")),(0,p.kt)("td",{parentName:"tr",align:"center"},"bar height"),(0,p.kt)("td",{parentName:"tr",align:null},"The vertical spacing between items in a popup")),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"blur_radius")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"<positive_integer>")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"0")),(0,p.kt)("td",{parentName:"tr",align:null},"The blur applied to the popup background")),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"y_offset")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"<integer>")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"0")),(0,p.kt)("td",{parentName:"tr",align:null},"Vertical offset applied to the ",(0,p.kt)("inlineCode",{parentName:"td"},"popup"))),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"align")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"left"),", ",(0,p.kt)("inlineCode",{parentName:"td"},"right"),", ",(0,p.kt)("inlineCode",{parentName:"td"},"center")),(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"left")),(0,p.kt)("td",{parentName:"tr",align:null},"Alignment of the popup with its parent item in the bar")),(0,p.kt)("tr",{parentName:"tbody"},(0,p.kt)("td",{parentName:"tr",align:"center"},(0,p.kt)("inlineCode",{parentName:"td"},"background.<background_property>")),(0,p.kt)("td",{parentName:"tr",align:"center"}),(0,p.kt)("td",{parentName:"tr",align:"center"}),(0,p.kt)("td",{parentName:"tr",align:null},"Popups have a background and support all properties")))),(0,p.kt)("p",null,"Items can be added to a popup menu by setting the ",(0,p.kt)("inlineCode",{parentName:"p"},"position")," of those items to ",(0,p.kt)("inlineCode",{parentName:"p"},"popup.<name>")," where ",(0,p.kt)("inlineCode",{parentName:"p"},"<name>")," is the name of the item containing the popup.\nYou can find a demo implementation of this ",(0,p.kt)("a",{parentName:"p",href:"https://github.com/FelixKratz/SketchyBar/discussions/12?sort=new#discussioncomment-1843975"},"here"),"."))}s.isMDXComponent=!0}}]);