When designing tables in onboarding processes for iOS SDK and Web2App platforms, customizing paddings inside table items is essential.
These settings are crucial for enhancing user interaction and ensuring a seamless user experience.
Let's delve into how you can customize the paddings for both 'Unselected' and 'Selected' item states in various table types.
Accessing Table Customization:
Screen Added on flow
Click on the screen you've added to the onboarding flow.
Press the Pencil button to enter the "Edit Screen" mode.
Customizing a Specific Screen in the Theme:
Customizing a Specific Screen in the Theme:
For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.
For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.
Then edit the screen for the entire theme.
Implementation on iOS SDK and Web2App
Unselected Item Padding: Customizes the space between item borders and the content inside each item (text, image, checkbox) before user interaction.
Applicable for Both iOS and Web2App.
Note for iOS SDK: Settings apply to the 'Selected' state as well, meaning items in both states cannot have different indents.
Selected Item Padding: Customizes the space between item borders and the content inside each item when a user selects it.
Applicable for Web2App only and allows for different indents in 'Unselected' and 'Selected' states.
Common Padding Settings for Both States
Padding Left: Adjusts the space between the left border of the item and the nearest content (image, text, or checkbox).
Padding Right: Modifies the space between the right border of the item and the nearest content.
Padding Top: Alters the space between the top border of the item and the nearest content.
Padding Bottom: Adjusts the space between the bottom border of the item and the nearest content.
Different Table Types and Their Customization Options
Table Single Selection: On this table type, only the 'Unselected' state is visible in iOS SDK and Web2App. Hence, padding customizations apply only to this state.
Table Multiple Selection and Image Title Subtitle Selection: These table types allow customization for both 'Unselected' and 'Selected' states, enabling dynamic visual feedback based on user selections.
Image Title Subtitle List: This screen type lacks a 'Selected State'. Therefore, its setting is referred to as 'Item Paddings'. The customization options are uniform, as there is no distinction between selected and unselected states.
Consistency in Padding Customizations
Adjustments to paddings are applied uniformly across all items in the table.
When new items are added, they inherit these padding settings, ensuring a consistent appearance and user experience throughout the table.