ActionRowPrefix | "ActionRowPrefix" | Place child as a prefix (left side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow. Example <AdwActionRow title="Setting"> <x.ActionRowPrefix> <GtkCheckButton /> </x.ActionRowPrefix> </AdwActionRow> | jsx.ts:672 |
ActionRowSuffix | "ActionRowSuffix" | Place child as a suffix (right side) of AdwActionRow, AdwEntryRow, or AdwExpanderRow. Example <AdwActionRow title="Setting"> <x.ActionRowSuffix> <GtkButton iconName="go-next-symbolic" /> </x.ActionRowSuffix> </AdwActionRow> | jsx.ts:686 |
AlertDialogResponse | "AlertDialogResponse" | A response button for an AdwAlertDialog. Example <AdwAlertDialog heading="Delete File?" body="This cannot be undone." defaultResponse="cancel" closeResponse="cancel" > <x.AlertDialogResponse id="cancel" label="Cancel" /> <x.AlertDialogResponse id="delete" label="Delete" appearance={Adw.ResponseAppearance.DESTRUCTIVE} /> </AdwAlertDialog> | jsx.ts:874 |
Animation | "Animation" | Declarative animation wrapper using Adw.TimedAnimation or Adw.SpringAnimation. Provides framer-motion-inspired API for animating child widgets. Example <x.Animation mode="spring" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} animateOnMount > <GtkButton label="Animated Button" /> </x.Animation> | jsx.ts:982 |
ExpanderRowAction | "ExpanderRowAction" | Action widget container for AdwExpanderRow header. Example <AdwExpanderRow title="Group"> <ExpanderRow.Action> <GtkButton iconName="emblem-system-symbolic" /> </ExpanderRow.Action> </AdwExpanderRow> | jsx.ts:903 |
ExpanderRowRow | "ExpanderRowRow" | Nested rows container for AdwExpanderRow. Example <AdwExpanderRow title="Settings"> <ExpanderRow.Row> <AdwActionRow title="Option 1" /> <AdwActionRow title="Option 2" /> </ExpanderRow.Row> </AdwExpanderRow> | jsx.ts:889 |
FixedChild | "FixedChild" | Element type for positioning children within a GtkFixed. Example <GtkFixed> <x.FixedChild x={20} y={30}> <GtkLabel label="Positioned at (20, 30)" /> </x.FixedChild> </GtkFixed> | jsx.ts:538 |
GridChild | "GridChild" | Element type for positioning children within a GtkGrid. Example <GtkGrid> <x.GridChild column={0} row={0}> <GtkLabel label="Top Left" /> </x.GridChild> </GtkGrid> | jsx.ts:524 |
ListItem | "ListItem" | Element type for items in a ListView or GridView. Example <x.ListView renderItem={(item) => <GtkLabel label={item.name} />}> <x.ListItem id="1" value={{ name: "Item 1" }} /> </x.ListView> | jsx.ts:569 |
MenuItem | "MenuItem" | A clickable menu item with action. Example <GtkMenuButton> <x.MenuItem id="open" label="Open" onActivate={handleOpen} /> </GtkMenuButton> | jsx.ts:769 |
MenuSection | "MenuSection" | A section grouping related menu items. Example <GtkMenuButton> <x.MenuSection label="File"> <x.MenuItem id="open" label="Open" onActivate={handleOpen} /> </x.MenuSection> </GtkMenuButton> | jsx.ts:783 |
MenuSubmenu | "MenuSubmenu" | A submenu containing nested items. Example <GtkMenuButton> <x.MenuSubmenu label="Export"> <x.MenuItem id="pdf" label="As PDF" onActivate={exportPdf} /> </x.MenuSubmenu> </GtkMenuButton> | jsx.ts:797 |
NavigationPage | "NavigationPage" | Type-safe page component for AdwNavigationView or AdwNavigationSplitView. The for prop is required and determines valid id values: - AdwNavigationView: any string (page tags for navigation history) - AdwNavigationSplitView: "content" or "sidebar" (slot positions) Example `// In NavigationView - id can be any string <AdwNavigationView history={["home"]}> <x.NavigationPage for={AdwNavigationView} id="home" title="Home"> </x.NavigationPage> // In NavigationSplitView - id is narrowed to "content" | "sidebar" <x.NavigationPage for={AdwNavigationSplitView} id="sidebar" title="Sidebar"> </x.NavigationPage> <x.NavigationPage for={AdwNavigationSplitView} id="content" title="Content"> </x.NavigationPage> ` |
NotebookPage | "NotebookPage" | Element type for a page within a GtkNotebook (tabbed interface). Example <GtkNotebook> <x.NotebookPage label="Tab 1"> <GtkLabel label="Content 1" /> </x.NotebookPage> </GtkNotebook> | jsx.ts:552 |
NotebookPageTab | "NotebookPageTab" | Element type for a custom widget as the page tab label. | jsx.ts:557 |
OverlayChild | "OverlayChild" | Element type for overlay children positioned above the main content. Example <GtkOverlay> <GtkImage file="background.png" /> <x.OverlayChild> <GtkLabel label="Overlaid text" /> </x.OverlayChild> </GtkOverlay> | jsx.ts:757 |
PackEnd | "PackEnd" | Place child at the end (right in LTR) of HeaderBar or ActionBar. Example <GtkHeaderBar> <x.PackEnd> <GtkMenuButton /> </x.PackEnd> </GtkHeaderBar> | jsx.ts:714 |
PackStart | "PackStart" | Place child at the start (left in LTR) of HeaderBar or ActionBar. Example <GtkHeaderBar> <x.PackStart> <GtkButton label="Back" /> </x.PackStart> </GtkHeaderBar> | jsx.ts:700 |
Shortcut | "Shortcut" | A keyboard shortcut definition. Must be a child of x.ShortcutController. Example <x.Shortcut trigger="<Control>s" onActivate={save} /> <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} /> <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} /> | jsx.ts:963 |
ShortcutController | "GtkShortcutController" | Declarative keyboard shortcut controller. Attach keyboard shortcuts to a widget. Must contain x.Shortcut children. Example <GtkBox> <GtkShortcutController scope={Gtk.ShortcutScope.GLOBAL}> <x.Shortcut trigger="<Control>f" onActivate={() => setSearchMode(s => !s)} /> <x.Shortcut trigger="<Control>q" onActivate={quit} /> </GtkShortcutController> </GtkBox> | jsx.ts:949 |
SimpleListItem | "SimpleListItem" | Element type for simple string-based list items. Example <GtkDropDown> <x.SimpleListItem id="opt1" value="Option 1" /> </GtkDropDown> | jsx.ts:595 |
StackPage | "StackPage" | Element type for pages within a GtkStack or AdwViewStack. Example <GtkStack page="page1"> <x.StackPage id="page1" title="First Page"> <GtkLabel label="Content 1" /> </x.StackPage> </GtkStack> | jsx.ts:510 |
TextAnchor | "TextAnchor" | Declarative anchor for embedding widgets in text flow. The anchor is placed at the current position in the text. Example <GtkTextView> Click here: <x.TextAnchor> <GtkButton label="Click me" /> </x.TextAnchor> to continue. </GtkTextView> | jsx.ts:829 |
TextPaintable | "TextPaintable" | Declarative inline paintable for embedding images/icons in text flow. The paintable is placed at the current position in the text. Example <GtkTextView> Click the icon <x.TextPaintable paintable={iconPaintable} /> to continue. </GtkTextView> | jsx.ts:843 |
TextTag | "TextTag" | Declarative text tag for styling text content. Wrap text content with a TextTag to apply styling. Tags can be nested. Example <GtkTextView> Normal <x.TextTag id="bold" weight={Pango.Weight.BOLD}> bold <x.TextTag id="red" foreground="red">and red</x.TextTag> </x.TextTag> text. </GtkTextView> | jsx.ts:813 |
Toggle | "Toggle" | A toggle button for an AdwToggleGroup. Example <AdwToggleGroup> <x.Toggle id="list" iconName="view-list-symbolic" /> <x.Toggle id="grid" iconName="view-grid-symbolic" /> </AdwToggleGroup> | jsx.ts:856 |
ToolbarBottom | "ToolbarBottom" | Place toolbar at the bottom of AdwToolbarView. Example <AdwToolbarView> <x.ToolbarBottom> <GtkActionBar /> </x.ToolbarBottom> </AdwToolbarView> | jsx.ts:742 |
ToolbarTop | "ToolbarTop" | Place toolbar at the top of AdwToolbarView. Example <AdwToolbarView> <x.ToolbarTop> <AdwHeaderBar /> </x.ToolbarTop> </AdwToolbarView> | jsx.ts:728 |
TreeListItem | "TreeListItem" | Element type for items in a TreeListView. Example <x.TreeListView renderItem={(item) => <GtkLabel label={item.name} />}> <x.TreeListItem id="parent" value={{ name: "Parent" }}> <x.TreeListItem id="child" value={{ name: "Child" }} /> </x.TreeListItem> </x.TreeListView> | jsx.ts:583 |
ColumnViewColumn() | (props) => ReactElement | Component for defining columns in a ColumnView (table widget). Example <GtkColumnView> <x.ColumnViewColumn id="name" title="Name" expand renderCell={(item) => <GtkLabel label={item?.name ?? ""} />} /> </GtkColumnView> | jsx.ts:612 |
GridView() | (props) => ReactElement | Virtualized grid component with custom item rendering. Example <x.GridView renderItem={(item) => <GtkImage iconName={item?.icon ?? ""} />}> <x.ListItem id="1" value={{ icon: "folder" }} /> </x.GridView> | jsx.ts:640 |
ListView() | (props) => ReactElement | Virtualized list component with custom item rendering. Example <x.ListView renderItem={(item) => <GtkLabel label={item?.name ?? ""} />}> <x.ListItem id="1" value={{ name: "Apple" }} /> </x.ListView> | jsx.ts:626 |
Slot() | (props) => ReactElement | Type-safe slot component for placing children in named widget slots. GTK widgets often have named slots for specific child positions (e.g., titleWidget, startWidget). This component provides type-safe access to those slots. Example <GtkHeaderBar> <x.Slot for={GtkHeaderBar} id="titleWidget"> <GtkLabel label="App Title" /> </x.Slot> </GtkHeaderBar> | jsx.ts:490 |
TreeListView() | (props) => ReactElement | Tree list component with hierarchical data and expand/collapse support. Example <x.TreeListView renderItem={(item, row) => <GtkLabel label={item.name} />}> <x.TreeListItem id="root" value={{ name: "Root" }}> <x.TreeListItem id="child" value={{ name: "Child" }} /> </x.TreeListItem> </x.TreeListView> | jsx.ts:656 |