Builtin Intrinsic Elements

These are just Gtk widgets which can be used without explicitly importing. For example <box /> and <Gtk.Box /> are exactly the same thing.

Gtk4

box

Gtk.Box

<box orientation={Gtk.Orientation.HORIZONTAL}>
  <Child />
  <Child />
  <Child />
</box>

button

Gtk.Button

<button onClicked={() => print("clicked")}>
  <Child />
</button>

centerbox

Gtk.CenterBox

<centerbox orientation={Gtk.Orientation.HORIZONTAL}>
  <Child $type="start" />
  <Child $type="center" />
  <Child $type="end" />
</centerbox>

drawingarea

Gtk.DrawingArea

<drawingarea
  $={(self) =>
    self.set_draw_func((area, cr, width, height) => {
      //
    })
  }
/>

entry

Gtk.Entry

<entry
  placeholderText="Start typing..."
  text=""
  onNotifyText={({ text }) => print(text)}
/>

image

Gtk.Image

<image
  file="/path/to/file.png"
  iconName="system-search-symbolic"
  pixelSize={16}
/>

label

Gtk.Label

<label
  label="<span foreground='blue'>text</span>"
  useMarkup
  wrap
  ellipsize={Pango.EllipsizeMode.END}
/>

levelbar

Gtk.LevelBar

<levelbar
  orientation={Gtk.Orientation.HORIZONTAL}
  widthRequest={200}
  value={0.5}
/>

menubutton

Gtk.MenuButton

<menubutton>
  button content
  <popover>popover content</popover>
</menubutton>

overlay

Gtk.Overlay

<overlay>
  <Child />
  <Child $type="overlay" />
  <Child $type="overlay" />
</overlay>

revealer

Gtk.Revealer

<revealer
  transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
  revealChild={true}
  onNotifyChildRevealed={() => print("animation finished")}
>
  <Child />
</revealer>

scrolledwindow

Gtk.ScrolledWindow

<scrolledwindow maxContentHeight={500}>
  <Child />
</scrolledwindow>

slider

Astal.Slider

<slider
  value={0.5}
  min={0}
  max={1}
  onChangeValue={({ value }) => print(value)}
/>

stack

Gtk.Stack

<stack $={(self) => (self.visibleChildName = "child2")}>
  <Child $type="named" name="child1" />
  <Child $type="named" name="child2" />
</stack>

switch

Gtk.Switch

<switch active={true} onNotifyActive={({ active }) => print(active)} />

togglebutton

Gtk.ToggleButton

<togglebutton active={true} onToggled={({ active }) => print(active)} />

window

Astal.Window

<window
  visible
  namespace="bar"
  class="Bar"
  monitor={0}
  exclusivity={Astal.Exclusivity.EXCLUSIVE}
  keymode={Astal.Keymode.ON_DEMAND}
  anchor={
    Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT
  }
/>

Gtk3

box

Gtk.Box

<box orientation={Gtk.Orientation.HORIZONTAL}>
  <Child />
  <Child />
  <Child />
</box>

button

Gtk.Button

<button onClicked={() => print("clicked")}>
  <Child />
</button>

centerbox

Astal.CenterBox

<centerbox orientation={Gtk.Orientation.HORIZONTAL}>
  <Child $type="start" />
  <Child $type="center" />
  <Child $type="end" />
</centerbox>

circularprogress

Astal.CircularProgress

<circularprogress value={0.5} startAt={0.75} endAt={0.75}>
  <icon />
</circularprogress>

circularprogress {
  color: green;
  background-color: black;
  font-size: 6px;
  margin: 2px;
  min-width: 32px;
}

drawingarea

Gtk.DrawingArea

<drawingarea
  onDraw={(self, cr) => {
    //
  }}
/>

entry

Gtk.Entry

<entry
  onChanged={({ text }) => print("text changed", text)}
  onActivate={({ text }) => print("enter", text)}
/>

eventbox

Astal.EventBox

<eventbox
  onClick={(_, event) => {
    print(event.modifier, event.button)
  }}
/>

icon

Astal.Icon

<icon
  // named icon or path to a file
  icon="/path/to/file.png"
  icon="missing-symbolic"
/>

icon {
  font-size: 16px;
}

label

Astal.Label

<label label="hello" maxWidthChars={16} wrap />

levelbar

Astal.LevelBar

<levelbar value={0.5} widthRequest={200} />

overlay

Astal.Overlay

<overlay>
  <Child>child</Child>
  <Child>overlay 1</Child>
</overlay>

revealer

Gtk.Revealer

<revealer
  transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
  revealChild={true}
  onNotifyChildRevealed={() => print("animation finished")}
>
  <Child />
</revealer>

scrollable

Astal.Scrollable

<scrollable heightRequest={100}>
  <Child />
</scrollable>

slider

Astal.Slider

<slider widthRequest={100} onDragged={({ value }) => print(value)} />

stack

Astal.Stack

<stack $={(self) => (self.visibleChildName = "child2")}>
  <Child name="child1" />
  <Child name="child2" />
</stack>

switch

Gtk.Switch

<switch active={true} onNotifyActive={({ active }) => print(active)} />

overlay

Astal.Overlay

<overlay>
  <Child>child</Child>
  <Child>overlay 1</Child>
  <Child>overlay 1</Child>
</overlay>

togglebutton

Gtk.ToggleButton

<togglebutton active={true} onToggled={({ active }) => print(active)} />

window

Astal.Window

<window
  visible
  namespace="bar"
  class="Bar"
  monitor={0}
  exclusivity={Astal.Exclusivity.EXCLUSIVE}
  keymode={Astal.Keymode.ON_DEMAND}
  anchor={
    Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT
  }
/>