Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
814 B
814 B
dock
Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen
Class names
- component:
dock - part:
dock-label - modifier:
dock-active - size:
dock-xs,dock-sm,dock-md,dock-lg,dock-xl
Syntax
<div class="dock {MODIFIER}">{CONTENT}</div>
where content is a list of buttons:
<button>
<svg>{icon}</svg>
<span class="dock-label">Text</span>
</button>
Rules
- {MODIFIER} is optional and can have one of the size class names
- To make a button active, add
dock-activeclass to the button - add
<meta name="viewport" content="viewport-fit=cover">is required for responsiveness of the dock in iOS