mirror of
https://github.com/nextcloud/documentation.git
synced 2026-01-03 02:09:45 +07:00
Collapsible nav
+ collapsible animation Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
@@ -1,7 +1,7 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _checkboxes:
|
||||
.. _html:
|
||||
|
||||
===============
|
||||
Checkboxes
|
||||
Html elements
|
||||
===============
|
||||
@@ -9,5 +9,4 @@ Design Guidelines
|
||||
settings
|
||||
content
|
||||
popovermenu
|
||||
progress
|
||||
checkboxes
|
||||
html
|
||||
|
||||
@@ -29,18 +29,18 @@ Basic layout
|
||||
|
||||
.. code:: html
|
||||
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<li><a href="#">First level entry</a></li>
|
||||
<li>
|
||||
<a href="#">First level container</a>
|
||||
<ul>
|
||||
<li><a href="#">Second level entry</a></li>
|
||||
<li><a href="#">Second level entry</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<li><a href="#">First level entry</a></li>
|
||||
<li>
|
||||
<a href="#">First level container</a>
|
||||
<ul>
|
||||
<li><a href="#">Second level entry</a></li>
|
||||
<li><a href="#">Second level entry</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Utils
|
||||
======
|
||||
@@ -49,22 +49,22 @@ Each entry is allowed to have a counter and/or a button for user interaction.
|
||||
|
||||
* The ``app-navigation-entry-utils`` snippet need to be placed right next to the main link of your entry.
|
||||
* Maximum **two** items are allowed into the utils section. You can have:
|
||||
* Two :ref:`buttons <navigation_buttons>`
|
||||
* One :ref:`button <navigation_buttons>` and one :ref:`button <navigation_counter>`
|
||||
* Two :ref:`buttons <navigation_buttons>`
|
||||
* One :ref:`button <navigation_buttons>` and one :ref:`button <navigation_counter>`
|
||||
* You **can't** have more than two buttons, if you need more, you need to add a menu.
|
||||
* The order of the button and the counter are **not** interchangeable. You need to put the counter before the menu.
|
||||
|
||||
.. code:: html
|
||||
:class: with-figure
|
||||
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
.. _navigation_menu:
|
||||
|
||||
@@ -82,28 +82,28 @@ For the global rules and/or layout, you can check the dedicated :ref:`popover me
|
||||
|
||||
.. code:: html
|
||||
|
||||
<div class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-add"></span>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-rename"></span>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-delete"></span>
|
||||
<span>Remove</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-add"></span>
|
||||
<span>Add</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-rename"></span>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="icon-delete"></span>
|
||||
<span>Remove</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
.. _navigation_counter:
|
||||
|
||||
@@ -119,7 +119,7 @@ Do not change the alignment of the text. If you're using
|
||||
|
||||
.. code:: html
|
||||
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
<li class="app-navigation-entry-utils-counter">1</li>
|
||||
|
||||
.. _navigation_buttons:
|
||||
|
||||
@@ -137,16 +137,16 @@ The same way we display the menu three-dot-icon button, you're allowed to use up
|
||||
|
||||
.. code:: html
|
||||
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button class="icon-edit"></button>
|
||||
</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button class="icon-delete"></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="app-navigation-entry-utils">
|
||||
<ul>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button class="icon-edit"></button>
|
||||
</li>
|
||||
<li class="app-navigation-entry-utils-menu-button">
|
||||
<button class="icon-delete"></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Drag and drop
|
||||
==============
|
||||
@@ -156,22 +156,55 @@ In case of jQuery UI's droppable feature, the **hoverClass** option should be se
|
||||
|
||||
.. code:: html
|
||||
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<li><a href="#">First level entry</a></li>
|
||||
<li class="drag-and-drop">
|
||||
<a href="#" class="icon-folder">Folder name</a>
|
||||
<ul>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="app-navigation">
|
||||
<ul>
|
||||
<li><a href="#">First level entry</a></li>
|
||||
<li class="drag-and-drop">
|
||||
<a href="#" class="icon-folder">Folder name</a>
|
||||
<ul>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
<li><a href="#">Folder contents</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Collapsible entry
|
||||
==================
|
||||
|
||||
By default, all sub-entries are shown.
|
||||
This behavior can be changed by creating a collapsible menu.
|
||||
This way, the menu will be hidden and an arrow will be added in in front of it (replacing the icon if any).
|
||||
|
||||
The opening of the menu is activated and animated by the class ``open`` on the main ``li``.
|
||||
|
||||
* You can **not** have a collapsible menu on a sub-item, this can only exist on a top-level element.
|
||||
* You can set the open class by default if you want.
|
||||
* Do **not** use the collapsible menu if your element does not have sub-items.
|
||||
* You **still** need to use JS to handle the click event.
|
||||
|
||||
.. IMPORTANT::
|
||||
* If your top-level link is only used as a header, the **entire** ``a`` needs to be used to toggle the ``open`` class.
|
||||
* If your top-level link is used to redirect the user or to trigger something else, you **need** to add the collapsible button and use it as the ``open`` class toggle trigger.
|
||||
|
||||
.. figure:: ../images/navigation-collapsible.gif
|
||||
:alt: Collapsible navigation entry
|
||||
:align: right
|
||||
|
||||
.. code:: html
|
||||
|
||||
<li class="collapsible open">
|
||||
<button class="collapse"></button> This is optional
|
||||
<a href="#" class="icon-folder">Folder collapsed menu</a>
|
||||
<ul>
|
||||
<li><a href="#">Simple entry</a></li>
|
||||
<li><a href="#">Simple entry</a></li>
|
||||
<li><a href="#">Simple entry</a></li>
|
||||
<li>
|
||||
<a class="icon-folder" href="#">Simple folder</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Entry bullet
|
||||
=============
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
|
||||
.. _progress:
|
||||
|
||||
===============
|
||||
Progress bar
|
||||
===============
|
||||
BIN
developer_manual/images/navigation-collapsible.gif
Normal file
BIN
developer_manual/images/navigation-collapsible.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
developer_manual/images/navigation-collapsible.png
Normal file
BIN
developer_manual/images/navigation-collapsible.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Reference in New Issue
Block a user