Maslosoft Framework Logo Maslosoft Framework Documentation
Flexible Application Foundation


Vertical

Vertical tabs example. To change where tabs will appear property $placement can be used with predefined constants:

  • Tabs::PlacementTop - default
  • Tabs::PlacementRight
  • Tabs::PlacementLeft
  • Tabs::PlacementBottom

When there are many tabs, vertical align might be good solution

Tabs on left

Content of one

Quisque pulvinar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra vestibulum condimentum. Sed in diam lacinia, volutpat est ut, luctus augue. Pellentesque dignissim eu felis eget condimentum. Phasellus commodo enim eu nibh iaculis pretium. Donec ut sem vel diam mattis vestibulum. Maecenas ornare in ante ut accumsan. Cras quis bibendum felis. Nulla tortor ex, convallis ultricies neque eget, gravida vehicula ipsum. Fusce eu leo arcu. In sed nunc vitae quam consectetur rutrum. Phasellus sed sapien consectetur, hendrerit massa sit amet, vulputate mi. Donec nec efficitur dolor. Donec vehicula ornare enim vel varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut posuere nisi quis libero porttitor, non commodo mi maximus.

Content of two

Quisque pulvinar

Quisque pulvinar leo pharetra enim blandit volutpat. Cras ac massa eget enim rutrum blandit. Donec feugiat augue ante, quis eleifend dui suscipit quis. Vestibulum placerat finibus mi, lacinia pharetra mauris mollis et. Nulla id lobortis enim. Nunc dignissim consectetur convallis. Fusce semper dolor sapien, sit amet consequat diam scelerisque sed. Pellentesque ut ligula at lacus elementum pharetra. Sed nec volutpat velit, quis sodales mi. Nulla vitae mi nisl.

echo Tabs::widget([
	'placement' => Tabs::PlacementLeft,
	'items' => $items
]);

Tabs on right

Content of one

Quisque pulvinar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra vestibulum condimentum. Sed in diam lacinia, volutpat est ut, luctus augue. Pellentesque dignissim eu felis eget condimentum. Phasellus commodo enim eu nibh iaculis pretium. Donec ut sem vel diam mattis vestibulum. Maecenas ornare in ante ut accumsan. Cras quis bibendum felis. Nulla tortor ex, convallis ultricies neque eget, gravida vehicula ipsum. Fusce eu leo arcu. In sed nunc vitae quam consectetur rutrum. Phasellus sed sapien consectetur, hendrerit massa sit amet, vulputate mi. Donec nec efficitur dolor. Donec vehicula ornare enim vel varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut posuere nisi quis libero porttitor, non commodo mi maximus.

Content of two

Quisque pulvinar

Quisque pulvinar leo pharetra enim blandit volutpat. Cras ac massa eget enim rutrum blandit. Donec feugiat augue ante, quis eleifend dui suscipit quis. Vestibulum placerat finibus mi, lacinia pharetra mauris mollis et. Nulla id lobortis enim. Nunc dignissim consectetur convallis. Fusce semper dolor sapien, sit amet consequat diam scelerisque sed. Pellentesque ut ligula at lacus elementum pharetra. Sed nec volutpat velit, quis sodales mi. Nulla vitae mi nisl.

echo Tabs::widget([
	'placement' => Tabs::PlacementRight,
	'items' => $items
]);

Tabs on bottom

Content of one

Quisque pulvinar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra vestibulum condimentum. Sed in diam lacinia, volutpat est ut, luctus augue. Pellentesque dignissim eu felis eget condimentum. Phasellus commodo enim eu nibh iaculis pretium. Donec ut sem vel diam mattis vestibulum. Maecenas ornare in ante ut accumsan. Cras quis bibendum felis. Nulla tortor ex, convallis ultricies neque eget, gravida vehicula ipsum. Fusce eu leo arcu. In sed nunc vitae quam consectetur rutrum. Phasellus sed sapien consectetur, hendrerit massa sit amet, vulputate mi. Donec nec efficitur dolor. Donec vehicula ornare enim vel varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut posuere nisi quis libero porttitor, non commodo mi maximus.

Content of two

Quisque pulvinar

Quisque pulvinar leo pharetra enim blandit volutpat. Cras ac massa eget enim rutrum blandit. Donec feugiat augue ante, quis eleifend dui suscipit quis. Vestibulum placerat finibus mi, lacinia pharetra mauris mollis et. Nulla id lobortis enim. Nunc dignissim consectetur convallis. Fusce semper dolor sapien, sit amet consequat diam scelerisque sed. Pellentesque ut ligula at lacus elementum pharetra. Sed nec volutpat velit, quis sodales mi. Nulla vitae mi nisl.

echo Tabs::widget([
	'placement' => Tabs::PlacementBottom,
	'items' => $items
]);

Vertical Tabs in horizontal tabs

Nesting tabs allows You to fit a lot of user interface components with tree-like structure.

It is good to prepare items as separate variable on such nested structures for better understanding of code.

Content of one

Quisque pulvinar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra vestibulum condimentum. Sed in diam lacinia, volutpat est ut, luctus augue. Pellentesque dignissim eu felis eget condimentum. Phasellus commodo enim eu nibh iaculis pretium. Donec ut sem vel diam mattis vestibulum. Maecenas ornare in ante ut accumsan. Cras quis bibendum felis. Nulla tortor ex, convallis ultricies neque eget, gravida vehicula ipsum. Fusce eu leo arcu. In sed nunc vitae quam consectetur rutrum. Phasellus sed sapien consectetur, hendrerit massa sit amet, vulputate mi. Donec nec efficitur dolor. Donec vehicula ornare enim vel varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut posuere nisi quis libero porttitor, non commodo mi maximus.

Content of two

Quisque pulvinar

Quisque pulvinar leo pharetra enim blandit volutpat. Cras ac massa eget enim rutrum blandit. Donec feugiat augue ante, quis eleifend dui suscipit quis. Vestibulum placerat finibus mi, lacinia pharetra mauris mollis et. Nulla id lobortis enim. Nunc dignissim consectetur convallis. Fusce semper dolor sapien, sit amet consequat diam scelerisque sed. Pellentesque ut ligula at lacus elementum pharetra. Sed nec volutpat velit, quis sodales mi. Nulla vitae mi nisl.

Content of one

Quisque pulvinar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra vestibulum condimentum. Sed in diam lacinia, volutpat est ut, luctus augue. Pellentesque dignissim eu felis eget condimentum. Phasellus commodo enim eu nibh iaculis pretium. Donec ut sem vel diam mattis vestibulum. Maecenas ornare in ante ut accumsan. Cras quis bibendum felis. Nulla tortor ex, convallis ultricies neque eget, gravida vehicula ipsum. Fusce eu leo arcu. In sed nunc vitae quam consectetur rutrum. Phasellus sed sapien consectetur, hendrerit massa sit amet, vulputate mi. Donec nec efficitur dolor. Donec vehicula ornare enim vel varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut posuere nisi quis libero porttitor, non commodo mi maximus.

Content of two

Quisque pulvinar

Quisque pulvinar leo pharetra enim blandit volutpat. Cras ac massa eget enim rutrum blandit. Donec feugiat augue ante, quis eleifend dui suscipit quis. Vestibulum placerat finibus mi, lacinia pharetra mauris mollis et. Nulla id lobortis enim. Nunc dignissim consectetur convallis. Fusce semper dolor sapien, sit amet consequat diam scelerisque sed. Pellentesque ut ligula at lacus elementum pharetra. Sed nec volutpat velit, quis sodales mi. Nulla vitae mi nisl.

echo Tabs::widget([
	'items' => [
		[
			'label' => 'On left',
			'content' => Tabs::widget([
				'placement' => Tabs::PlacementLeft,
				'items' => $items
			])
		],
		[
			'label' => 'On Right',
			'content' => Tabs::widget([
				'placement' => Tabs::PlacementRight,
				'items' => $items
			])
		],
	]
]);