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 conditional rendering 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¶
Styles tab [[]]¶
Background: Control the appearance of the Wrapper’s background.
Not Set (default)
Image: Pulls in an image from a Skuid data source.
Data Source Type: Select the data source type from which you will be pulling the image.
Note
Select “Ui-Only” for images associated with Ui-Only models.
Data Source: Choose the specific data source containing the desired image. (Defaults to “Ui-only” for Ui-only models.)
Image Source:
Static Resource:
Note
You must have an image file uploaded as a static resource.
- Resource Name: If the file has been correctly uploaded, when you start typing the filename, Skuid will autocomplete.
URL:
- Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model/row context.
- Image URL: Enter the complete URL.
- Model: It is not necessary to specify a model. However, if using merge fields for the URL, setting the model provides the needed model/row context.
Size: Control the size of the image.
- Original: The image will display at its original size, without regard to the size of the Wrapper.
- Contain: The image will scale so that it will at least meet the top and bottom margins of the Wrapper.
- Cover: The image will scale so all parts of the Wrapper’s background are covered by the image.
Position: Choose the orientation of the image within the Wrapper.
Repeat: Determine if the image will repeat vertically, horizontally or both.
- No Repeat
- Horizontal
- Vertical
- Both
Special Effects: Add special effects to Wrapper image.
- No effects
- Parallax means that, when scrolling, the contents in the grid will scroll over the image
Color: Background color behind image. Defaults to transparent.
- Click the transparent symbol to open color the selection menu.
Color: Choose a color to serve as Wrapper background. Defaults to transparent.
- Click the transparent symbol to open color the selection menu.
Border and Padding: Set border and padding properties for the Wrapper.
Note
Border refers to the lines—or lack thereof—that form the boundary of the Wrapper within the page. Padding is the amount of space between components in a Wrapper and the Wrapper’s border.
- Border
- No Borders
- All
- Left
- Top
- Right
- Bottom
- Padding
- No Padding
- All
- Left
- Top
- Right
- Bottom
- Margin
- No Margin
- All
- Left
- Top
- Right
- Bottom
- Border
Size: Alters the height and width of the Wrapper.
Width
- Full: Extends to full width of screen or other containers the Wrapper is within.
- Collapse: Adjusts Wrapper to width of its contents.
- Custom: Customize Wrapper maximum and minimum width by percentage, pixel, and other options.
Height
- Collapse: Adjusts Wrapper to width of its contents.
- Custom: Customize Wrapper maximum and minimum height by percentage, pixel, and other options.
In addition to the standard attributes, you can add custom CSS values to the Wrapper.
- Click
- Custom CSS property
- Custom CSS value
Add New Custom Attribute and enter:
Need to remove a custom style attribute? Click
next to the attribute.Advanced tab [[]]¶
- Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
- CSS Class (optional): Assign a CSS class to the component’s DOM element.
Interactions tab [[]]¶
- Action/Interaction Types: Choose from three possible interactions:
- Click—best for desktop as well as mobile
- Swipe—best for mobile
- Press—best for mobile
Click
Add Action on the selected interaction type to add actions, then edit the Action Types:- Action Type: Use the Action Framework to launch actions from the Wrapper.
Display Logic tab [[]]¶
Standard conditional rendering options are available.