292 lines
17 KiB
HTML
292 lines
17 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html class="no-js">
|
|||
|
|
<head><meta charset="utf-8"/>
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
|||
|
|
<meta name="color-scheme" content="light dark"><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
|||
|
|
<link rel="index" title="Index" href="../../genindex.html" /><link rel="search" title="Search" href="../../search.html" /><link rel="next" title="Boxed Lists" href="boxed-lists.html" /><link rel="prev" title="Popovers" href="popovers.html" />
|
|||
|
|
|
|||
|
|
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
|
|||
|
|
<title>Utility Panes - GNOME Human Interface Guidelines documentation</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/pygments.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/styles/furo-extensions.css" />
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../_static/gnome.css" />
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--color-code-background: #f8f8f8;
|
|||
|
|
--color-code-foreground: black;
|
|||
|
|
--color-brand-primary: #4a86cf;
|
|||
|
|
--color-brand-content: #4a86cf;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
@media (prefers-color-scheme: dark) {
|
|||
|
|
:root {
|
|||
|
|
--color-code-background: #202020;
|
|||
|
|
--color-code-foreground: #d0d0d0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* For allowing end-user-specific overrides */
|
|||
|
|
.override-light {
|
|||
|
|
--color-code-background: #f8f8f8;
|
|||
|
|
--color-code-foreground: black;
|
|||
|
|
--color-brand-primary: #4a86cf;
|
|||
|
|
--color-brand-content: #4a86cf;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.override-dark {
|
|||
|
|
--color-code-background: #202020;
|
|||
|
|
--color-code-foreground: #d0d0d0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style><link media="(prefers-color-scheme: dark)" rel="stylesheet" href="../../_static/pygments_dark.css"></head>
|
|||
|
|
<body dir="">
|
|||
|
|
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|||
|
|
<symbol id="svg-toc" viewBox="0 0 24 24">
|
|||
|
|
<title>Contents</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
|
|||
|
|
<path stroke="none" d="M0 0h24v24H0z"/>
|
|||
|
|
<line x1="4" y1="6" x2="20" y2="6" />
|
|||
|
|
<line x1="10" y1="12" x2="20" y2="12" />
|
|||
|
|
<line x1="6" y1="18" x2="20" y2="18" />
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
<symbol id="svg-menu" viewBox="0 0 24 24">
|
|||
|
|
<title>Menu</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|||
|
|
class="feather feather-menu">
|
|||
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|||
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|||
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
<symbol id="svg-arrow-right" viewBox="0 0 24 24">
|
|||
|
|
<title>Expand</title>
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|||
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|||
|
|
class="feather feather-chevron-right">
|
|||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
</symbol>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
|
|||
|
|
<input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
|
|||
|
|
<label class="overlay sidebar-overlay" for="__navigation"></label>
|
|||
|
|
<label class="overlay toc-overlay" for="__toc"></label>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="page">
|
|||
|
|
<header class="mobile-header">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<label class="nav-overlay-icon" for="__navigation">
|
|||
|
|
<i class="icon"><svg><use href="#svg-menu"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-center">
|
|||
|
|
<a href="../../index.html"><div class="brand">GNOME Human Interface Guidelines</div></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-right">
|
|||
|
|
<label class="toc-overlay-icon toc-header-icon" for="__toc">
|
|||
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<aside class="sidebar-drawer">
|
|||
|
|
<div class="sidebar-container">
|
|||
|
|
|
|||
|
|
<div class="sidebar-sticky"><a class="sidebar-brand centered" href="../../index.html">
|
|||
|
|
|
|||
|
|
<div class="sidebar-logo-container">
|
|||
|
|
<img class="sidebar-logo" src="../../_static/logo.svg" alt="Logo"/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<span class="sidebar-brand-text">GNOME Human Interface Guidelines</span>
|
|||
|
|
|
|||
|
|
</a><form class="sidebar-search-container" method="get" action="../../search.html">
|
|||
|
|
<input class="sidebar-search" placeholder=Search name="q">
|
|||
|
|
<input type="hidden" name="check_keywords" value="yes">
|
|||
|
|
<input type="hidden" name="area" value="default">
|
|||
|
|
</form><div class="sidebar-scroll"><div class="sidebar-tree">
|
|||
|
|
<ul class="current">
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="../../principles.html">Design Principles</a></li>
|
|||
|
|
<li class="toctree-l1"><a class="reference internal" href="../../resources.html">Tools & Resources</a></li>
|
|||
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../guidelines.html">Guidelines</a><input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox"/><label for="toctree-checkbox-1"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-naming.html">App Naming</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/app-icons.html">App Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/pointer-touch.html">Pointer & Touch</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/keyboard.html">Keyboard</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-icons.html">UI Icons</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/ui-styling.html">UI Styling</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/writing-style.html">Writing Style</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/typography.html">Typography</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/navigation.html">Navigation</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/adaptive.html">Scaling & Adaptiveness</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../guidelines/accessibility.html">Accessibility</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l1 current has-children"><a class="reference internal" href="../../patterns.html">Patterns</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox"/><label for="toctree-checkbox-2"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|||
|
|
<li class="toctree-l2 current has-children"><a class="reference internal" href="../containers.html">Containers</a><input checked="" class="toctree-checkbox" id="toctree-checkbox-3" name="toctree-checkbox-3" type="checkbox"/><label for="toctree-checkbox-3"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul class="current">
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="windows.html">Windows</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="header-bars.html">Header Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="popovers.html">Popovers</a></li>
|
|||
|
|
<li class="toctree-l3 current current-page"><a class="current reference internal" href="#">Utility Panes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="boxed-lists.html">Boxed Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="grid-views.html">Grid Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="list-column-views.html">List & Column Views</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="selection-mode.html">Selection & Edit Modes</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../nav.html">Navigation</a><input class="toctree-checkbox" id="toctree-checkbox-4" name="toctree-checkbox-4" type="checkbox"/><label for="toctree-checkbox-4"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/browsing.html">Browsing</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/view-switchers.html">View Switchers</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/tabs.html">Tabs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/sidebars.html">Sidebars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../nav/search.html">Search</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../controls.html">Controls</a><input class="toctree-checkbox" id="toctree-checkbox-5" name="toctree-checkbox-5" type="checkbox"/><label for="toctree-checkbox-5"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/buttons.html">Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/menus.html">Menus</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/switches.html">Switches</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/text-fields.html">Text Fields</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/checkboxes.html">Checkboxes</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/radio-buttons.html">Radio Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/drop-downs.html">Drop-Down Lists</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/sliders.html">Sliders</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/spin-buttons.html">Spin Buttons</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../controls/overlaid.html">Overlaid Controls</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l2 has-children"><a class="reference internal" href="../feedback.html">Feedback</a><input class="toctree-checkbox" id="toctree-checkbox-6" name="toctree-checkbox-6" type="checkbox"/><label for="toctree-checkbox-6"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/notifications.html">Notifications</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/toasts.html">Toasts</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/info-bars.html">Info Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/progress-bars.html">Progress Bars</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/spinners.html">Spinners</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/dialogs.html">Dialogs</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/placeholders.html">Placeholder Pages</a></li>
|
|||
|
|
<li class="toctree-l3"><a class="reference internal" href="../feedback/tooltips.html">Tooltips</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="toctree-l1 has-children"><a class="reference internal" href="../../reference.html">Reference</a><input class="toctree-checkbox" id="toctree-checkbox-7" name="toctree-checkbox-7" type="checkbox"/><label for="toctree-checkbox-7"><i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i></label><ul>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/keyboard.html">Standard Keyboard Shortcuts</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/palette.html">Palette</a></li>
|
|||
|
|
<li class="toctree-l2"><a class="reference internal" href="../../reference/backgrounds.html">Backgrounds</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
<main class="main">
|
|||
|
|
<div class="content">
|
|||
|
|
<article role="main">
|
|||
|
|
<label class="toc-overlay-icon toc-content-icon" for="__toc">
|
|||
|
|
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
|
|||
|
|
</label>
|
|||
|
|
<section id="utility-panes">
|
|||
|
|
<h1>Utility Panes<a class="headerlink" href="#utility-panes" title="Permalink to this headline">¶</a></h1>
|
|||
|
|
<img alt="../../_images/adaptive-utility-pane-wide.png" class="light" src="../../_images/adaptive-utility-pane-wide.png"/>
|
|||
|
|
<img alt="../../_images/adaptive-utility-pane-wide-dark.png" class="dark" src="../../_images/adaptive-utility-pane-wide-dark.png"/>
|
|||
|
|
<p>Utility panes are vertical panels which are shown on one side of a window. They have some similarities with <a class="reference internal" href="../nav/sidebars.html"><span class="doc">sidebars</span></a>, but play a different role and have a unique behavior.</p>
|
|||
|
|
<section id="when-to-use">
|
|||
|
|
<h2>When to Use<a class="headerlink" href="#when-to-use" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>Use a utility pane to display additional controls, locations or information alongside the main window view. The content of the utility pane should be relevant to the main view, and can include things like a tools palette, browser history, spell checking results, or document metadata.</p>
|
|||
|
|
<p><a class="reference internal" href="popovers.html"><span class="doc">Popovers</span></a> are an alternative to utility panes which can be considered.</p>
|
|||
|
|
</section>
|
|||
|
|
<section id="guidelines">
|
|||
|
|
<h2>Guidelines<a class="headerlink" href="#guidelines" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p>Utility panes can appear on the left or right side of the window. To decide on a position, follow the visual and functional hierarchy of the window: if the pane affects the main view, place it on the left. If it is subordinate to the main view, place it on the right.</p></li>
|
|||
|
|
<li><p>Utility panes can be permanent or transient. When transient, utility pane visibility can be toggled by the user, or panes can be shown when particular features are in use.</p></li>
|
|||
|
|
<li><p>Unlike sidebars, utility panes do not intersect the header bar.</p></li>
|
|||
|
|
<li><p>To support <a class="reference internal" href="../../guidelines/adaptive.html"><span class="doc">adaptive scaling</span></a>, ensure that a utility pane will overlap the main view when there isn’t available width to show it alongside. This can be achieved with a flap widget.</p></li>
|
|||
|
|
<li><p>If utility pane visibility can be toggled, assign the F9 key as a shortcut.</p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
<section id="api-reference">
|
|||
|
|
<h2>API Reference<a class="headerlink" href="#api-reference" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<ul class="simple">
|
|||
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Flap.html">Adwaita: AdwFlap</a></p></li>
|
|||
|
|
<li><p><a class="reference external" href="https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Flap.html">Handy: HdyFlap</a></p></li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</article>
|
|||
|
|
<footer>
|
|||
|
|
|
|||
|
|
<div class="related-pages">
|
|||
|
|
<a class="next-page" href="boxed-lists.html">
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Next</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="title">Boxed Lists</div>
|
|||
|
|
</div>
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
</a>
|
|||
|
|
<a class="prev-page" href="popovers.html">
|
|||
|
|
<svg><use href="#svg-arrow-right"></use></svg>
|
|||
|
|
<div class="page-info">
|
|||
|
|
<div class="context">
|
|||
|
|
<span>Previous</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="title">Popovers</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
<aside class="toc-drawer">
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="toc-sticky toc-scroll">
|
|||
|
|
<div class="toc-title-container">
|
|||
|
|
<span class="toc-title">
|
|||
|
|
Contents
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="toc-tree-container">
|
|||
|
|
<div class="toc-tree">
|
|||
|
|
<ul>
|
|||
|
|
<li><a class="reference internal" href="#">Utility Panes</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#when-to-use">When to Use</a></li>
|
|||
|
|
<li><a class="reference internal" href="#guidelines">Guidelines</a></li>
|
|||
|
|
<li><a class="reference internal" href="#api-reference">API Reference</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
</main>
|
|||
|
|
</div><script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
|
|||
|
|
<script src="../../_static/jquery.js"></script>
|
|||
|
|
<script src="../../_static/underscore.js"></script>
|
|||
|
|
<script src="../../_static/doctools.js"></script>
|
|||
|
|
<script src="../../_static/scripts/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|