LevelIndicator |
||||||||||
Developer’s Guide Home
Installation and Configuration Common Concepts Components Index Border Layout Panel Calendar Chart Command Button Command Link Composite Filter Confirmation Data Table Date Chooser Day Table Drop Down Field Dynamic Image Folding Panel For Each Graphic Text Hint Label Input Text Input Textarea Layered Pane Level Indicator Popup Layer Popup Menu Select Boolean Checkbox Select Many Checkbox Select One Radio Spinner Suggestion Field Tabbed Pane Tab Set Tree Table Two List Selection Window Focus Load Bundle Scroll Position Ajax Framework Validation Framework Tag Reference API Reference |
Overview
Key FeaturesBasic ConfigurationThe colors for indicator's segments for different level areas can be customized using the colors attribute, which can either be specified in-place as a comma-separated list of color names, or as a binding to a collection/array of color names. <o:levelIndicator value="0.8" orientation="horizontal" colors="blue,orange,violet" transitionLevels="0.35, 0.6"/> The above code example will produce the following results. Customizing StylesYou can change the size and style of the entire component using the <o:levelIndicator> tag's style and styleClass attributes. Size of a single segment can be customized using the segmentSize attribute, as shown on the examples below. <o:levelIndicator value="0.8" orientation="horizontal" style="background-color: #e6e6e6; border: 1px solid #333; width: 350px; height: 40px;" segmentSize="5" colors="blue,orange,violet" transitionLevels="0.35, 0.6"/> You can also customize the brightness of the "inactive" segments – the segments that are currently "turned off" to the right of the currently displayed level. This can be done by specifying the inactiveSegmentIntensity attribute as a double value in range [0..1], where 0 corresponds to a totally dimmed segments and 1 corresponds to the full brightness display like the one that is used for the "active" segments. The default value is 0.2, which corresponds to a 20% brightness. Client-Side APIAll client-side API methods are listed in the following table:
|
|||||||||
© 2010 TeamDev Ltd. | ![]() |