Components/Settings
fd-settings · 6 examples from SAP's documentation · Back to the gallery
About
The Settings Dialog allows users to personalize their Fiori experience by adjusting various settings. Layout and Structure The Settings Dialog follows a standard dialog format with a split layout inside the content area. On the left, a list of option groups is displayed. Selecting a group reveals its corresponding settings in the detail area on the right. List Area - The area which contains the list of settings. Detail Area - This area contains:. Header - The area which contains the title and the header of the selected group is settings. Varies based on selection. It's built using Toolbar, IconTabBar and Bar components. Content - Some detail pages may contain forms to lay out various controls depending on the type of settings. Content Area can be scrollable. Footer - Follows a standard Page Footer layout - .fd-settings applied on an element with class .fd-dialog - .fd-settings\\_\\_dialog-content applied on an element with class .fd-dialog\\_\\_content - .fd-settings\\_\\_dialog-body applied on an element with class .fd-dialog\\_\\_body - .fd-settings\\_\\_list-area - .fd-settings\\_\\_list-container - .fd-settings\\_\\_list with modifier .fd-settings\\_\\_list--footer applied on an element with class .fd-list - .fd-settings\\_\\_detail-area - .fd-settings\\_\\_header applied on an element with class .fd-bar fd-bar--header - .fd-settings\\_\\_tab-bar applied on an element with class .fd-icon-tab-bar - .fd-settings\\_\\_content with modifiers .fd-settings\\_\\_content--no-background and .fd-settings\\_\\_content--no-padding used individually or applied on an element with class .fd-icon-tab-bar\\_\\_panel
User Account (L-XL-XXL)
Alain Chevallier
Appearance (L-XL-XXL)
- Coca Cola
-
Automatic (based on your operating system settings)
-
Coca Cola Light
-
Coca Cola Dark
-
Coca Cola Light (High Contrast)
-
Coca Cola Dark (High Contrast)
- SAP Horizon
-
Automatic (based on your operating system settings)
-
Morning Horizon
-
Evening Horizon
-
High Contrast White (Horizon)
-
High Contrast Black (Horizon)
- SAP Quartz
-
Automatic (based on your operating system settings)
-
Quartz Light
-
Quartz Dark
-
High Contrast White (Quartz)
-
High Contrast Black (Quartz)
Language & Region (L-XL-XXL)
Notifications (L-XL-XXL)
Notifications Details (L-XL-XXL)
Description Text
Notification Preferences
L-XL-XXL (with Tabs and overflowing content)
For large screen sizes, the Settings Dialog uses a fixed-width layout with scrollable content: L (1024px - 1439px) XL (1440px - 1919px) XXL (1920px and above) Dimensions: Width: Fixed at 960px Height: 680px or 88% of screen height (whichever is smaller) If the content height exceeds the available space, users can scroll through the content area.