| + Style Selectors + | +|
|---|---|
| Name | +Description | +
| af|breadCrumbs | +Styles the tr:breadCrumbs content. | +
| af|breadCrumbs::disabled-step | +Styles the disabled step of tr:breadCrumbs. | +
| af|breadCrumbs::separator | +Styles the tr:breadCrumbs steps. | +
| af|breadCrumbs::selected-step | +Styles the selected step of tr:breadCrumbs. This step may be hidden + if the -tr-show-last-item property is set to false. | +
| af|breadCrumbs::step | +Styles the tr:breadCrumbs steps. | +
| .AFPath:alias | +The .AFPath:alias style defines style properties that are shared + by both af|breadCrumbs and af|treeTable::path. | +
| .AFPathSeparator:alias | +The .AFPathSeparator:alias style defines style properties that + used by both af|breadCrumbs::separator. | +
| .AFPathStep:alias | +The .AFPathStep:alias style defines style properties that are + shared by both af|breadCrumbs::step and af|treeTable::path-step | +
| .AFPathSelectedStep:alias | +The .AFPathSelectedStep:alias style defines style properties + that are shared by both af|breadCrumbs::selected-step and + af|treeTable::path-selected-step | +
| + Icon Selectors + | +|
| Name | +Description | +
| af|breadCrumbs::separator-icon | +The separator icon that is rendered between tr:breadCrumbs links. + This is typically a text icon, like '>'. | +
| .AFPathSeparatorIcon:alias | +Changing this icon changes both af|breadCrumbs::separator-icon and + af|treeTable::separator-icon. This makes it easier to keep the + icons between the two consistent. | +
| + Trinidad properties + | +|
| Name | +Description | +
| -tr-show-last-item | +Valid values are true or false. Determines whether the last item + is displayed or not. e.g., af|breadCrumbs + {-tr-show-last-item:false} will not show the last item in the + breadCrumbs. | +
| - Style Selectors - | -||
|---|---|---|
| Name | -Description | -|
| af|inputText | -Style on the root element of the tr:inputText component. | -|
| af|inputText:disabled | -Style on the root element of the tr:inputText component when its disabled attribute - is set to 'true'. For example, you can style the label when the component is - disabled by using this selector: "af|inputText:disabled::label" | -|
| af|inputText:readOnly | -Style on the root element of the tr:inputText component when its readOnly attribute - is set to 'true'. For example, you can style the label when the component is - readOnly by using this selector: "af|inputText:readOnly::label" | -|
| af|inputText::content | -Style on the content of the tr:inputText component. You can set the width of the content piece - that will be used when the columns attribute on tr:inputText is not set. | -|
| af|inputText::label | -Style on the label of the tr:inputText component. - This includes .AFLabel:alias style selector. | -|
| To style the input piece of inputText without creating a skin definition, - you can set the following public style classes on the styleClass attribute. The 'Marker' style classes are - rendered on the root dom element, they have no style properties of its own, and they map the content - piece of the component's styling to the public style class without the 'Marker'. For example, we map AFFieldTextMarker - to AFFieldText by defining this skin definition for you in our base skin: - af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".AFFieldText")}. - If you set styleClass="AFFieldText", the entire component will be affected, including the label. - If you want to affect only the 'content' piece, use one of these marker style classes | -AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker, - AFFieldNumberMarker | -|
| AFFieldTextMarker, AFFieldTextLTRMarker, AFFieldNumberMarker |
The tr:menuBar is implemented using an inner table nested within an - outer table. The outer table contains cells for the - af|menuBar::start-icon and af|menuBar::end-icon icons, as well as a - cell for the nested inner table. The inner table contains the actual - contents of the menuBar - which includes the tr:menuBar items if any - items exist, or possibly the tr:menuBar title if no items are - specified.
-Style properties can be applied to either the outer table or the - inner table, depending on how the styles are meant to be used. The - af|menuBar style can be used to apply styles to the entire menuBar - - including the af|menuBar::start-icon/af|menuBar::end-icon icons. - Note, however, that if these icons are transparent, then setting the - background color or borders on the af|menuBar style class itself is - probably not desirable, since the background color will show through - any transparent pixels in the icons.
-Three other styles can be used to apply styles to the inner contents - of the tr:menuBar (not including the af|menuBar::start-icon and - af|menuBar::end-icon icons). If the tr:menuBar contains any items, - the af|menuBar::body style class is used to style the inner table - which contains the items. This is a good choice for specifying a - background color for the tr:menuBar, since this background color is - not applied to the tr:menuBar's outer icons. If no tr:menuBar items - are present, but the tr:menuBar's text attribute is specified, the - af|menuBar::title style class is rendered on the inner table instead - of af|menuBar::body. If no children are present and there is no - title, the af|menuBar::empty title is used.
+| + | Style Selectors | Description | ||
|---|---|---|---|---|
| af|menuBar | -Styles the menuBar container itself. | +af|inputText | +Style on the root element of the tr:inputText component. | |
| af|menuBar::body | -Styles the menuBar's inner table when the menuBar contains child - items. | +af|inputText:disabled | +Style on the root element of the tr:inputText component when its disabled attribute + is set to 'true'. For example, you can style the label when the component is + disabled by using this selector: "af|inputText:disabled::label" | |
| af|menuBar::title | -Styles the menuBar's inner table when the menuBar does not - contain any child items but does have its text attribute set. | +af|inputText:readOnly | +Style on the root element of the tr:inputText component when its readOnly attribute + is set to 'true'. For example, you can style the label when the component is + readOnly by using this selector: "af|inputText:readOnly::label" | |
| af|menuBar::empty | -Styles empty menuBars - that is, menuBars which do not have any - children or a title. | +af|inputText::content | +Style on the content of the tr:inputText component. You can set the width of the content piece + that will be used when the columns attribute on tr:inputText is not set. | |
| af|menuBar::enabled | -Styles enabled items in the menuBar. | -af|inputText::label | +Style on the label of the tr:inputText component. + This includes .AFLabel:alias style selector. | +|
| af|menuBar::selected | -Styles selected items in the menuBar. | +To style the input piece of inputText without creating a skin definition, + you can set the following public style classes on the styleClass attribute. The 'Marker' style classes are + rendered on the root dom element, they have no style properties of its own, and they map the content + piece of the component's styling to the public style class without the 'Marker'. For example, we map AFFieldTextMarker + to AFFieldText by defining this skin definition for you in our base skin: + af|inputText.AFFieldTextMarker af|inputText::content {-tr-rule-ref: selector(".AFFieldText")}. + If you set styleClass="AFFieldText", the entire component will be affected, including the label. + If you want to affect only the 'content' piece, use one of these marker style classes | +AFFieldTextMarker, AFFieldTextLTRMarker, AFPhoneFieldTextMarker, AFPostalCodeFieldTextMarker, AFAddressFieldTextMarker, + AFFieldNumberMarker | |
| af|menuBar::separator | -Styles the menuBar separator items. | -|||
| af|menuBar::enabled-link | -Styles enabled links in the menuBar. | -|||
| af|menuBar::selected-link | -Styles selected links in the menuBar. | -|||
| .AFMenuBarItem:alias | -The .AFMenuBarItem:alias style defines style properties that are - shared by all menuBar items. This is included by the - af|menuBar::enabled and af|menuBar::selected style classes. - Therefore, if you change the .AFMenuBarItem:alias style, you - will affect af|menuBar::enabled and af|menuBar::selected. | -|||
| - Icon Selectors - | -||||
| Name | -Description | -|||
| af|menuBar::start-icon | -This icon is rendered at the start of the af|menuBar. | -|||
| af|menuBar::end-icon | - > -This icon is rendered at the end of the af|menuBar. | -|||
| af|menuBar::leading-separator-icon | -This icon is rendered before the first item in the af|menuBar. | -|||
| af|menuBar::trailing-separator-icon | -This icon is rendered after the last item in the af|menuBar. | -|||
| af|menuBar::background-icon | -This icon is rendered as the background of the af|menuBar. | -|||
| af|menuBar::separator-icon | -This icon is rendered between items. | -|||
This tr:messages component is implemented using an inner div nested + within an outer table. The outer container is used to lay out the + messages' icons. The inner container contains the actual contents of + the messages. If any transparent icons are used, style properties + such as the background color should probably be set on the inner + table via the af|messages::body selector.
| @@ -1197,132 +1186,40 @@ | Description | ||
|---|---|---|---|
| af|menuButtons::text | -Styles the enabled menu buttons text. | +.AFHeaderLevelOne | +This style class is included by af|messages::header and + af|messages::error, as well as the af|*::level-one selectors and + af|panelHeader::error |
| af|menuButtons::text-selected | -Styles the selected menu buttons text. | +af|messages | +Styles the messages's outer table. The overall width of the + outer table is also configured through this selector. Since + the messages's icons are rendered within the outer table, the + af|messages::body selector is probably a better choice for + specifying the messages's background color, padding, etc... |
| af|menuButtons::text-disabled | -Styles the disabled menu buttons text. | +af|messages::body | +Styles the messages's inner table, which does not include any + outer icons. |
| .AFMenuButtons:alias | -The .AFMenuButtons:alias style defines style properties that are - shared by all menuButtons selectors: af|menuButtons::text, - af|menuButtons::text-selected, and af|menuButtons::text-disabled. | +af|messages::message-text | +Styles the 'text' attribute of tr:messages if present. |
| - Icon Selectors - | +af|messages::list | +Styles the list of messages inside of af|messages::body | |
| Name | -Description | +af|messages::list-single | +This selector is used in addition to af|messages::list when there + is only a single message displayed. It can be used to remove the + numbering from the list. |
| af|menuButtons::separator-icon | -The separator icon that is rendered between tr:menuButtons. This - is typically a text icon, like |. | -||
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|menuChoice::label | -Styles the tr:menuChoice's label. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|menuList | -Styles the menuList. | -
| af|menuList::selected | -Styles the selected menuList. | -
| - Style Selectors - | -|||
|---|---|---|---|
| Name | -Description | -||
| af|breadCrumbs | -Styles the tr:breadCrumbs content. | -||
| af|breadCrumbs::disabled-step | -Styles the disabled step of tr:breadCrumbs. | -||
| af|breadCrumbs::separator | -Styles the tr:breadCrumbs steps. | -||
| af|breadCrumbs::selected-step | -Styles the selected step of tr:breadCrumbs. This step may be hidden - if the -tr-show-last-item property is set to false. | -||
| af|breadCrumbs::step | -Styles the tr:breadCrumbs steps. | -||
| .AFPath:alias | -The .AFPath:alias style defines style properties that are shared - by both af|breadCrumbs and af|treeTable::path. | -||
| .AFPathSeparator:alias | -The .AFPathSeparator:alias style defines style properties that - used by both af|breadCrumbs::separator. | -||
| .AFPathStep:alias | -The .AFPathStep:alias style defines style properties that are - shared by both af|breadCrumbs::step and af|treeTable::path-step | -||
| .AFPathSelectedStep:alias | -The .AFPathSelectedStep:alias style defines style properties - that are shared by both af|breadCrumbs::selected-step and - af|treeTable::path-selected-step | -||
| Icon Selectors | Description | ||
| af|breadCrumbs::separator-icon | -The separator icon that is rendered between tr:breadCrumbs links. - This is typically a text icon, like '>'. | +af|messages::top-start | +This icon is rendered at the top starting corner of the messages + (ie. at the top left corner for left to right languages.) |
| .AFPathSeparatorIcon:alias | -Changing this icon changes both af|breadCrumbs::separator-icon and - af|treeTable::separator-icon. This makes it easier to keep the - icons between the two consistent. | +af|messages::top | +This icon is rendered in the background in between the + af|messages::top-start-icon and af|messages::top-end-icon icons. |
| - Trinidad properties - | +af|messages::top-end | +This icon is rendered at the top ending corner of the messages + (ie. at the top right corner for left to right languages.) | |
| Name | -Description | +af|messages::start | +This icon is rendered in the background at the start of the + messages. |
| -tr-show-last-item | -Valid values are true or false. Determines whether the last item - is displayed or not. e.g., af|breadCrumbs - {-tr-show-last-item:false} will not show the last item in the - breadCrumbs. | +af|messages::end | +This icon is rendered in the background at the end of the + messages. |
| - Style Selectors - | +af|messages::bottom-start | +This icon is rendered at the bottom starting corner of the + messages (ie. at the bottom left corner for left to right + languages.) | |
|---|---|---|---|
| Name | -Description | +af|messages::bottom | +This icon is rendered in the background in between the + af|messages::bottom-start-icon and af|messages::bottom-end-icon + icons. |
| af|menuTabs | -Styles the tr:menuTabs container. | +af|messages::bottom-end | +This icon is rendered at the bottom ending corner of the + messages (ie. at the bottom right corner for left to right + languages.) |
| af|menuTabs::enabled | -Styles the enabled items. | +af|messages::error-icon | +The icon that is displayed for error messages. |
| af|menuTabs::selected | -Styles the selected item. | +af|messages::warning-icon | +The icon that is displayed for warning messages. |
| af|menuTabs::disabled | -Styles the disabled item. | +af|messages::info-icon | +The icon that is displayed for information messages. |
| af|menuTabs::enabled-link | -Styles link-specific styles to enabled links. | +af|messages::confirmation-icon | +The icon that is displayed for confirmation messages. |
| af|menuTabs::selected-link | -Styles link-specific styles to selected links. | +.AFHeaderErrorIcon:alias | +The icon that is displayed for error messages or headers in + tr:messages and tr:panelHeader. Changing this icon changes both + af|panelHeader::error-icon and af|messages::error-icon |
| .AFTabBarItem:alias | -The .AFTabBarItem:alias style defines style properties that are - shared by all menuTabs items. This alias style is included by - the af|menuTabs::enabled, af|menuTabs::selected and - af|menuTabs::disabled style classes. | +.AFHeaderWarningIcon:alias | +The icon that is displayed for warning messages or headers in + tr:messages and tr:panelHeader. Changing this icon changes both + af|panelHeader::warning-icon and af|messages::warning-icon |
| .AFTabBarLink:alias | -The .AFTabBarLink:alias style defines style properties that are - shared by all links within the tabBar. This alias style is - included by the "af|menuTabs::enabled-link" and - "af|menuTabs::selected-link" selectors. | +.AFHeaderInfoIcon:alias | +The icon that is displayed for information messages or headers + in tr:messages and tr:panelHeader. Changing this icon changes + both af|panelHeader::info-icon and af|messages::info-icon |
| - Icon Selectors - | +.AFHeaderConfirmationIcon:alias | +The icon that is displayed for confirmation messages or headers + in tr:messages and tr:panelHeader. Changing this icon changes + both af|panelHeader::confirmation-icon and + af|messages::confirmation-icon | |
| Name | -Description | -||
| af|menuTabs::enabled-start-icon | -This icon is rendered at the start of each enabled menuTab item. | -||
| af|menuTabs::enabled-end-icon | -This icon is rendered at the end of each enabled menuTab item. | -||
| af|menuTabs::enabled-background-icon | -This icon is rendered in the background each enabled menuTab - item. | -||
| af|menuTabs::selected-start-icon | -This icon is rendered at the start of the selected menuTab item. | -||
| af|menuTabs::selected-end-icon | -This icon is rendered at the end of the selected menuTab item. | -||
| af|menuTabs::selected-background-icon | -This icon is rendered in the background the selected menuTab - item. | -||
| af|menuTabs::enabled-join-icon | -This icon is rendered in between two enabled menuTab items. | -||
| af|menuTabs::enabled-selected-join-icon | -This icon is rendered in between an enabled tabBar item and the - selected menuTab item. That is, when the reading direction is - left to right, the join connects an enabled item with a selected - item to the right of the enabled item. | -||
| af|menuTabs::selected-enabled-join-icon | -Thisicon is rendered in between the selected menuTab item and an - enabled menuTab item. That is, when the reading direction is - left to right, the join connects a selected item with an enabled - item to the right of the selected item. | -||
Not yet documented.
Not yet documented.
Not yet documented.
The navigationPane hint="tabs" renders nested tables. The af|navigationPane::tabs is the root dom element style selector. Within the root dom element are tables denoting af|navigationPane::tabs-active @@ -1720,6 +1576,7 @@
This tr:messages component is implemented using an inner div nested - within an outer table. The outer container is used to lay out the - messages' icons. The inner container contains the actual contents of - the messages. If any transparent icons are used, style properties - such as the background color should probably be set on the inner - table via the af|messages::body selector.
+ + + +| @@ -1774,134 +1628,25 @@ | Description | ||
|---|---|---|---|
| .AFHeaderLevelOne | -This style class is included by af|messages::header and - af|messages::error, as well as the af|*::level-one selectors and - af|panelHeader::error | +af|outputDocument | +Styles the tr:outputDocument component's container element. |
| af|messages | -Styles the messages's outer table. The overall width of the - outer table is also configured through this selector. Since - the messages's icons are rendered within the outer table, the - af|messages::body selector is probably a better choice for - specifying the messages's background color, padding, etc... | +af|outputDocument::title | +Styles the tr:outputDocument component's title element. |
| af|messages::body | -Styles the messages's inner table, which does not include any - outer icons. | +af|outputDocument::paragraph | +Styles the tr:outputDocument component's paragraphs. |
| af|messages::message-text | -Styles the 'text' attribute of tr:messages if present. | +af|outputDocument::separator | +Styles the tr:outputDocument component's separator placed between paragraphes. |
| af|messages::list | -Styles the list of messages inside of af|messages::body | -||
| af|messages::list-single | -This selector is used in addition to af|messages::list when there - is only a single message displayed. It can be used to remove the - numbering from the list. | -||
| - Icon Selectors - | -|||
| Name | -Description | -||
| af|messages::top-start | -This icon is rendered at the top starting corner of the messages - (ie. at the top left corner for left to right languages.) | -||
| af|messages::top | -This icon is rendered in the background in between the - af|messages::top-start-icon and af|messages::top-end-icon icons. | -||
| af|messages::top-end | -This icon is rendered at the top ending corner of the messages - (ie. at the top right corner for left to right languages.) | -||
| af|messages::start | -This icon is rendered in the background at the start of the - messages. | -||
| af|messages::end | -This icon is rendered in the background at the end of the - messages. | -||
| af|messages::bottom-start | -This icon is rendered at the bottom starting corner of the - messages (ie. at the bottom left corner for left to right - languages.) | -||
| af|messages::bottom | -This icon is rendered in the background in between the - af|messages::bottom-start-icon and af|messages::bottom-end-icon - icons. | -||
| af|messages::bottom-end | -This icon is rendered at the bottom ending corner of the - messages (ie. at the bottom right corner for left to right - languages.) | -||
| af|messages::error-icon | -The icon that is displayed for error messages. | -||
| af|messages::warning-icon | -The icon that is displayed for warning messages. | -||
| af|messages::info-icon | -The icon that is displayed for information messages. | -||
| af|messages::confirmation-icon | -The icon that is displayed for confirmation messages. | -||
| .AFHeaderErrorIcon:alias | -The icon that is displayed for error messages or headers in - tr:messages and tr:panelHeader. Changing this icon changes both - af|panelHeader::error-icon and af|messages::error-icon | -||
| .AFHeaderWarningIcon:alias | -The icon that is displayed for warning messages or headers in - tr:messages and tr:panelHeader. Changing this icon changes both - af|panelHeader::warning-icon and af|messages::warning-icon | -||
| .AFHeaderInfoIcon:alias | -The icon that is displayed for information messages or headers - in tr:messages and tr:panelHeader. Changing this icon changes - both af|panelHeader::info-icon and af|messages::info-icon | -||
| .AFHeaderConfirmationIcon:alias | -The icon that is displayed for confirmation messages or headers - in tr:messages and tr:panelHeader. Changing this icon changes - both af|panelHeader::confirmation-icon and - af|messages::confirmation-icon | -||
| @@ -1913,40 +1658,43 @@ | Description | ||
|---|---|---|---|
| af|separator | -Styles the tr:separator component. | +af|panelAccordion | +This can be used to style the root element of a panelAccordion. |
| - Style Selectors - | +af|panelAccordion::content | +This can be used to style the parent element of each showDetailItem in a panelAccordion. | |
|---|---|---|---|
| Name | -Description | +af|panelAccordion::header-collapsed | +This can be used to style the header region of each collapsed showDetailItem in a panelAccordion. |
| af|outputDocument | -Styles the tr:outputDocument component's container element. | +af|panelAccordion::header-disabled | +This can be used to style the header region of each disabled showDetailItem in a panelAccordion. |
| af|outputDocument::title | -Styles the tr:outputDocument component's title element. | +af|panelAccordion::header-expanded | +This can be used to style the header region of each expanded showDetailItem in a panelAccordion. |
| af|outputDocument::paragraph | -Styles the tr:outputDocument component's paragraphs. | +af|panelAccordion::title-link | +This can be used to style the link element for the title of + each enabled showDetailItem in a panelAccordion. |
| af|outputDocument::separator | -Styles the tr:outputDocument component's separator placed between paragraphes. | +af|panelAccordion::title-disabled-link | +This can be used to style the link element for the title of + each disabled showDetailItem in a panelAccordion. |
| af|panelAccordion::toolbar | +This can be used to style the toolbar facet of a showDetailItem in a panelAccordion. | +||
The panelBox contains the body region, which contains the panelBox header which contains @@ -2086,6 +1834,7 @@
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|panelLabelAndMessage::help-facet | -Specifies the style information for the help-facet text of a - panelLabelAndMessage. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|panelList | -Styles the root dom element of the panelList. Note: if you would like to style the bullets, you can - set a css property/value to the listStyle attribute. For example, listStyle='list-style-type: decimal' - changes the list style to decimals. See the w3.org's css spec for more options. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|panelAccordion | -This can be used to style the root element of a panelAccordion. | -
| af|panelAccordion::content | -This can be used to style the parent element of each showDetailItem in a panelAccordion. | -
| af|panelAccordion::header-collapsed | -This can be used to style the header region of each collapsed showDetailItem in a panelAccordion. | -
| af|panelAccordion::header-disabled | -This can be used to style the header region of each disabled showDetailItem in a panelAccordion. | -
| af|panelAccordion::header-expanded | -This can be used to style the header region of each expanded showDetailItem in a panelAccordion. | -
| af|panelAccordion::title-link | -This can be used to style the link element for the title of -each enabled showDetailItem in a panelAccordion. | -
| af|panelAccordion::title-disabled-link | -This can be used to style the link element for the title of -each disabled showDetailItem in a panelAccordion. | -
| af|panelAccordion::toolbar | -This can be used to style the toolbar facet of a showDetailItem in a panelAccordion. | -
| + Style Selectors + | +|
|---|---|
| Name | +Description | +
| af|panelLabelAndMessage::help-facet | +Specifies the style information for the help-facet text of a + panelLabelAndMessage. | +
| + Style Selectors + | +|
|---|---|
| Name | +Description | +
| af|panelList | +Styles the root dom element of the panelList. Note: if you would like to style the bullets, you can + set a css property/value to the listStyle attribute. For example, listStyle='list-style-type: decimal' + changes the list style to decimals. See the w3.org's css spec for more options. | +
This tr:panelSideBar component is implemented using an inner table nested within an outer table. The outer container is used to lay out @@ -2566,6 +2272,81 @@
| + Style Selectors + | +|
|---|---|
| Name | +Description | +
| .AFShowOneTab:alias | +This style is included in both af|panelTabbed::orientation-top + and af|panelTabbed::orientation-bottom. | +
| af|panelTabbed::orientation-top | +This styles the top panelTabbed. You can use this to add padding + and margins and borders, for example. | +
| af|panelTabbed::orientation-bottom | +This styles the bottom panelTabbed. You can use this to add + padding and margins and borders, for example. | +
| af|panelTabbed::tab | +This styles each unselected tab. | +
| af|panelTabbed::tab-link | +This styles each unselected tab link. | +
| af|panelTabbed::tab-selected | +This styles each selected tab. | +
| af|panelTabbed::tab-selected-link | +This styles each selected tab link. | +
| af|panelTabbed::separator-before-selected | +This is a cell with no content that renders before the selected + cell. You can style this cell to highlight the selected cell, if + desired. | +
| af|panelTabbed::separator-after-selected | +This is a cell with no content that renders after the selected + cell. You can style this cell to highlight the selected cell, if + desired. | +
| af|panelTabbed::separator | +This style is on the cells between each unselected step. | +
| af|panelTabbed::cell-start | +The style on the first cell. You can left-align by setting + width:0% on this, and width:100% on cell-end. | +
| af|panelTabbed::cell-end | +The style on the last cell. | +
| af|panelTabbed::body | +The style on the body of the panelTabbed; ie., the contents. | +
The tr:panelTip has two regions - a label and the main content.
| af|panelTip | -This style class is rendered on the outer content of the -panelTip. | +This style class is rendered on the outer content of the panelTip. |
| af|panelTip::label | @@ -2593,6 +2373,131 @@
| + Icon Selectors + | +|
|---|---|
| Name | +Description | +
| af|progressIndicator::indeterminate-icon | +The icon which is displayed when the progressIndicator's value + is -1. | +
| af|progressIndicator::zero-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is zero percent. | +
| af|progressIndicator::five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is five percent. | +
| af|progressIndicator::ten-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is ten percent. | +
| af|progressIndicator::fifteen-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is fifteen percent. | +
| af|progressIndicator::twenty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is twenty percent. | +
| af|progressIndicator::twenty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is twenty-five percent. | +
| af|progressIndicator::thirty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is thirty percent. | +
| af|progressIndicator::thirty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is thirty-five percent. | +
| af|progressIndicator::forty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is forty percent. | +
| af|progressIndicator::forty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is forty-five percent. | +
| af|progressIndicator::fifty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is fifty percent. | +
| af|progressIndicator::fifty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is fifty-five percent. | +
| af|progressIndicator::sixty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is sixty percent. | +
| af|progressIndicator::sixty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is sixty-five percent. | +
| af|progressIndicator::seventy-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is seventy percent. | +
| af|progressIndicator::seventy-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is seventy-five percent. | +
| af|progressIndicator::eighty-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is eighty percent. | +
| af|progressIndicator::eighty-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is eighty-five percent. | +
| af|progressIndicator::ninety-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is ninety percent. | +
| af|progressIndicator::ninety-five-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is ninety-five percent. | +
| af|progressIndicator::one-hundred-percent-icon | +The icon which is displayed when the progressIndicator's value + divided by maximum is one-hundred percent. | +
| af|selectBooleanCheckbox::label | Style on the label of the tr:selectBooleanCheckbox component. This includes .AFLabel:alias style selector. | -
| + Icon Selectors + | +|
|---|---|
| Name | +Description | +
| af|selectBooleanCheckbox::disabled-checked-icon | +The icon that is displayed when the checkbox is readOnly, + disabled, and checked. | +
| af|selectBooleanCheckbox::disabled-unchecked-icon | +The icon that is displayed when the checkbox is readOnly, + disabled, and unchecked. | +
| af|selectBooleanCheckbox::read-only-checked-icon | +The icon that is displayed when the checkbox is read-only and + checked. | +
| af|selectBooleanCheckbox::read-only-unchecked-icon | +The icon that is displayed when the checkbox is read-only and + unchecked. | +
| af|selectBooleanRadio::label | Style on the label of the tr:selectBooleanRadio component. This includes .AFLabel:alias style selector. | -
| + Icon Selectors + | +|
|---|---|
| Name | +Description | +
| af|selectBooleanRadio::disabled-selected-icon | +The icon that is displayed when the radio is readOnly, disabled, + and selected. | +
| af|selectBooleanRadio::disabled-unselected-icon | +The icon that is displayed when the radio is readOnly, disabled, + and not selected. | +
| af|selectBooleanRadio::read-only-selected-icon | +The icon that is displayed when the radio is read-only and + selected. | +
| af|selectBooleanRadio::read-only-unselected-icon | +The icon that is displayed when the radio is read-only and not + selected. | +
| + Icon Selectors + | +|
|---|---|
| Name | +Description | +
| af|selectRangeChoiceBar::prev-icon | +The previous icon which is used to go back to previous step. | +
| af|selectRangeChoiceBar::next-icon | +The next icon which is used to go back to next step. | +
| af|selectRangeChoiceBar::prev-disabled-icon | +The previous icon in its disabled state. | +
| af|selectRangeChoiceBar::next-disabled-icon | +The next icon in its disabled state. | +
| + Style Selectors + | +|
|---|---|
| Name | +Description | +
| af|separator | +Styles the tr:separator component. | +
| @@ -3335,67 +3357,56 @@ | Description | ||
|---|---|---|---|
| .AFShowOneTab:alias | -This style is included in both af|panelTabbed::orientation-top - and af|panelTabbed::orientation-bottom. | +af|statusIndicator | +Styles the status indicator as a whole. |
| af|panelTabbed::orientation-top | -This styles the top panelTabbed. You can use this to add padding - and margins and borders, for example. | +af|statusIndicator::busy | +Styles the status indicator's busy facet |
| af|panelTabbed::orientation-bottom | -This styles the bottom panelTabbed. You can use this to add - padding and margins and borders, for example. | +af|statusIndicator::ready | +Styles the status indicator's ready facet |
| af|panelTabbed::tab | -This styles each unselected tab. | ++ Icon Selectors + | |
| af|panelTabbed::tab-link | -This styles each unselected tab link. | +Name | +Description |
| af|panelTabbed::tab-selected | -This styles each selected tab. | +af|statusIndicator::busy-icon | +The icon that is displayed when the page is busy. The icon + will only be rendered if no facet was specified. Simple skin + references the ".AFBusyIcon:alias" icon. |
| af|panelTabbed::tab-selected-link | -This styles each selected tab link. | +af|statusIndicator::ready-icon | +The icon that is displayed when the page is not busy. The icon + will only be rendered if no facet was specified. Simple skin + references the ".AFReadyIcon:alias" icon. |
| af|panelTabbed::separator-before-selected | -This is a cell with no content that renders before the selected - cell. You can style this cell to highlight the selected cell, if - desired. | +.AFBusyIcon:alias | +A named icon that's used by af|statusIndicator::busy-icon and + is also usable in with <tr:icon>. That ability is important + to include the icon even when a facet is specified on the + statusIndicator. |
| af|panelTabbed::separator-after-selected | -This is a cell with no content that renders after the selected - cell. You can style this cell to highlight the selected cell, if - desired. | +.AFReadyIcon:alias | +A named icon that's used by af|statusIndicator::ready-icon and + is also usable in with <tr:icon>. That ability is important + to include the icon even when a facet is specified on the + statusIndicator. |
| af|panelTabbed::separator | -This style is on the cells between each unselected step. | -||
| af|panelTabbed::cell-start | -The style on the first cell. You can left-align by setting - width:0% on this, and width:100% on cell-end. | -||
| af|panelTabbed::cell-end | -The style on the last cell. | -||
| af|panelTabbed::body | -The style on the body of the panelTabbed; ie., the contents. | -||
| @@ -3781,122 +3794,47 @@ | Description | ||
|---|---|---|---|
| af|progressIndicator::indeterminate-icon | -The icon which is displayed when the progressIndicator's value - is -1. | +af|tree::expanded-icon | +This icon is displayed before the expanded tree node. |
| af|progressIndicator::zero-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is zero percent. | +af|treeTable::collapsed-icon | +This icon is displayed before the collapsed tree node. |
| af|progressIndicator::five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is five percent. | +af|treeTable::line-icon | +This icon is used as a vertical line between the nodes. + |
| af|progressIndicator::ten-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is ten percent. | +af|treeTable::line-middle-icon | +This icon is used as the horizontal line in the background of the + expand/collapse icon of the node, in the case the node is not the last + sibling of its parent node. + |
| af|progressIndicator::fifteen-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is fifteen percent. | +af|treeTable::line-last-icon | +This icon is used as the horizontal line in the background of the + expand/collapse icon of the node, in the case the node is the last + sibling of its parent node. + |
| af|progressIndicator::twenty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is twenty percent. | +af|treeTable::node-icon | +This icon selector is used in the case the Node class has a getNodeType() + method that returns the node type as string. The nodetype gets added to this + selector separated by a ':'. If the node is a container (has children) the + following suffixes get added depending on the expanded/collapsed state: + '-expanded' / '-collapsed'. e.g. + "af|treeTable::node-icon:container-collapsed", + "af|treeTable::node-icon:container-expanded", + "af|treeTable::node-icon:noncontainer". + |
| af|progressIndicator::twenty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is twenty-five percent. | -||
| af|progressIndicator::thirty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is thirty percent. | -||
| af|progressIndicator::thirty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is thirty-five percent. | -||
| af|progressIndicator::forty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is forty percent. | -||
| af|progressIndicator::forty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is forty-five percent. | -||
| af|progressIndicator::fifty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is fifty percent. | -||
| af|progressIndicator::fifty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is fifty-five percent. | -||
| af|progressIndicator::sixty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is sixty percent. | -||
| af|progressIndicator::sixty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is sixty-five percent. | -||
| af|progressIndicator::seventy-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is seventy percent. | -||
| af|progressIndicator::seventy-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is seventy-five percent. | -||
| af|progressIndicator::eighty-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is eighty percent. | -||
| af|progressIndicator::eighty-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is eighty-five percent. | -||
| af|progressIndicator::ninety-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is ninety percent. | -||
| af|progressIndicator::ninety-five-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is ninety-five percent. | -||
| af|progressIndicator::one-hundred-percent-icon | -The icon which is displayed when the progressIndicator's value - divided by maximum is one-hundred percent. | -||
| - Icon Selectors + Trinidad properties | |||
|---|---|---|---|
| Description | |||
| af|selectBooleanCheckbox::disabled-checked-icon | -The icon that is displayed when the checkbox is readOnly, - disabled, and checked. | +-tr-show-lines | +Valid values are true or false (default true). + Determines whether the tree lines are displayed or not. e.g., af|tree + {-tr-show-lines:false} will not show the lines of the tree. |
| af|selectBooleanCheckbox::disabled-unchecked-icon | -The icon that is displayed when the checkbox is readOnly, - disabled, and unchecked. | -||
| af|selectBooleanCheckbox::read-only-checked-icon | -The icon that is displayed when the checkbox is read-only and - checked. | -||
| af|selectBooleanCheckbox::read-only-unchecked-icon | -The icon that is displayed when the checkbox is read-only and - unchecked. | -||
| - Icon Selectors - | -|
|---|---|
| Name | -Description | -
| af|selectBooleanRadio::disabled-selected-icon | -The icon that is displayed when the radio is readOnly, disabled, - and selected. | -
| af|selectBooleanRadio::disabled-unselected-icon | -The icon that is displayed when the radio is readOnly, disabled, - and not selected. | -
| af|selectBooleanRadio::read-only-selected-icon | -The icon that is displayed when the radio is read-only and - selected. | -
| af|selectBooleanRadio::read-only-unselected-icon | -The icon that is displayed when the radio is read-only and not - selected. | -
| - Icon Selectors - | -|
|---|---|
| Name | -Description | -
| af|selectRangeChoiceBar::prev-icon | -The previous icon which is used to go back to previous step. | -
| af|selectRangeChoiceBar::next-icon | -The next icon which is used to go back to next step. | -
| af|selectRangeChoiceBar::prev-disabled-icon | -The previous icon in its disabled state. | -
| af|selectRangeChoiceBar::next-disabled-icon | -The next icon in its disabled state. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|statusIndicator | -Styles the status indicator as a whole. | -
| af|statusIndicator::busy | -Styles the status indicator's busy facet | -
| af|statusIndicator::ready | -Styles the status indicator's ready facet | -
| - Icon Selectors - | -|
| Name | -Description | -
| af|statusIndicator::busy-icon | -The icon that is displayed when the page is busy. The icon - will only be rendered if no facet was specified. Simple skin - references the ".AFBusyIcon:alias" icon. | -
| af|statusIndicator::ready-icon | -The icon that is displayed when the page is not busy. The icon - will only be rendered if no facet was specified. Simple skin - references the ".AFReadyIcon:alias" icon. | -
| .AFBusyIcon:alias | -A named icon that's used by af|statusIndicator::busy-icon and - is also usable in with <tr:icon>. That ability is important - to include the icon even when a facet is specified on the - statusIndicator. | -
| .AFReadyIcon:alias | -A named icon that's used by af|statusIndicator::ready-icon and - is also usable in with <tr:icon>. That ability is important - to include the icon even when a facet is specified on the - statusIndicator. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|tableSelectMany::cell-icon-format | -Styles the tableSelectMany column. | -
| af|tableSelectMany::cell-icon-format-band | -Styles the banded tableSelectMany column. | -
| - Style Selectors - | -|
|---|---|
| Name | -Description | -
| af|tableSelectOne::cell-icon-format | -Styles the tableSelectOne column. | -
| af|tableSelectOne::cell-icon-format-band | -Styles the banded tableSelectOne column. | -
| - Icon Selectors - | -|
|---|---|
| Name | -Description | -
| af|tree::expanded-icon | -This icon is displayed before the expanded tree node. | -
| af|treeTable::collapsed-icon | -This icon is displayed before the collapsed tree node. | -
| af|treeTable::line-icon | -This icon is used as a vertical line between the nodes. - | -
| af|treeTable::line-middle-icon | -This icon is used as the horizontal line in the background of the - expand/collapse icon of the node, in the case the node is not the last - sibling of its parent node. - | -
| af|treeTable::line-last-icon | -This icon is used as the horizontal line in the background of the - expand/collapse icon of the node, in the case the node is the last - sibling of its parent node. - | -
| af|treeTable::node-icon | -This icon selector is used in the case the Node class has a getNodeType() - method that returns the node type as string. The nodetype gets added to this - selector separated by a ':'. If the node is a container (has children) the - following suffixes get added depending on the expanded/collapsed state: - '-expanded' / '-collapsed'. e.g. - "af|treeTable::node-icon:container-collapsed", - "af|treeTable::node-icon:container-expanded", - "af|treeTable::node-icon:noncontainer". - | -
| - Trinidad properties - | -|
| Name | -Description | -
| -tr-show-lines | -Valid values are true or false (default true). - Determines whether the tree lines are displayed or not. e.g., af|tree - {-tr-show-lines:false} will not show the lines of the tree. | -
| - bottom - | -
| bottom | +
| - innerLeft - | -
| innerLeft | +
| - innerRight - | -
| innerRight | +
| - left - | -
| left | +
| - right - | -
| right | +
| - top - | -
| top | +
| - top - | -
| - left - | -
| - right - | -
| - bottom - | -
| - contents - | -
| top | +
| left | +
| right | +
| bottom | +
| contents | +