<a:panel id="basic" header="Basic Resizable">
    Resize Me!
</a:panel>
<a:resizable for="basic" />

<a:panel id="aspectRatio" header="Aspect Ratio">
    Keep the aspect ratio.
</a:panel>
<a:resizable for="aspectRatio" aspectRatio="true"/>

<a:panel id="ghost" header="Ghost">
    A ghost is displayed, don't be scared.
</a:panel>
<a:resizable for="ghost" ghost="true"/>

<a:panel id="animation" header="Animated">
    Resize can be animated as well.
</a:panel>
<a:resizable for="animation" animate="true" effect="swing" effectDuration="normal"/>

<a:panel id="boundaries" header="Boundaries" style="width:300px;height:150px;">
    I have min/max boundaries.
</a:panel>
<a:resizable for="boundaries" minWidth="200" maxWidth="400" minHeight="100" maxHeight="200" />

<a:panel id="grid" header="Grid">
    Resize offset is 20 pixels.
</a:panel>
<a:resizable for="grid" grid="20"/>

<a:panel id="handles" header="Handles">
    I can be resized to any direction.
</a:panel>
<a:resizable for="handles" handles="e,w,n,se,sw,ne,nw"/>

<a:outputPanel id="containmentPanel" layout="block" style="width:400px;height:200px;border:2px solid black;">
    <a:panel id="containment" header="Containment" style="margin:0">
        I'm restricted to my parent's boundaries.
    </a:panel>
    <a:resizable for="containment" containment="true"/>
</a:outputPanel>

<h3>Ajax Callback</h3>
<a:form>
    <a:growl id="growl" showDetail="true" />

    <a:graphicImage id="nature" name="demo/images/nature/nature5.jpg" />

    <a:resizable for="nature" animate="true" ghost="true">
        <a:ajax listener="#{resizableView.onResize}" update="growl" />
    </a:resizable>
</a:form>