Skip to main content

Variable: Notebook

const Notebook: "Notebook"

Defined in: react/src/generated/jsx.ts:14049

Switches between children using tabs.

There are many configuration options for GtkNotebook. Among other things, you can choose on which edge the tabs appear (see [method@Gtk.Notebook.set_tab_pos]), whether, if there are too many tabs to fit the notebook should be made bigger or scrolling arrows added (see [method@Gtk.Notebook.set_scrollable]), and whether there will be a popup menu allowing the users to switch pages. (see [method@Gtk.Notebook.popup_enable]).

GtkNotebook as GtkBuildable

The GtkNotebook implementation of the GtkBuildable interface supports placing children into tabs by specifying “tab” as the “type” attribute of a <child> element. Note that the content of the tab must be created before the tab can be filled. A tab child can be specified without specifying a <child> type attribute.

To add a child widget in the notebooks action area, specify "action-start" or “action-end” as the “type” attribute of the <child> element.

An example of a UI definition fragment with GtkNotebook:

<object class="GtkNotebook">
<child>
<object class="GtkLabel" id="notebook-content">
<property name="label">Content</property>
</object>
</child>
<child type="tab">
<object class="GtkLabel" id="notebook-tab">
<property name="label">Tab</property>
</object>
</child>
</object>

Shortcuts and Gestures

GtkNotebook supports the following keyboard shortcuts:

  • Shift+F10 or Menu opens the context menu.
  • Home moves the focus to the first tab.
  • End moves the focus to the last tab.

Additionally, the following signals have default keybindings:

Tabs support drag-and-drop between notebooks sharing the same group-name, or to new windows by handling the ::create-window signal.

Actions

GtkNotebook defines a set of built-in actions:

  • menu.popup opens the tabs context menu.

CSS nodes

notebook
├── header.top
│   ├── [<action widget>]
│   ├── tabs
│   │   ├── [arrow]
│   │   ├── tab
│   │   │   ╰── <tab label>
┊   ┊   ┊
│   │   ├── tab[.reorderable-page]
│   │   │   ╰── <tab label>
│   │   ╰── [arrow]
│   ╰── [<action widget>]
│
╰── stack
├── <child>
┊
╰── <child>

GtkNotebook has a main CSS node with name notebook, a subnode with name header and below that a subnode with name tabs which contains one subnode per tab with name tab.

If action widgets are present, their CSS nodes are placed next to the tabs node. If the notebook is scrollable, CSS nodes with name arrow are placed as first and last child of the tabs node.

The main node gets the .frame style class when the notebook has a border (see [method@Gtk.Notebook.set_show_border]).

The header node gets one of the style class .top, .bottom, .left or .right, depending on where the tabs are placed. For reorderable pages, the tab node gets the .reorderable-page class.

A tab node gets the .dnd style class while it is moved with drag-and-drop.

The nodes are always arranged from left-to-right, regardless of text direction.

Accessibility

GtkNotebook uses the following roles: