Older versions (leaves this page)

Button Components

Button components are used to accept user interaction and trigger an event. There are two types:

  • A push button can be used to accept user interaction and trigger an event based on signals emitted by this class at various stages of interaction.

    Push Button in the You.i Properties Panel Push Button in action

  • A toggle button can be used to accept user interaction and trigger an event based on signals emitted by this class at various stages of interaction. Once pressed, the toggle button remains in the toggled-on state until the user presses the button again to toggle the button into the toggled-off state.

    Toggle Button

Push Button

Selects or displays a single value from a range of values. Does not allow user interaction. Maps directly to the ButtonRef equivalent in React Native JSX.

Requirements

Class CYIPushButtonView
Component Type button
Component Sub-Type push
Example Layer Comment class:CYIPushButtonView; componentType:button; componentSubtype:push;

Optional Timeline Markers

Animations can be grouped under the following markers.

Marker Description
FocusIn The animation played when a button receives focus.
FocusOut The animation played when a button loses focus. If not defined, the reverse of FocusIn is used.
Disable The timeline to play when the button is disabled. The reverse is played when transitioning from the CYIAbstractButtonView::DISABLED to the CYIAbstractButtonView::ENABLED state.
Down-Up The timeline to play when a cursor leaves the button area while being pressed. If this marker is not provided, the Release marker is played. If the Release marker is not provided, the reverse of Press is played.
Over-Up The timeline to play when a cursor leaves the button area. If this marker is not provided, the reverse of Up-Over is played.
Press The timeline to play when the button is pressed down. The reverse is played when the button is released if the Release marker is not provided.
Release The timeline to play when the button is released. If this marker is not provided, the reverse of the ‘Press’ Marker is played. The reverse is played when Press is not provided.
Up-Over The timeline to play when a cursor enters the button area. If this marker is not provided, the reverse of Over-Up is played.

Optional Layers

Display text can be categorized using the following categories.

Layer Description
Text or Placeholder-Text Text displayed on the button, which can be set using SetText().
TextPressed or Placeholder-TextPressed Text displayed on the button when pressed, which can be set using SetText(). Useful if you want to use a different font or color when pressed.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off
Set Text Sets the text of the last layer named “text” with the specified string value A string value

Toggle Button

Selects or displays a single value from a range of values. Allows user interaction. Not supported in You.i React Native projects.

Requirements

Class CYIToggleButtonView
Component Type button
Component Sub-Type toggle
Example Layer Comment componentType:button; class:CYIToggleButtonView; componentSubtype:toggle;

Optional Timeline Markers

Animations can be grouped under the following markers.

Marker Description
FocusIn The animation played when a button receives focus.
FocusOut The animation played when a button loses focus. If not defined, the reverse of FocusIn is used.
Disable The timeline to play when disabled in the unchecked state. The reverse is played when going from disabled to enabled state.
Disable-Checked The timeline to play when disabled in the checked state. The reverse is played when going from disabled to enabled state.
Down-Up The timeline to play when a cursor leaves the button area while being pressed in the unchecked state. If this marker is not provided, the reverse of Press is played. The state of the toggle button does not change.
Down-Up-Checked The timeline to play when a cursor leaves the button area while being pressed in the checked state. If this marker is not provided, the reverse of Press-Checked is played. The state of the toggle button does not change.
FocusIn-Checked An alternative to CYISceneView’s FocusIn timeline, played when the button gains focus in the checked state. If this marker is not provided, FocusIn is played instead.
FocusIn-Checked-Toggle-Transition A transition animation for focus states. Meant to provide a way to make the change from FocusIn-Checked to FocusIn look visually correct. Automatically played when a button toggles off and it has focus.
FocusIn-Toggle-Transition A transition animation for focus states. Meant to provide a way to make the change from FocusIn to FocusIn-Checked look visually correct. Automatically played when a button toggles on and it has focus.
FocusOut-Checked An alternative to CYISceneView’s FocusOut timeline, that is played when the button loses focus in the checked state. If this marker is not provided, FocusOut is played instead. If FocusOut is not provided, the next fallback is FocusIn-Checked played in reverse, and failing that, FocusIn played in reverse.
Over-Up The timeline to play when a cursor leaves the button area in the unchecked state. If this marker is not provided, the reverse of Up-Over marker is played.
Over-Up-Checked The timeline to play when a cursor leaves the button area in the checked state. If this marker is not provided, the reverse of Up-Over-Checked marker is played.
Press The timeline to play when pressed down in the unchecked state. Releasing causes the state of the toggle button to go from unchecked to checked, and the Toggle-On marker is played.
Press-Checked The timeline to play when pressed down in the checked state. Releasing causes the state of the toggle button to go from checked to unchecked, and the Toggle-Off marker is played.
Toggle-Off The timeline to play when going from the checked to unchecked state. The reverse is played if Toggle-On is not provided.
Toggle-On The timeline to play when going from the unchecked to checked state. The reverse is played if Toggle-Off is not provided.
Up-Over The timeline to play when a cursor enters the button area in the unchecked state. If this marker is not provided, the reverse of Over-Up is played.
Up-Over-Checked The timeline to play when a cursor enters the button area in the checked state. If this marker is not provided, the reverse of Over-Up-Checked is played.

Optional Layers

Display text can be categorized using the following categories.

Layer Description
Text or Placeholder-Text Text displayed on the button, which can be set using SetText().
TextPressed or Placeholder-TextPressed Text displayed on the button when pressed, which can be set using SetText(). Useful if you want to use a different font or color when pressed.

Properties

Property Description Input Values
Clipping Allows the layers overflow to be displayed or clipped so the overflow isn’t visible outside of the bounds of the composition. Default On Off
Set Text Sets the text of the last layer named “text” with the specified string value A string value