Wrapper

The Wrapper is a layout component that serves as a container for other components. Using the Wrapper, you can “wrap” other components to more easily control styling and display logic.

Using the Wrapper Component

The Wrapper component exists to give uniformity to components used on your Skuid page. The background image or color, size, and border and padding of each Wrapper can be customized. Controlling these visual details ensures a consistent design across all components contained in the Wrapper.

Beyond visual app design, the Wrapper offers a more efficient way to apply display logic to multiple components. Rendering logic applied to a single Wrapper component becomes uniform for all the components it contains. If you would like to apply the same rendering logic to several components, place the components in a Wrapper, and apply the logic to the Wrapper itself rather than setting up rendering properties for each individual component.

Add Components to the Wrapper

  • Add a Wrapper component to a Skuid.
  • Click, then drag desired components into the Wrapper component.
  • Modify component properties as usual to adjust behavior.
  • Add Interactions that allow end users to launch action when they select the Wrapper.

Note

The visual settings placed on the Wrapper may override visual styles applied to individual components within the Wrapper.

Properties

(Just need to look up a property? Try going directly to the Property Library.)

Component properties