mirror of
https://github.com/FelixKratz/SketchyBar
synced 2024-11-23 03:43:02 +00:00
22 lines
No EOL
46 KiB
HTML
22 lines
No EOL
46 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-config/items">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v2.2.0">
|
||
<title data-rh="true">Item Properties | SketchyBar</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://felixkratz.github.io/SketchyBar/config/items"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Item Properties | SketchyBar"><meta data-rh="true" name="description" content="Items and their properties"><meta data-rh="true" property="og:description" content="Items and their properties"><link data-rh="true" rel="icon" href="/SketchyBar/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://felixkratz.github.io/SketchyBar/config/items"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io/SketchyBar/config/items" hreflang="en"><link data-rh="true" rel="alternate" href="https://felixkratz.github.io/SketchyBar/config/items" hreflang="x-default"><link rel="stylesheet" href="/SketchyBar/assets/css/styles.21661fb5.css">
|
||
<link rel="preload" href="/SketchyBar/assets/js/runtime~main.4182e1ba.js" as="script">
|
||
<link rel="preload" href="/SketchyBar/assets/js/main.b951478f.js" as="script">
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<script>!function(){function e(e){document.documentElement.setAttribute("data-theme",e)}var t=function(){var e=null;try{e=localStorage.getItem("theme")}catch(e){}return e}();null!==t?e(t):window.matchMedia("(prefers-color-scheme: dark)").matches?e("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,e("light"))}()</script><div id="__docusaurus">
|
||
<div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#docusaurus_skipToContent_fallback">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/SketchyBar/"><div class="navbar__logo"><img src="/SketchyBar/img/logo.svg" alt="SketchyBar Logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="/SketchyBar/img/logo.svg" alt="SketchyBar Logo" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate">SketchyBar</b></a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/SketchyBar/features">Features</a><a class="navbar__item navbar__link" href="/SketchyBar/setup">Setup & Installation</a><a class="navbar__item navbar__link" href="/SketchyBar/config/bar">Configuration</a><a href="https://github.com/FelixKratz/SketchyBar" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebar_njMd"><nav class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/features">Features</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/setup">Setup</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" aria-expanded="true" href="/SketchyBar/config/bar">Configuration</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/bar">Bar Properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/SketchyBar/config/items">Item Properties</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/components">Special Components</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/popups">Popup Menus</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/events">Events & Scripting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/querying">Querying Information</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/animations">Animations</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/types">Type Nomenclature</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/reloading">Reloading the configuration</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/SketchyBar/config/tricks">Tips & Tricks</a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/SketchyBar/credits">Credits</a></li></ul></nav></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/SketchyBar/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_OVgt"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Configuration</span><meta itemprop="position" content="1"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Item Properties</span><meta itemprop="position" content="2"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Item Properties</h1></header><h2 class="anchor anchorWithStickyNavbar_LWe7" id="items-and-their-properties">Items and their properties<a class="hash-link" href="#items-and-their-properties" title="Direct link to heading"></a></h2><p>Items are the main building blocks of <em>SketchyBar</em> and can be configured in a number of ways. Items have the following basic structure:</p><p><img loading="lazy" alt="Item Structure" src="/SketchyBar/assets/images/bar_item-b6101bdffaa334e82f7d34f26c6d5bba.jpg" width="779" height="739" class="img_ev3q"></p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="adding-items-to-sketchybar">Adding items to SketchyBar<a class="hash-link" href="#adding-items-to-sketchybar" title="Direct link to heading"></a></h3><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --add item </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">position</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>where the <code><name></code> should not contain whitespaces (or must be quoted), it is later used to refer to this item in the configuration.
|
||
The <code><position></code> is the placement in the bar and can be either <code>left</code>, <code>right</code>, <code>center</code> or <code>q</code> (which is left of the notch) and <code>e</code> (which is right of the notch).
|
||
The items will appear in the bar in the order in which they are added, but can be moved later on.</p><table><thead><tr><th><code><name></code></th><th><code><string></code></th></tr></thead><tbody><tr><td><code><position></code></td><td><code>left</code>, <code>right</code>, <code>center</code>, (<code>q</code>, <code>e</code> <a href="https://github.com/FelixKratz/SketchyBar/issues/120" target="_blank" rel="noopener noreferrer">#120</a>)</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="changing-item-properties">Changing item properties<a class="hash-link" href="#changing-item-properties" title="Direct link to heading"></a></h3><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --set </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>where the <code><name></code> is used to target the item.
|
||
(The <code><name></code> can be a regular expression inside of two slashed: <code>/<regex>/</code>)</p><p>A list of properties available to the <em>set</em> command is listed below (components might have additional properties, see the respective component section for them):</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="geometry-properties">Geometry Properties<a class="hash-link" href="#geometry-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>on</code></td><td>If the item should be drawn into the bar</td></tr><tr><td align="center"><code>position</code></td><td align="center"><code>left</code>, <code>right</code>, <code>center</code></td><td align="center"></td><td>Position of the item in the bar</td></tr><tr><td align="center"><code>associated_space</code></td><td align="center"><code><positive_integer list></code></td><td align="center"><code>0</code></td><td>Spaces to show this item on</td></tr><tr><td align="center"><code>associated_display</code></td><td align="center"><code><positive_integer list></code>, <code>active</code></td><td align="center"><code>0</code></td><td>Displays to show this item on</td></tr><tr><td align="center"><code>ignore_association</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>Ignores all space / display associations while on</td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the item</td></tr><tr><td align="center"><code>padding_left</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>The padding applied left of the item</td></tr><tr><td align="center"><code>padding_right</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>The padding applied right of the item</td></tr><tr><td align="center"><code>width</code></td><td align="center"><code><positive_integer></code> or <code>dynamic</code></td><td align="center"><code>dynamic</code></td><td>Makes the <em>item</em> use a fixed <em>width</em> given in points</td></tr><tr><td align="center"><code>blur_radius</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>The blur radius applied to the background of the item</td></tr><tr><td align="center"><code>background.<background_property></code></td><td align="center"></td><td align="center"></td><td>Items support all <code>background</code> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="icon-properties">Icon properties<a class="hash-link" href="#icon-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>icon</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Icon of the item</td></tr><tr><td align="center"><code>icon.<text_property></code></td><td align="center"></td><td align="center"></td><td>Icons support all <em>text</em> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="label-properties">Label properties<a class="hash-link" href="#label-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>label</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Label of the item</td></tr><tr><td align="center"><code>label.<text_property></code></td><td align="center"></td><td align="center"></td><td>Labels support all <em>text</em> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="scripting-properties">Scripting properties<a class="hash-link" href="#scripting-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>script</code></td><td align="center"><code><path></code>, <code><string></code></td><td align="center"></td><td>Script to run on an <code>event</code></td></tr><tr><td align="center"><code>click_script</code></td><td align="center"><code><path></code>, <code><string></code></td><td align="center"></td><td>Script to run on a mouse click (Difference to <code>mouse.clicked</code> event: <a href="https://github.com/FelixKratz/SketchyBar/discussions/109" target="_blank" rel="noopener noreferrer">#109</a>)</td></tr><tr><td align="center"><code>update_freq</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Time in seconds between routine script executions (<code>0</code> means never)</td></tr><tr><td align="center"><code>updates</code></td><td align="center"><code><boolean></code>, <code>when_shown</code></td><td align="center"><code>on</code></td><td>If and when the item updates e.g. via script execution</td></tr><tr><td align="center"><code>mach_helper</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Registers a helper for direct event notifications (<a href="https://github.com/FelixKratz/SketchyBarHelper" target="_blank" rel="noopener noreferrer">example</a>)</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="text-properties">Text properties<a class="hash-link" href="#text-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><text_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>on</code></td><td>If the text is rendered</td></tr><tr><td align="center"><code>highlight</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the text uses the <code>highlight_color</code> or the regular <code>color</code></td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xffffffff</code></td><td>Color used to render the text</td></tr><tr><td align="center"><code>highlight_color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xff000000</code></td><td>Highlight color of the text (e.g. for active space icon</td></tr><tr><td align="center"><code>padding_left</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the left of the <code>text</code></td></tr><tr><td align="center"><code>padding_right</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the right of the <code>text</code></td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the <code>text</code></td></tr><tr><td align="center"><code>font</code></td><td align="center"><code><family>:<type>:<size></code></td><td align="center"><code>Hack Nerd Font:Bold:14.0</code></td><td>The font to be used for the <code>text</code></td></tr><tr><td align="center"><code>font.family</code></td><td align="center"><code><string></code></td><td align="center"><code>Hack Nerd Font</code></td><td>The font family to be used for the <code>text</code></td></tr><tr><td align="center"><code>font.style</code></td><td align="center"><code><string></code></td><td align="center"><code>Bold</code></td><td>The font style to be used for the <code>text</code></td></tr><tr><td align="center"><code>font.size</code></td><td align="center"><code><float></code></td><td align="center"><code>14.0</code></td><td>The font size to be used for the <code>text</code></td></tr><tr><td align="center"><code>string</code></td><td align="center"><code><string></code></td><td align="center"></td><td>Sets the text to the specified string</td></tr><tr><td align="center"><code>width</code></td><td align="center"><code><positive_integer></code> or <code>dynamic</code></td><td align="center"><code>dynamic</code></td><td>Makes the <code>text</code> use a fixed <code>width</code> given in points</td></tr><tr><td align="center"><code>align</code></td><td align="center"><code>center</code>, <code>left</code>, <code>right</code></td><td align="center"><code>left</code></td><td>Aligns the <code>text</code> in its container when it has a fixed <code>width</code> larger than the content width</td></tr><tr><td align="center"><code>background.<background_property></code></td><td align="center"></td><td align="center"></td><td>Texts support all <code>background</code> properties</td></tr><tr><td align="center"><code>shadow.<shadow_property></code></td><td align="center"></td><td align="center"></td><td>Texts support all <code>shadow</code> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="background-properties">Background properties<a class="hash-link" href="#background-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><background_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the <code>background</code> should be rendered</td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0x00000000</code></td><td>Fill color of the <code>background</code></td></tr><tr><td align="center"><code>border_color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0x00000000</code></td><td>Color of the backgrounds border</td></tr><tr><td align="center"><code>border_width</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Width of the background border</td></tr><tr><td align="center"><code>height</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Overrides the <code>height</code> of the background</td></tr><tr><td align="center"><code>corner_radius</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>0</code></td><td>Corner radius of the background</td></tr><tr><td align="center"><code>padding_left</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the left of the <code>background</code></td></tr><tr><td align="center"><code>padding_right</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Padding to the right of the <code>background</code></td></tr><tr><td align="center"><code>y_offset</code></td><td align="center"><code><integer></code></td><td align="center"><code>0</code></td><td>Vertical offset applied to the <code>background</code></td></tr><tr><td align="center"><code>clip</code></td><td align="center"><code><float></code></td><td align="center"><code>0.0</code></td><td>By how much the background clips the bar (i.e. transparent holes in the bar)</td></tr><tr><td align="center"><code>image</code></td><td align="center"><code><path></code>, <code>app.<bundle-id></code></td><td align="center"></td><td>The path to a png or jpeg image file, or a bundle identifier of an application</td></tr><tr><td align="center"><code>image.<image_property></code></td><td align="center"></td><td align="center"></td><td>Backgrounds support all <code>image</code> properties</td></tr><tr><td align="center"><code>shadow.<shadow_property></code></td><td align="center"></td><td align="center"></td><td>Backgrounds support all <code>shadow</code> properties</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="image-properties">Image properties<a class="hash-link" href="#image-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><image_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the image should draw</td></tr><tr><td align="center"><code>scale</code></td><td align="center"><code><float></code></td><td align="center"><code>1.0</code></td><td>The scale factor that should be applied to the image</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="shadow-properties">Shadow properties<a class="hash-link" href="#shadow-properties" title="Direct link to heading"></a></h3><table><thead><tr><th align="center"><shadow_property<!-- -->></th><th align="center"><value<!-- -->></th><th align="center">default</th><th>description</th></tr></thead><tbody><tr><td align="center"><code>drawing</code></td><td align="center"><code><boolean></code></td><td align="center"><code>off</code></td><td>If the shadow should be drawn</td></tr><tr><td align="center"><code>color</code></td><td align="center"><code><argb_hex></code></td><td align="center"><code>0xff000000</code></td><td>Color of the shadow</td></tr><tr><td align="center"><code>angle</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>30</code></td><td>Angle of the shadow</td></tr><tr><td align="center"><code>distance</code></td><td align="center"><code><positive_integer></code></td><td align="center"><code>5</code></td><td>Distance of the shadow</td></tr></tbody></table><h3 class="anchor anchorWithStickyNavbar_LWe7" id="changing-the-default-values-for-all-further-items">Changing the default values for all further items<a class="hash-link" href="#changing-the-default-values-for-all-further-items" title="Direct link to heading"></a></h3><p>It is possible to change the <em>defaults</em> at every point in the configuration. All item created <em>after</em> changing the defaults will
|
||
inherit these properties from the default item.</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --default </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">property</span><span class="token operator" style="color:rgb(137, 221, 255)">>=</span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">value</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>this works for all item properties.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="item-reordering">Item Reordering<a class="hash-link" href="#item-reordering" title="Direct link to heading"></a></h3><p>It is possible to reorder items by invoking</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --reorder </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">..</span><span class="token plain">. </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>where a new order can be supplied for arbitrary items. Only the specified items get reordered, by swapping them around, everything else stays the same. E.g. if you want to swap two items
|
||
simply call</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --reorder </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">item </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">1</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">item </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="moving-items-to-specific-positions">Moving Items to specific positions<a class="hash-link" href="#moving-items-to-specific-positions" title="Direct link to heading"></a></h3><p>It is possible to move items and order them next to a reference item.</p><p>Move Item <code><name></code> to appear <em>before</em> item <code><reference name></code>:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --move </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> before </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">reference name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Move Item <code><name></code> to appear <em>after</em> item <code><reference name></code>:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --move </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> after </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">reference name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="item-cloning">Item Cloning<a class="hash-link" href="#item-cloning" title="Direct link to heading"></a></h3><p>It is possible to clone another item instead of adding a completely blank item</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --clone </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">parent name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">optional: before/after</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>the new item will inherit <em>all</em> properties of the parent item. The optional <em>before</em> and <em>after</em> modifiers can be used
|
||
to move the item <em>before</em>, or <em>after</em> the parent, equivalently to a --move command.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="renaming-items">Renaming Items<a class="hash-link" href="#renaming-items" title="Direct link to heading"></a></h3><p>It is possible to rename any item. The new name should obviously not be in use by another item:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --rename </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">old name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">new name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h3 class="anchor anchorWithStickyNavbar_LWe7" id="removing-items">Removing Items<a class="hash-link" href="#removing-items" title="Direct link to heading"></a></h3><p>It is possible to remove any item by invoking, the item will be completely destroyed and removed from brackets </p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain">sketchybar --remove </span><span class="token operator" style="color:rgb(137, 221, 255)"><</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>the <code><name></code> can again be a regex: <code>/<regex>/</code>.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/SketchyBar/config/bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Bar Properties</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/SketchyBar/config/components"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Special Components</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#items-and-their-properties" class="table-of-contents__link toc-highlight">Items and their properties</a><ul><li><a href="#adding-items-to-sketchybar" class="table-of-contents__link toc-highlight">Adding items to SketchyBar</a></li><li><a href="#changing-item-properties" class="table-of-contents__link toc-highlight">Changing item properties</a></li><li><a href="#geometry-properties" class="table-of-contents__link toc-highlight">Geometry Properties</a></li><li><a href="#icon-properties" class="table-of-contents__link toc-highlight">Icon properties</a></li><li><a href="#label-properties" class="table-of-contents__link toc-highlight">Label properties</a></li><li><a href="#scripting-properties" class="table-of-contents__link toc-highlight">Scripting properties</a></li><li><a href="#text-properties" class="table-of-contents__link toc-highlight">Text properties</a></li><li><a href="#background-properties" class="table-of-contents__link toc-highlight">Background properties</a></li><li><a href="#image-properties" class="table-of-contents__link toc-highlight">Image properties</a></li><li><a href="#shadow-properties" class="table-of-contents__link toc-highlight">Shadow properties</a></li><li><a href="#changing-the-default-values-for-all-further-items" class="table-of-contents__link toc-highlight">Changing the default values for all further items</a></li><li><a href="#item-reordering" class="table-of-contents__link toc-highlight">Item Reordering</a></li><li><a href="#moving-items-to-specific-positions" class="table-of-contents__link toc-highlight">Moving Items to specific positions</a></li><li><a href="#item-cloning" class="table-of-contents__link toc-highlight">Item Cloning</a></li><li><a href="#renaming-items" class="table-of-contents__link toc-highlight">Renaming Items</a></li><li><a href="#removing-items" class="table-of-contents__link toc-highlight">Removing Items</a></li></ul></li></ul></div></div></div></div></main></div></div></div>
|
||
<script src="/SketchyBar/assets/js/runtime~main.4182e1ba.js"></script>
|
||
<script src="/SketchyBar/assets/js/main.b951478f.js"></script>
|
||
</body>
|
||
</html> |