transparent image rich:spacer HtmlSpacer

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.spacer
component-class | org.richfaces.component.html.HtmlSpacer
component-family | org.richfaces.spacer
renderer-type | org.richfaces.SpacerRenderer
tag-class | org.richfaces.taglib.SpacerTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax::

Example:

    ...
        <rich:spacer/>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlSpacer;
    ...
    HtmlSpacer mySpacer = new HtmlSpacer();
    ...

## Details of Usage

<rich:spacer> is a simple layout component which represents a transparent spacer. Thus, the main attributes that define its style are "style" and "styleClass".

In addition, the attributes are responsible for the component size: "width" and "height".

Moreover, to add e.g. some JavaScript effects, events defined on it are used.

- "onmouseover "

- "onclick "

- "onmouseout "

- etc.

## Look-and-Feel Customization

On the component generation, the framework presents a default rich-spacer class in "styleClass" of a generated component, i.e. in order to redefine appearance of all spacers at once, it's necessary to redefine this class in your own CSS (replacing in the result properties defined in a skin with your own).

To define appearance of the particular spacer, it's possible to write your own CSS classes and properties in the component style attributes ("style", "styleClass" ) modifying component property.

## Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:spacer> usage and sources for the given example.