Tabbed UI Properties Properties
Description
Tabbed UI Properties Properties
- Name
- Description
- Class map
Specify how the abstract CSS class names used in this component map to physical CSS class names in your style sheets.
- Resolve class map at runtime
To optimize performance, the class map is resolved a design time. If you check this property you can dynamically change the appearance of the component at runtime by remapping all of the abstract classes used in the component to a different set of physical CSS class names.
- Style name
Click the button to select a new style, or edit the existing style.
- Customize style colors and fonts
Customize the style colors and fonts. This provides a simpler way to customize colors than editing the style.
- Use compact theme
If supported by the theme, enables 'compact' view. The 'compact' view is often used in desktop browser applications.
- Apply compact style which parts?
Defines which part of the Tabbed UI to apply the compact style.
- Font size
Specify if the fonts in Grid Components should be scaled to make the Grid larger or smaller. Select 'Medium' for no scaling (i.e. the fonts shown will match those defined in the style sheet).
- Minimum height
Specify the minimum height (in pixels) for the 'Content Area' (from below the 'Header' to above the 'Footer').
- Master template
Specify an optional Master Template. This allows you to place arbitrary HTML surrounding the Tabbed UI component.
- Center TabbedUI on page
Specify if the Tabbed UI component should be a fixed width and centered horizontally on the page. (This property is only shown if you have not defined a Master Template.)
- Component width
Specify the width of the Tabbed UI component. Use CSS units.
- Component border class name
Specify the class name for the border that surrounds the Tabbed UI component.
- Component border in-line style
Specify the in-line style for the border that surrounds the Tabbed UI component.
- Header text
Specify the HTML text for the header section. This appears above the tab panes.
- Footer text
Specify the HTML text for the footer section. This appears at the bottom of the page.
- Page title
Specify the page title for the .a5w page that will display the Tabbed User Interface.
- Layout mode (Desktop or Mobile)
Should the layout of the Tabbed UI component be optimized for a Desktop Browser, or a mobile device (phone or tablet)?
- Hide tab buttons
Should the tab pane buttons be hidden? If yes, then the only way to switch from one open tab to another is by clicking on a button in the Buttons Pane.
- Mobile layout 'Menu' button text
Specify the text for the button that shows the Tabbed UI menu choices.
- Mobile layout 'Menu' title text
Specify the text that appears in the title bar when the menu buttons are displayed.
- Display Home page initially
When the Tabbed UI Object is initially opened, should the Home Page be shown? If you uncheck this, then the Tabbed UI Menu Buttons pane is shown.
- Buttons panel location
Specify where the Button Panel (which contains the buttons to open the pages that are shown in the Tabbed User Interface) is located.
- Buttons panel style
The Button Panel is contained in a TD tag. Specify the style for the tag. You can specify the width of the Button Panel in the style.
- Buttons - padding left
Specify the padding on the left side of the buttons. (Setting is ignored if Button Panel is on right).
- Buttons - padding right
Specify the padding on the right side of the buttons. (Setting is ignored if Button Panel is on left).
- Buttons - padding top
Specify the padding above the buttons.
- Set button padding off if using Tree Control
If the Tabbed UI buttons are in a Tree Control should the button padding be set to 0? (Tree looks better when padding is set to 0).
- Prompt when navigate away from page
When user navigates from the page that contains the Tabbed UI component, should a confirmation message be displayed?
- Tab close image
Specify the image for the close tab button. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Tab close image (on hover)
Specify the image to display when the user is hovering over the close tab button. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Tab scroll - previous image
If there are more tabs open that can be displayed, the tab band will scroll. Specify the image for the scroll left button. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Tab scroll - previous disabled image
Speficy the scroll previous image when the button is disabled. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Tab scroll - next image
If there are more tabs open that can be displayed, the tab band will scroll. Specify the image for the scroll right button. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Tab scroll - next disabled image
Speficy the scroll next image when the button is disabled. Specify <Default> or blank to use the default image. In V11 and above <Default> indicates that the image is defined in the style. By editing the style you can change the image.
- Collapse button bar icon (Left)
Specify the icon to collapse the button panel. Set to <Specified by Style>, or blank, to use the icon specified in the style.
- Expand button bar icon (Left)
Specify the icon to expand the button panel after it has been collapsed. Set to <Specified by Style>, or blank, to use the icon specified in the style.
- Collapse button bar icon (Right)
Specify the icon to collapse the button panel. Set to <Specified by Style>, or blank, to use the icon specified in the style.
- Expand button bar icon (Right)
Specify the icon to expand the button panel after it has been collapsed. Set to <Specified by Style>, or blank, to use the icon specified in the style.
- Can collapse buttons pane
Specify if the button pane can be collapsed.
- Initial state of buttons pane
Specify the initial state of the Buttons pane.
- Auto hide buttons pane
Specify if the buttons pane should be automatically hidden after the user moves the mouse out of the buttons pane area.
- Auto hide delay
Specify the delay in milliseconds before the button pane is automatically hidden/shown.
- Permanently hide buttons pane
Specify if the buttons pane should be permanently eliminated from the Tabbed UI. If you choose this option, then you must set then 'Auto launch on startup' property for the objects that you want to see in the Tabbed UI. You should also uncheck the 'Can close pane' property for each object, or else, if the user closes a pane, there will be no way to re-open the pane.