Example Prototypes

On this page, you’ll find some examples of how you can use the iOS 13 Segmented Control component in your prototypes.

Current option

This simple demo shows how to get the control’s currently selected option.

The component has an event callback property: onValueChange(). A function passed to that property will be called every time the selected segment changes.

The example function below is simple: It just saves the current option in appState.currentOption …

import { Override, Data } from "framer"

const appState = Data({
    currentOption: null,
})

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            appState.currentOption = option
        },
    }
}

… which in turn will update the text of the text block:

export function CurrentOption(): Override {
    return {
        text: appState.currentOption,
    }
}

Current index

The onValueChange() callback is always called with two parameters: option (as used above), but also index, the number of the selected tab.

Depending on what you want to accomplish, you can use one or the other.

import { Override, Data } from "framer"

const appState = Data({
    currentIndex: null,
})

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            appState.currentIndex = index
        },
    }
}

export function CurrentIndex(): Override {
    return {
        text: appState.currentIndex,
    }
}

Properties demo

In this next prototype, three segmented controls are used to change the properties of the fourth segmented control at the bottom.

As a reminder, these are this component’s properties:

And here’s the code: There’s a data object, called appState, in which the current mode, options and currentIndex are saved:

import { Override, Data } from "framer"

const appState = Data({
    mode: true,
    options: ["Mango", "Lemon"],
    currentIndex: null,
})

Those values are passed to the bottom segmented control:

export function SegmentedControl(): Override {
    return {
        mode: appState.mode,
        options: appState.options,
        setCurrentBy: true,
        currentIndex: appState.currentIndex,
    }
}

(The setCurrentBy property is simply set to true because we’re changing the selection by index number.)

When the mode switches to Dark Mode, we want the frame under the segmented control to be dark as well. That happens with this override:

export function Background(): Override {
    return {
        background: appState.mode ? "#fff" : "#000",
    }
}

The frame’s background color will be white when appState.mode is true, and black when it’s not.

The three segmented controls at the top have overrides that use the onValueChange() callback property to update the corresponding values in appState.

1. Changing the mode

export function SetMode(): Override {
    return {
        onValueChange(option, index) {
            if (index === 0) {
                appState.mode = true
            } else {
                appState.mode = false
            }
        },
    }
}

2. Changing the options

export function SetOptions(): Override {
    return {
        onValueChange(option, index) {
            if (index === 0) {
                appState.options = ["Mango", "Lemon"]
            } else if (index === 1) {
                appState.options = ["Cherry", "Kiwi", "Banana"]
            } else {
                appState.options = ["🍒", "🥝", "🍌", "🥭", "🍋"]
            }
        },
    }
}

3. Changing the currentIndex

export function SetIndex(): Override {
    return {
        onValueChange(option, index) {
            appState.currentIndex = index
        },
    }
}

Maps

When switching to the Satellite view in Apple’s Maps app, the interface will transition to Dark Mode, even when your phone is currently in Light Mode.

The mode property of the segmented control is a Boolean, in which true stands for Light Mode, and false for Dark Mode.

There’s a data object with the current mode and the opacity values of the screens (which are just images):

import { Override, Data } from "framer"

const appState = Data({
    mode: true,
    opacityTransport: 0,
    opacitySatellite: 0,
})

(The first screen, Map, is placed underneath the other two, so it never needs to be hidden.)

Those opacity values are passed, in turn, to the animate property of the screens:

export function Transport(): Override {
    return {
        animate: { opacity: appState.opacityTransport },
        transition: { ease: "easeOut" },
    }
}
export function Satellite(): Override {
    return {
        animate: { opacity: appState.opacitySatellite },
        transition: { ease: "easeOut" },
    }
}

And then the screens are faded in or out depending on the current index of the segmented control:

export function SegmentedControl(): Override {
    return {
        mode: appState.mode,
        onValueChange(option, index) {
            appState.mode = true
            if (index === 0) {
                // Map
                appState.opacityTransport = 0
                appState.opacitySatellite = 0
            } else if (index === 1) {
                // Transport
                appState.opacityTransport = 1
                appState.opacitySatellite = 0
            } else if (index === 2) {
                // Satellite
                appState.opacitySatellite = 1
                appState.mode = false
            }
        },
    }
}

Note that in this same override the segmented control’s mode is bound to appState.mode, and that the mode will always be true, except when switching to the Satellite screen.

By the way, this prototype also uses the Status Bar component from Framer’s Example Kit.

This status bar switches between its light and dark style with an appearance property that expects a string: "dark" or "light".

So when appState.mode is true we pass it a "dark", and when it’s not, a "light":

export function StatusBar(): Override {
    return {
        appearance: appState.mode ? "dark" : "light",
    }
}

Steps

Next up: the Steps detail screen in the iPhone Health app.

We’re animating two things simultaneously: the number of steps above the chart and the chart itself. The steps count has a simple opacity animation, but the chart also has a width animation (scaleX) when fading in.

For the day, week, month, and year numbers, I used simple opacity values:

import { Override, Data } from "framer"

const appState = Data({
    opacityAmountDay: 1,
    opacityAmountWeek: 0,
    opacityAmountMonth: 0,
    opacityAmountYear: 0,
    variantChartDay: "visible",
    variantChartWeek: "hidden",
    variantChartMonth: "hidden",
    variantChartYear: "hidden",
})

… which I applied to the corresponding images (in an animate, so that they will fade in and out):

export function Amount_Day(): Override {
    return {
        animate: { opacity: appState.opacityAmountDay },
    }
}
export function Amount_Week(): Override {
    return {
        animate: { opacity: appState.opacityAmountWeek },
    }
}
export function Amount_Month(): Override {
    return {
        animate: { opacity: appState.opacityAmountMonth },
    }
}
export function Amount_Year(): Override {
    return {
        animate: { opacity: appState.opacityAmountYear },
    }
}

But the charts, on the other hand, have a variants animation…

import { Override, Data } from "framer"

const appState = Data({
    opacityAmountDay: 1,
    opacityAmountWeek: 0,
    opacityAmountMonth: 0,
    opacityAmountYear: 0,
    variantChartDay: "visible",
    variantChartWeek: "hidden",
    variantChartMonth: "hidden",
    variantChartYear: "hidden",
})

… with these variant labels:

const chartVariants = {
    hidden: { opacity: 0, scaleX: 1.2, transition: { duration: 0 } },
    visible: { opacity: 1, scaleX: 1 },
}

The animation to "hidden" has a duration of 0, so it happens instantly. It also makes the chart invisible (zero opacity) and a bit wider (a scaleX of 120%).

When animated to "visible", the chart will shrink back to its real size while fading in.

The charts each get the chartVariants object as their animation variants, and the current variant label to animate to (in variantChartDay, variantChartWeek, etc.).

export function Chart_Day(): Override {
    return {
        variants: chartVariants,
        animate: appState.variantChartDay,
    }
}
export function Chart_Week(): Override {
    return {
        variants: chartVariants,
        animate: appState.variantChartWeek,
    }
}
export function Chart_Month(): Override {
    return {
        variants: chartVariants,
        animate: appState.variantChartMonth,
    }
}
export function Chart_Year(): Override {
    return {
        variants: chartVariants,
        animate: appState.variantChartYear,
    }
}

When the selection of the segmented control changes, I first hide all numbers and charts:

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            // Hide all numbers
            appState.opacityAmountDay = 0
            appState.opacityAmountWeek = 0
            appState.opacityAmountMonth = 0
            appState.opacityAmountYear = 0

            // Hide all charts
            appState.variantChartDay = "hidden"
            appState.variantChartWeek = "hidden"
            appState.variantChartMonth = "hidden"
            appState.variantChartYear = "hidden"

            if (index === 0) {
                appState.opacityAmountDay = 1
                appState.variantChartDay = "visible"
            } else if (index === 1) {
                appState.opacityAmountWeek = 1
                appState.variantChartWeek = "visible"
            } else if (index === 2) {
                appState.opacityAmountMonth = 1
                appState.variantChartMonth = "visible"
            } else if (index === 3) {
                appState.opacityAmountYear = 1
                appState.variantChartYear = "visible"
            }
        },
    }
}

… but directly after that, I show the correct amount and chart:

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            // Hide all numbers
            appState.opacityAmountDay = 0
            appState.opacityAmountWeek = 0
            appState.opacityAmountMonth = 0
            appState.opacityAmountYear = 0

            // Hide all charts
            appState.variantChartDay = "hidden"
            appState.variantChartWeek = "hidden"
            appState.variantChartMonth = "hidden"
            appState.variantChartYear = "hidden"

            if (index === 0) {
                appState.opacityAmountDay = 1
                appState.variantChartDay = "visible"
            } else if (index === 1) {
                appState.opacityAmountWeek = 1
                appState.variantChartWeek = "visible"
            } else if (index === 2) {
                appState.opacityAmountMonth = 1
                appState.variantChartMonth = "visible"
            } else if (index === 3) {
                appState.opacityAmountYear = 1
                appState.variantChartYear = "visible"
            }
        },
    }
}