Common Elements
- template django_logikal/components/commons.html.j
Render a menu bar.
- Parameters:
request (
django.http.HttpRequest|None) – The HTTP request to use.arrow_icon – The path for the arrow icon to use.
menu_icon – THe path for the menu icon to use.
Example
<nav> {{ commons.menu([ menu_item(title='About', view_name='main:about'), menu_item(title='Components', view_name='main:components'), menu_item( title='Blog', submenu=[menu_item(title='Post', view_name='main:post', view_kwargs={'year': '2000'})] ), ], request=request) }} </nav>
<nav> <menu role="menubar" class="desktop"> <li role="none"> <a role="menuitem" id="id_menu_about_desktop" href="main/about//"> About </a> </li> <li role="none" class="active"> <a role="menuitem" id="id_menu_components_desktop" aria-current="page"> Components </a> </li> <li role="none"> <button type="button" role="menuitem" id="id_menu_blog_desktop" aria-haspopup="menu" aria-expanded="false"> Blog <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.000001 68.086113"> <g transform="matrix(0.13838529,0,0,0.13838529,-14.043062,0)"> <g> <path d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z" /> </g> </g> </svg> </button> <menu role="menu" class="group"> <li role="none"> <a role="menuitem" id="id_menu_post_desktop" href="main/post/year/2000/"> Post </a> </li> </menu> </li> </menu> <menu role="menubar" class="mobile"> <li role="none"> <a role="menuitem" id="id_menu_about_mobile" href="main/about//"> About </a> </li> <li role="none" class="active"> <a role="menuitem" id="id_menu_components_mobile" aria-current="page"> Components </a> </li> <li role="none"> <button type="button" role="menuitem" id="id_menu_blog_mobile" aria-haspopup="menu" aria-expanded="false"> Blog <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.000001 68.086113"> <g transform="matrix(0.13838529,0,0,0.13838529,-14.043062,0)"> <g> <path d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z" /> </g> </g> </svg> </button> <menu role="menu" class="group"> <li role="none"> <a role="menuitem" id="id_menu_post_mobile" href="main/post/year/2000/"> Post </a> </li> </menu> </li> </menu> <button class="mobile-menu-icon" id="id_menu_icon" aria-label="Menu" aria-haspopup="menu" aria-expanded="false"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect y="4" width="24" height="3" fill="black" /> <rect y="11" width="24" height="3" fill="black" /> <rect y="18" width="24" height="3" fill="black" /> </svg> </button> </nav>
- macro commons.icon_button(text, icon, id=None, classes=None, title=None, aria_label=None, aria_haspopup=None, aria_expanded=None, aria_controls=None)
Render a link button with an icon.
- Parameters:
text (
str) – The text to use.icon (
str) – The path for the icon to include.id (
str) – The ID to use.classes (
str) – The classes to use.title (
str) – The title to use.aria_label (
str) – The ARIA label to use.aria_haspopup (
str|bool) – Whether the element can trigger a popup.aria_expanded (
bool) – Whether the controlled elements are expanded.aria_controls (
str) – The ID of the element which this button controls.
- macro commons.language_switcher(current_language_code, languages, action_url, csrf_input, text=None, icon='django_logikal/icons/globe.svg')
Render a language switcher.
- Parameters:
current_language_code (
str) – The current language code.languages (
list) – A list of a tuple of available language code, language name pairs.action_url (
str) – The action URL to use.csrf_input (
str) – The CSRF input element to use.text (
str) – The button text to use. Defaults to the current language name.icon (
str) – The path for the icon to include.
Example
{{ commons.language_switcher( current_language_code=language(), languages=settings.LANGUAGES, action_url=url('set_language'), csrf_input=csrf_input ) }}
<div id="id_language_switcher" class="dropdown-form-menu"> <button id="id_language_switcher_toggle" class="icon neutral light" title="Change language" aria-label="Change language" aria-haspopup="menu" aria-expanded="false" aria-controls="id_form_language_menu"> <svg viewBox="0 0 30 30" width="512" height="512" xmlns="http://www.w3.org/2000/svg"> <path d="m27.726 7.559c-4.408-7.793-15.191-9.694-22.015-4.016-.348.336-.917.599-.926 1.142-.001.414.334.751.748.752.189-.001.371-.073.509-.203 1.589-1.472 3.559-2.524 5.587-3.054-1.297 1.612-2.312 4.131-2.875 7.199-2.738-.632-4.524-1.537-5.4-2.138-.288-.177-.709-.14-.934.129-6.069 9.519 1.303 22.546 12.591 22.371 11.298.121 18.476-12.638 12.715-22.182zm-1.69.074c-.972.556-2.596 1.241-4.768 1.745-.563-3.072-1.581-5.594-2.881-7.206 3.07.758 5.97 2.864 7.649 5.461zm-11.025-5.892c1.868 0 3.896 3.081 4.786 7.931-2.757.521-6.816.521-9.573 0 .891-4.851 2.919-7.931 4.787-7.931zm-5.011 9.417c2.901.54 7.121.54 10.022 0 .317 2.526.348 5.416-.048 8.002-3.259.596-6.674.597-9.934.001-.353-2.435-.369-5.543-.04-8.003zm-6.756-2.22c1.125.643 2.917 1.395 5.279 1.931-.335 2.491-.347 5.452-.033 7.958-2.315-.565-4.552-1.436-6.652-2.601-.232-2.444.213-4.967 1.406-7.288zm-1.1 9.145c2.094 1.051 4.303 1.831 6.579 2.335.553 3.136 1.574 5.717 2.888 7.362-4.649-1.138-8.483-5.22-9.467-9.697zm12.756 10.143c-1.782-.115-3.682-2.989-4.591-7.504 3.085.511 6.292.511 9.377.001-.237 1.135-.525 2.259-.913 3.356-.149.387.044.821.43.969s.821-.044.97-.43c.486-1.37.844-2.777 1.108-4.201 2.295-.509 4.524-1.298 6.634-2.363-1.298 5.96-7.169 10.359-13.015 10.172zm6.622-9.4c.348-2.589.303-5.428-.024-7.957 2.378-.539 4.177-1.298 5.3-1.943 1.146 2.235 1.641 4.761 1.409 7.281-2.109 1.175-4.358 2.051-6.685 2.619z" /> </svg> <span>English (US)</span> </button> <form id="id_form_language_menu" class="subgroup" action="set_language/" method="post"> <menu role="menu"> <li role="none"> <button name="language" value="en-gb" type="submit" role="menuitem"> English (GB) </button> </li> </menu> </form> </div>
Usage:
{% import 'django_logikal/components/commons.html.j' as commons %} {% block component_head %}{{ component_head('commons') }}{% endblock %}Components:
- class django_logikal.components.commons.MenuItem(title: str, view_name: str | None = None, view_kwargs: dict[str, ~typing.Any] = <factory>, submenu: list[~django_logikal.components.commons.MenuItem] = <factory>, id: str | None = None, id_prefix: str = 'id_menu')
An item in a menu bar.