O conteúdo mais usado e importante sempre deverá estar visivél. Coloque o restante em sua própria página ou secção. Colocar um botão ou link claramente marcados para o resto, como "Mais Opções". Muitos UIs usam setas ou divisas, ">>", como parte do link ou botão.
Esta secção deverá ter um outro botão ou link para deixar o usuário fechá-la novamente. Lembre-se, a maioria dos usuários não vai precisar dele na maior parte do tempo. Apenas certifique-se que à entrada e à saída deste "restante" são óbvios.
Em algumas interfaces, a janela literalmente expande para acomodar os detalhes da secção e, em seguida, encolhe novamente para baixo quando o usuário a fecha.
<?xml version="1.0" ?> <!-- Simple example to demonstrate the Transition class. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- Define one view state, in addition to the base state.--> <mx:states> <mx:State name="Register"> <mx:AddChild relativeTo="{loginForm}" position="lastChild"> <mx:target> <mx:FormItem id="confirm" label="Confirm:"> <mx:TextInput/> </mx:FormItem> </mx:target> </mx:AddChild> <mx:SetProperty target="{loginPanel}" name="title" value="Register"/> <mx:SetProperty target="{loginButton}" name="label" value="Register"/> <mx:SetStyle target="{loginButton}" name="color" value="blue"/> <mx:RemoveChild target="{registerLink}"/> <mx:AddChild relativeTo="{spacer1}" position="before"> <mx:target> <mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/> </mx:target> </mx:AddChild> </mx:State> </mx:states> <mx:transitions> <!-- Define the transition from the base state to the Register state.--> <mx:Transition id="toRegister" fromState="*" toState="Register"> <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}"> <mx:RemoveChildAction/> <mx:SetPropertyAction target="{loginPanel}" name="title"/> <mx:SetPropertyAction target="{loginButton}" name="label"/> <mx:SetStyleAction target="{loginButton}" name="color"/> <mx:Resize target="{loginPanel}"/> <mx:AddChildAction/> </mx:Sequence> </mx:Transition> <!-- Define the transition from the Register state to the base state.--> <mx:Transition id="toDefault" fromState="Register" toState="*"> <mx:Sequence targets="{[loginPanel, registerLink, confirm, loginLink, spacer1]}"> <mx:RemoveChildAction/> <mx:SetPropertyAction target="{loginPanel}" name="title"/> <mx:SetPropertyAction target="{loginButton}" name="label"/> <mx:SetStyleAction target="{loginButton}" name="color"/> <mx:Resize target="{loginPanel}"/> <mx:AddChildAction/> </mx:Sequence> </mx:Transition> </mx:transitions> <!-- Define a Panel container that defines the login form.--> <mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/> <mx:Form id="loginForm" > <mx:FormItem label="Username:"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Password:"> <mx:TextInput/> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:LinkButton id="registerLink" label="Need to Register?" click="currentState='Register'"/> <mx:Spacer width="100%" id="spacer1"/> <mx:Button label="Login" id="loginButton"/> </mx:ControlBar> </mx:Panel> </mx:Application>