Lists

Lists can be ordered or unordered, and you can customize their bullet styles too.

A simple list can be made up just of hard-coded strings, like this:

List {
    "This is a list item"
    "So is this"
    "And this"
}

This is a list item
So is this
And this

Alternatively, you can pass in an array like this:

List(User.examples) { user in
    user.name
}

Taylor Swift
Adele Adkins
Tim Cook

Lists are unordered by default. Use the listStyle() modifier to change that:

List {
    "This is the first list item"
    "This is the second one"
    "And here's one more"
}
.listStyle(.ordered)

This is the first list item
This is the second one
And here's one more

You can customize the bullet style by adjusting the list style. For example, here are Roman numerals:

List {
    "Veni"
    "Vidi"
    "Vici"
}
.listStyle(.ordered(.lowerRoman))

Veni
Vidi
Vici

And here is a custom style using emoji:

List {
    "The players gonna play"
    "Haters gonna hate"
    "Fakers gonna fake"
}
.listMarkerStyle(.custom("💃"))

The players gonna play
Haters gonna hate
Fakers gonna fake

List Styles

Lists can be styled in different ways using the listStyle() modifier:

List {
    "Default list item"
    "Another default item"
}

Default list item
Another default item

List {
    "Plain list item"
    "Another plain list item"
}
.listStyle(.plain)

Plain list item
Another plain list item

List {
    "Group list item"
    "Another group item"
        .badge(Badge("1").role(.primary))
}
.listStyle(.group)

Group list item
Another group item1

List {
    "Horizontal group item"
    "Another horizontal item"
}
.listStyle(.horizontalGroup)

Horizontal group item
Another Horizontal item

List Items

When using List with listStyle(.group), you can add roles via ListItem:

List {
    ForEach(Role.standardRoles) { role in
        ListItem { 
            "A simple \(role.rawValue) list group item" 
        }
        .role(role)
    }
}
.listStyle(.group)

A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item