Angular Tabs Menu with Touch Support : MenuTouch


Tabs Menu organize content across different screens, data sets, and other interactions.

Angular Tabs Menu with Touch Support This demo lets you preview the tab component, its variations, and configuration options. Each tab displays a different type of tab.

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

Do.

Tab labels can include icons and text. Text labels should be short.

Don’t.

Don’t use tabs to move through sequential content that needs to be read in a particular order.

Do.

Present tabs as a single row above their associated content.

Combinations with other components

Tabs can be paired with components like top app bars, or nested in components like cards and sheets.

Principles

Tabs should be scalable, informative, and comparable

As tabs can horizontally scroll, a UI can have as many tabs as needed.

Anatomy

  1. Container

  2. Inactive icon (Optional if there’s a label)
  3. Inactive text label (Optional if there’s an icon)

  4. Tab item

Text labels should clearly and succinctly describe the content of the tab they represent. Tab content should contain a cohesive set of items that share a common characteristic.

Tab labels appear in a single row. They can use a second line if needed, with truncated text. Alternatively, you can use scrollable tabs to allow room for longer titles.

For More Jquery Plugins And Download Click


 

Leave a Reply

Your email address will not be published. Required fields are marked *