shaffex

Controls

alert

ZStack is a container that overlays its children, aligning them in both axes.

sheet

ZStack is a container that overlays its children, aligning them in both axes.

fullScreenCover

ZStack is a container that overlays its children, aligning them in both axes.

actionSheet

ZStack is a container that overlays its children, aligning them in both axes.

Effects

colorInvert

ZStack is a container that overlays its children, aligning them in both axes.

<body>
<vstack>
    <zstack>
        <rectangle foregroundColor="red"/>
        <text>RED color</text>
    </zstack>
    
    <zstack>
        <rectangle foregroundColor="red" colorInvert=""/>
        <text>Inverted RED color</text>
    </zstack>
</vstack>
</body>

Example

Layout

frame

ZStack is a container that overlays its children, aligning them in both axes.

Text

font

font modifier is used to set the font of text-based views (like Text, TextField, Label, etc.) in your SwiftUI views. You can specify the size, weight, and style of the font using this modifier. The font modifier can take various parameters, including predefined text styles (like .title, .body, .caption, etc.) that automatically adjust to the user’s preferred text size, or custom fonts where you specify the font name and size.

Examples

Predefined system fonts

<body>
<list>
  <section header="Predefined system fonts">
    <text font="largeTitle">largeTitle</text>
    <text font="title">title</text>
    <text font="title2">title2</text>
    <text font="title3">title3</text>
    <text font="headline">headline</text>
    <text font="subheadline">subheadline</text>
    <text font="body">body</text>
    <text font="callout">callout</text>
    <text font="caption">caption</text>
    <text font="caption2">caption2</text>
    <text font="footnote">footnote</text>
  </section>
</list>
</body>

Example

Font and colors

<body>
<list>
  <section header="Font and colors" footer="Various fonts with colors">
    <text foregroundColor="red" font="body">RED body</text>
    <text foregroundColor="green" font="caption2">GREEN caption2</text>
    <text foregroundColor="blue" font="largeTitle">BLUE largeTitle</text>
    <text foregroundColor="orange" font="custom:Courier;size:20">ORANGE Courier (20)</text>
  </section>
</list>
</body>

Example

System font with size and weight

<body>
<list>
  <section header="System font with size and weight" footer="System font is San Francisco Font">
    <text fontWeight="ultraLight">This is ultraLight text</text>
    <text font="size:30;weight:regular">This is regular text</text>
    <text font="size:30;weight:ultraLight">This is ultraLight text</text>
    <text font="size:30;weight:thin">This is thin text</text>
    <text font="size:30;weight:bold">This is bold text</text>
    <text font="size:30;weight:heavy">This is heavy text</text>
  </section>
</list>
</body>

Example

Custom font and size

<body>
<list>
  <section header="Custom font" footer="You can specify font name and font size&#13;Example:custom:Helvetica Neue,size:20">
    <text font="custom:System;size:20">System (30)</text>
    <text font="custom:Helvetica Neue;size:20">Helvetica Neue (20)</text>
    <text font="custom:Helvetica Neue;size:24">Helvetica Neue (24)</text>
    <text font="custom:Verdana Italic;size:32">Verdana Itali (32)</text>
    <text font="custom:Courier;size:20">Courier (20)</text>
    <text font="custom:Arial;size:30">Arial (30)</text>
    <text font="custom:Georgia;size:30">Georgia (30)</text>
    <text font="custom:Nonexisting font;size:30">Nonexisting font (30)</text>
  </section>
</list>
</body>

Example

navigationTitle

navigationTitle is a modifier that sets the title of the navigation bar for the current view. This title represents the current navigation state and is displayed prominently in the navigation interface.

Parameters:

title: A string that specifies the title to display in the navigation bar.

Parameters:

title The text displayed as the navigation bar’s title.

displayMode (optional) Determines the style of the navigation bar title. It can take the following values:

automatic Adopts the previous view’s display mode.
inline Displays a smaller, inline title suitable for secondary views.
large Shows a larger, more prominent title, typically used for top-level views.

Default value: automatic

Examples

<body>
<navigationstack>
	<text navigationTitle="My title">Content</text>
</navigationstack>
</body>

Example

<body>
<navigationstack>
	<zstack navigationTitleDisplayMode="inline" navigationTitle="Inline navigation title">
	<color xignoresSafeArea="">green</color>
	<text font="largeTitle">Content</text>
	</zstack>
</navigationstack>
</body>

Example

<body>
<navigationstack>
	<zstack navigationTitleDisplayMode="large" navigationTitle="Large navigation title">
	<color xignoresSafeArea="">green</color>
	<text font="largeTitle">Content</text>
	</zstack>
</navigationstack>
</body>

Example

navigationBarTitleDisplayMode

navigationBarTitleDisplayMode is a modifier that configures the display style of the navigation bar title for the current view. It determines how the title appears within the navigation interface.

Parameters:

displayMode (optional): Specifies the style of the navigation bar title. Possible values include:
- automatic: Inherits the display mode from the previous navigation item.
- inline: Displays a smaller, inline title suitable for secondary views.
- large: Shows a larger, more prominent title, typically used for top-level views.

Parameters:

displayMode (optional) Specifies the style of the navigation bar title.

automatic Inherits the display mode from the previous navigation item.
inline Displays a smaller, inline title suitable for secondary views.
large Shows a larger, more prominent title, typically used for top-level views.

Default value: automatic

Examples

<body>
<navigationstack>
	<text navigationTitle="My title">Default display mode is auto</text>
</navigationstack>
</body>

Example

<body>
<navigationstack>
	<zstack navigationTitleDisplayMode="inline" navigationTitle="Inline navigation title">
	<color xignoresSafeArea="">green</color>
	<text>navigationTitleDisplayMode="inline"</text>
	</zstack>
</navigationstack>
</body>

Example

<body>
<navigationstack>
	<zstack navigationTitleDisplayMode="large" navigationTitle="Large navigation title">
	<color xignoresSafeArea="">green</color>
	<text>navigationTitleDisplayMode="large"</text>
	</zstack>
</navigationstack>
</body>

Example

shaffex

Controls

Effects

Layout

Text

Examples

Navigation Bar

Examples

Examples