This component provides a bar with an arrow button to the left. Initially the arrow button points to the right and only the information on the bar is displayed. If the bar or arrow is clicked then arrow points down and the hidden content is displayed. Clicking the bar again will close the content display. Nesting these components can create a tree or outline style interaction.
Parameters
- headerUI:ZUI – this is the component to be displayed as the header of the open/close component. This is displayed just next to the indicator arrow.
- hideShowUI:()=>ZUI – this is a function that will return a ZUI component. A function is used so that hidden content is not instantiated until it should be seen. In the case of using OpenCloseUI components to construct an outline or tree, this prevents the full display of the tree being instantiated even when most is not visible. This will be called once when the component is first opened and then will be saved to prevent wasted effort rebuilding the hide/show component in the future.
- initiallyOpen?:boolean – If this is true then initially the hidden part will be displayed. By default this is false.
Attributes
none
Examples
new OpenCloseUI(new TextUI(()=>{ return chapter name; },
()=>{
return new HTMLEditUI()
.getF(()=>{ return chapter content })
.setF((newHTML:string)=>{
save newHTML to chapter file
});
});
The above example will show the name of a chapter and when opened will show an editor to edit the contents of that chapter.
Styling
- HideShowUI – default styling for the whole component
- HideShowUIHeaderBar – default styling for the bar
- HideShowUIContent – default styling for the hidden content