Overview

Every view accepts a modifier prop. Import Modifier from onescript/views and build it by chaining calls, as in SwiftUI. Modifiers apply in call order.

This section covers modifiers that work without a specific parent layout. Layout-specific modifiers are documented with their corresponding layout.

Numeric dimensions in this section use points (pt).

import {
  Color, Font, Modifier, Shape, Text,
} from "onescript/views"

<Text
  modifier={Modifier
    .font(Font.body)
    .padding(12)
    .background(Color.systemGray6)
    .clipShape(Shape.rect(8))}
>
  Content
</Text>

Order

Each modifier applies to the result of the calls before it, so the same calls in a different order produce a different result:

import { Color, Modifier, Shape, Text, VStack } from "onescript/views"

<VStack spacing={12}>
  {/* The background includes the padding. */}
  <Text modifier={Modifier
    .padding(12)
    .background(Color.systemGray6)}>
    Padding inside
  </Text>
  {/* The padding is outside the background. */}
  <Text modifier={Modifier
    .background(Color.systemGray6)
    .padding(12)}>
    Padding outside
  </Text>
  {/* Clip after the background to round it. */}
  <Text modifier={Modifier
    .padding(12)
    .background(Color.systemGray6)
    .clipShape(Shape.rect(8))}>
    Rounded
  </Text>
</VStack>

Modifier is immutable: every call returns a new chain, and Modifier itself is the empty chain. Use append(other) to add a modifier received from a parent, or to add one conditionally. It is named append rather than then because objects with a then method are treated as promises by await.

import { Color, Font, Modifier, Shape, Text } from "onescript/views"

function Badge(props: { label: string, selected: boolean, modifier?: Modifier }) {
  return (
    <Text
      modifier={Modifier
        .font(Font.caption)
        .padding({ horizontal: 8, vertical: 4 })
        .append(props.selected ? Modifier.background(Color.blue) : Modifier)
        .clipShape(Shape.capsule)
        .append(props.modifier ?? Modifier)}
    >
      {props.label}
    </Text>
  )
}

modifier only accepts a Modifier from onescript/views; any other value throws a TypeError.

Layout and sizing

Modifier	Purpose
`padding`	Add space around content.
`frame`	Apply fixed or flexible dimensions.

Appearance and clipping

Modifier	Purpose
`background`	Draw a shape style behind the current result.
`clipShape`	Clip with a rectangle, circle, or capsule.
`clipped`	Clip drawing to the frame boundary.

Text and environment

Modifier	Purpose
`font`	Set an inheritable font.
`fontWeight`	Set an inheritable font weight.
`foregroundStyle`	Set an inheritable foreground shape style.
`italic`	Apply italic styling.
`lineLimit`	Limit how many lines text can use.
`disabled`	Disable controls in the view hierarchy.
`controlSize`	Set the preferred size of controls.
`buttonStyle`	Set the native style for descendant Buttons.

Lists and controls

Modifier	Purpose
`toggleStyle`	Set the native style for descendant Toggles.
`pickerStyle`	Set the native style for descendant Pickers.
`labelStyle`	Show the title, icon, or both of descendant Labels.
`progressViewStyle`	Set the native style for descendant ProgressViews.
`datePickerStyle`	Set the native style for descendant DatePickers.
`labelsHidden`	Hide the labels of controls.
`tag`	Mark the value a Picker option or List row represents.
`listStyle`	Set the native style for Lists.
`formStyle`	Set the native style for Forms.

Scaling

Modifier	Purpose
`scaledToFit`	Scale a view to fit its available space while preserving its aspect ratio.
`scaledToFill`	Scale a view to fill its available space while preserving its aspect ratio.

Modifier	Purpose
`toolbar`	Place items in the navigation bar or bottom bar.
`navigationTitle`	Set the page title.
`navigationBarTitleDisplayMode`	Set how the title is displayed.

Presentation

Modifier	Purpose
`sheet`	Slide a card up from the bottom.
`fullScreenCover`	Cover the whole screen.
`popover`	Show a bubble next to a view.
`alert`	Show an alert.
`confirmationDialog`	Show a set of actions to choose from.