Examples
Add example configurations of components to use in your design tools
Adding or Editing examples
Examples are useful configurations of your components that provide starting points for your designers.
A Button component may have examples with the Button configured in Primary, Secondary and Outline states. Designers could drop these examples into their designs and then customise the component properties further for their needs.
You can create Examples online in Interplay, or by importing them from files in your code repo. For creating large numbers of examples it is usually easier to import them from files in your repo. As they change over time you can re-import them, just as you do for components. For more details, please see the Examples section in Importing code components from your repo.
To create an Example for a component manually in the browser:
- Open your Project in Interplay and navigate to the relevant component.
- Click 'New Example' to create a new example for this component. This adds a new placeholder example - an empty instance of this component that just uses the component's default property values. Click Edit Example to start editing the component properties, add any child components. You can work with the property panel in design view, or you can switch to code view and edit your example as JSX.
Locking examples
Examples which have been created or edited through the Interplay UI are locked to prevent their settings being automatically updated by future imports from your repo, so that you don't lose your edits. (i.e. your edits are treated as overrides).
You can reset a component and its imported examples back to its imported config by running the CLI (v3.0+) with the reset parameter set:
//reset all components interplay --reset-components=["ALL"] //reset specific components by passing their IDs interplay --reset-components=["@example/Button"]