Styling

There are lots of ways you can style your page content; this page demonstrates some examples.

Here's an image with a fixed width and 50% opacity:

Image("/images/photos/dishwasher.jpg", description: "A dishwasher, and not a dog.")
    .resizable()
    .frame(width: 300)
    .opacity(0.5)

The following heading has a background color, foreground style, and inner shadow:

Text("Hello, world!")
    .font(.title2)
    .padding(20)
    .foregroundStyle(.white)
    .background(.indigo)
    .innerShadow(.black, radius: 20)

Hello, world!

The next heading has a tooltip – hover over it to see what it says:

Text {
    Span("Hover over me")
        .hint(markdown: "Why, *hello* there!")
}
.font(.title2)

Hover over me

Group {
    Text("This group is sticky. Try scrolling down!")

    Image("/images/photos/washing.jpg", description: "A laundry basket.")
        .resizable()
}
.position(.stickyTop)
.padding(.top, 80)

This group is sticky. Try scrolling down!

This space left intentionally blank.

The group on the right started in its original location, but when it reached the top it stuck there until you scrolled past the end of its section, at which point it scrolled again.

Text(markdown: "Get this in your own content using `.position(.stickyTop)`.")

Get this in your own content using .position(.stickyTop).

A note about margin and padding

One significant difference between SwiftUI and Ignite is the padding() modifier. On the web we distinguish between margin, which is the space between this element and the next one, and padding, which is space inside the element.

To see the difference in action, the heading below has no padding and 100 pixels of margins on all sides:

Text("Zero padding, lots of margin")
    .padding(.none)
    .margin(100)
    .background(.purple)
    .foregroundStyle(.white)

Zero padding, lots of margin

Notice how it's set away from surrounding context, but the purple background fits tightly around it.

In comparison, the heading below has 100 pixels of padding on all sides and no margins:

Text("Lots of padding, zero margin")
    .padding(100)
    .margin(.none)
    .background(.purple)
    .foregroundStyle(.white)

Lots of padding, zero margin

This time the heading has lots of purple space around it – the heading has had extra space added inside it, which is colored. However, it runs edge to edge otherwise; this text sits directly below it.

Although Ignite could easily have followed SwiftUI’s meaning of padding(), it would cause more problems than it solves because it wouldn’t match the way the web works.

Created with Ignite