• WE ARE MOVING

    Visit our new demos website powered by SharePoint and ShortPoint.

  • LET’S GO!


Tabs – Different Styles

Normal Style

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Boxed Style

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Bar Style

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Filled Style

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Simple Style

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Tabs – Different Locations

Right Locations

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Left Location

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Bottom Location

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Tabs – Different Colors

Color: Success

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Color: Violet

Tab Title 1
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 2
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci. Pellentesque ac scelerisque elit, sed auctor turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim ac leo et varius. Maecenas enim leo, pharetra nec cursus eu, pellentesque eget sapien. Morbi pellentesque non nulla a scelerisque. Phasellus porttitor sit amet nisi nec varius.
Tab Title 3
Morbi purus leo, pellentesque non molestie sit amet, vehicula quis orci.

Tabs ShortPoint Option

Option Value Default Description
boxed tabs will be displayed in boxed style
bar tabs will be displayed in bar style
filled tabs will be displayed in filled style
simple tabs will be displayed in simple style
left tabs location will be on the left
right tabs location will be on the right
bottom tabs location will be at the bottom
color color name primary
  • the active tab color and hover style
  • all colors available at ShortPoint Colors page
active number 0 The default active tab

Tab ShortPoint Option

Option Value Default Description
title “text” Required this is the tab title
Why Two Option Tables? Because this ShortPoint consist of two ShortPoints (Parent and Childs). The tab shortpoint should be inside tabs shortpoint. Thats why we have to describe the options you can use in each one.