Alloy UI tabs along with AUI layout
Today I want to share with you the tabs that can be created using Alloy UI 1.5.4 tabs component. I know that the demos are available when you download the latest version of the alloy UI: http://alloyui.com/latest/alloy-latest.zip.
I had a hard time finding AUI 1.5.4 release AUI library which is compatible with Liferay 6.1 Release.
The difference is I created vertical tabs using AUI tab component. I will add the exact code later but the logic is use the grid that gets added when you add the aui.js file on to your page.
use aui-30 in left div along with display:block and add aui-70 in right div with display as inline-block. don't forget to bind both of them in aui-100 div. This will give flexible grid structure can help in building responsive layout. With the classic theme added in the page for tabs; it will show up vertically. You've to customize few styles by overriding few CSS into your custom one.
Here you will achieve the vertical tabs via ally UI (AUI 1.5). A good reference link if you're novice to AUI: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-elements-and-events
Please respond if you find it helpful.
No comments:
Post a Comment