goog.ui.Control

This control was created programmatically: 

This control dispatches ENTER, LEAVE, and ACTION events on mouseover, mouseout, and mouseup, respectively. It supports keyboard focus.

This was created by decorating a SPAN:  Decorated Example
You need to enable this component first.

This control is configured to dispatch state transition events in addition to ENTER, LEAVE, and ACTION. It also supports keyboard focus. Watch the event log as you interact with this component.



Custom Renderers

This control was created using a custom renderer: 

This was created by decorating a DIV via a custom renderer: 
  Insert Picture

Extra CSS Styling

These controls have extra CSS classes applied: 

Use the addClassName API to add additional CSS class names to controls, before or after they're rendered or decorated.

Right-to-Left Rendering

These controls are rendered right-to-left: 

These right-to-left controls were progammatically created:

These right-to-left controls were decorated:

Hello, world
Sample control

On pre-FF3 Gecko, margin-left and margin-right are ignored, so controls render right next to each other. A workaround is to include some  s in between controls.

Event Log

The control with the orange outline has keyboard focus.