![]() I’ll skip the decorative CSS properties in my examples here and place here what really matters. With a tiny touch of flex-based CSS things are starting to get serious here. Since we’ll depend on JavaScript, it’s totally fine to have our initial markup with a single list only (we will duplicate it with JS): There are two lists both visually and technically: one is for items that fit in the container, and one for items that don’t. leftIcon: It is used to define the icon on the left side of the TabPanel. It is of string data type & the default value is null. Angular PrimeNG TabView Icons Properties: header: It specifies the title of the tabPanel. Since the amount of tab items is uncertain or volatile, we will make use of Flexbox which ensures the items are nicely spread in the container element without setting the widths. TabView Component is used to display content in the form of tabs. Progressive enhancement and graceful degradation for the win! In this article, we will see how to use TabView Lazy Loading in Angular PrimeNG. ![]() Still, the dependency on JS doesn’t mean we can’t make it usable if for some reason the technology is not available. Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. The main intrigue here is if it’s possible to achieve that without JavaScript? Partly yes, however the limitations that it comes with probably make it only good for a concept museum rather than real life scenarios (anyway, Kenan did a really nice job). All considered, we ended up choosing the later option: Planning Firstly, the problem with the former one is that horizontal scroll as a feature is not always visually obvious for users (especially for narrow elements like tabs) whereas what else can be more obvious than a button (“more”), right? Secondly, scrolling horizontally using a mouse-controlled device isn’t a very comfortable thing to do, so we might need to make our UI more complex with additional arrow buttons. We agreed it should be a one-liner because the amount of tab items is unknown and narrowed our options down to two: horizontal scroll and adaptive with “more” button. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website… There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. Or the priority navigation pattern, or progressively collapsing navigation menu.
0 Comments
Leave a Reply. |