File: sidebar-lists.page

package info (click to toggle)
gnome-devel-docs 40.3-1
  • links: PTS, VCS
  • area: main
  • in suites: bookworm
  • size: 79,188 kB
  • sloc: javascript: 2,514; xml: 2,407; ansic: 2,229; python: 1,854; makefile: 805; sh: 499; cpp: 131
file content (67 lines) | stat: -rw-r--r-- 3,574 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="sidebar-lists" xml:lang="gl">

  <info>
    <link type="guide" xref="patterns#secondary"/>
    <desc>Navigation sidebar that contains a list</desc>
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Fran Dieguez</mal:name>
      <mal:email>frandieguez@gnome.org</mal:email>
      <mal:years>2019.</mal:years>
    </mal:credit>
  </info>

<title>Sidebar lists</title>

<media type="image" mime="image/svg" src="figures/patterns/sidebar-list.svg"/>

<p>A sidebar list allows different views to be switched between. Those views can contain groups of content items, single content items, or sets of controls. The sidebar divides the window in two, with content being shown on the opposite pane to the sidebar.</p>

<p>Sidebar lists can be used in primary windows, either as a permanent fixture or an element that is shown on demand. They can also be used in dialog windows.</p>

<p>Sidebar lists can be used in conjunction with the <link xref="search">search</link> and <link xref="selection-mode">selection mode</link> design patterns.</p>

<section id="when-to-use">
<title>Cando usala</title>

<p>Use a sidebar list when it is necessary to expose a larger number of views than can be accommodated by a standard <link xref="view-switchers">view switcher</link>.</p>

<p>Sidebar lists also provide a possible alternative to browser-style navigation. They have a number of advantages here:</p>

<list>
<item><p>When content items have a narrow width, and don’t require an immersive experience. A sidebar would be inappropriate for browsing videos for this reason, but is well-suited to contacts.</p></item>
<item><p>When content items are dynamic. For messaging applications, where new content items appear or old ones are updated, a sidebar list provides the ability for someone to view one item while simultaneously being aware of updates to the overall message list.</p></item>
<item><p>When it is possible to filter a collection of content, and there are a large number of filters.</p></item>
</list>

<p>Temporary sidebar lists can also be displayed for particular views in your application.</p>

</section>

<section id="guidelines">
<title>Liñas de guía</title>

<list>
<item><p>Order the list according to what is most useful for the users of your application. It is often best to place recently updated items at the top of the list.</p></item>
<item><p>Header bar controls which affect the sidebar list should be placed within the list pane section of the header bar. Controls for search and selection should be found above the list.</p></item>
<item><p>Each list row can include multiple lines of text, as well as images. However, be careful to ensure that the most important information is not lost, and work to ensure a clean and attractive appearance.</p></item>
</list>

</section>

<section id="api-reference">
<title>Referencia da API</title>
<list>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkListBox.html">GtkListBox</link></p></item>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkScrolledWindow.html">GtkScrolledWindow</link></p></item>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkStackSidebar.html">GtkStackSidebar</link></p></item>
</list>
</section>

</page>