gem-graph-client/docs/GTK-docs/gnome-dev-documentation/developer.gnome.org/hig/patterns/feedback.html

275 lines
16 KiB
HTML
Raw Normal View History

<!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="Notifications" href="feedback/notifications.html" /><link rel="prev" title="Overlaid Controls" href="controls/overlaid.html" />
<meta name="generator" content="sphinx-4.3.0, furo 2021.07.05.beta38"/>
<title>Feedback - 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 no-toc" 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 &amp; 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 &amp; 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 &amp; 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 has-children"><a class="reference internal" href="containers.html">Containers</a><input 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>
<li class="toctree-l3"><a class="reference internal" href="containers/windows.html">Windows</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/header-bars.html">Header Bars</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/popovers.html">Popovers</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/utility-panes.html">Utility Panes</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/boxed-lists.html">Boxed Lists</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/grid-views.html">Grid Views</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/list-column-views.html">List &amp; Column Views</a></li>
<li class="toctree-l3"><a class="reference internal" href="containers/selection-mode.html">Selection &amp; 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 current has-children current-page"><a class="current reference internal" href="#">Feedback</a><input checked="" 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 no-toc" for="__toc">
<i class="icon"><svg><use href="#svg-toc"></use></svg></i>
</label>
<section id="feedback">
<h1>Feedback<a class="headerlink" href="#feedback" title="Permalink to this headline"></a></h1>
<p>Feedback includes design patterns for showing information about events and status, as well as for prompting users for a response.</p>
<div class="toctree-wrapper compound">
</div>
<ul class="tiled-toc">
<li><a class="reference external image-reference" href="feedback/notifications.html"><img alt="../_images/feedback-notifications.svg" src="../_images/feedback-notifications.svg"/></a>
<p><a class="reference internal" href="feedback/notifications.html"><span class="doc">Notifications</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/toasts.html"><img alt="../_images/feedback-toasts.svg" src="../_images/feedback-toasts.svg"/></a>
<p><a class="reference internal" href="feedback/toasts.html"><span class="doc">Toasts</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/info-bars.html"><img alt="../_images/feedback-infobars.svg" src="../_images/feedback-infobars.svg"/></a>
<p><a class="reference internal" href="feedback/info-bars.html"><span class="doc">Info Bars</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/progress-bars.html"><img alt="../_images/feedback-progressbars.svg" src="../_images/feedback-progressbars.svg"/></a>
<p><a class="reference internal" href="feedback/progress-bars.html"><span class="doc">Progress Bars</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/spinners.html"><img alt="../_images/feedback-spinners.svg" src="../_images/feedback-spinners.svg"/></a>
<p><a class="reference internal" href="feedback/spinners.html"><span class="doc">Spinners</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/dialogs.html"><img alt="../_images/feedback-dialogs.svg" src="../_images/feedback-dialogs.svg"/></a>
<p><a class="reference internal" href="feedback/dialogs.html"><span class="doc">Dialogs</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/placeholders.html"><img alt="../_images/feedback-placeholders.svg" src="../_images/feedback-placeholders.svg"/></a>
<p><a class="reference internal" href="feedback/placeholders.html"><span class="doc">Placeholders</span></a></p>
</li>
<li><a class="reference external image-reference" href="feedback/tooltips.html"><img alt="../_images/feedback-tooltips.svg" src="../_images/feedback-tooltips.svg"/></a>
<p><a class="reference internal" href="feedback/tooltips.html"><span class="doc">Tooltips</span></a></p>
</li>
</ul>
</section>
</article>
<footer>
<div class="related-pages">
<a class="next-page" href="feedback/notifications.html">
<div class="page-info">
<div class="context">
<span>Next</span>
</div>
<div class="title">Notifications</div>
</div>
<svg><use href="#svg-arrow-right"></use></svg>
</a>
<a class="prev-page" href="controls/overlaid.html">
<svg><use href="#svg-arrow-right"></use></svg>
<div class="page-info">
<div class="context">
<span>Previous</span>
</div>
<div class="title">Overlaid Controls</div>
</div>
</a>
</div>
</footer>
</div>
<aside class="toc-drawer no-toc">
</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>