khanh.pndc/nextcloud-docs
1
0
Fork 0
mirror of https://github.com/nextcloud/documentation.git synced 2026-01-02 17:59:36 +07:00
Code Issues Packages Projects Releases Wiki Activity

Popover image to code

Browse Source 
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
2017-10-11 07:29:57 +02:00
parent 04dc68fed2
commit 587ecfe033
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
developer_manual/design/popovermenu.rst
View File

@@ -13,37 +13,41 @@ This is a quick menu that open on click. For menus, we use the three-dot-icon.
This is exactly the same as the :ref:`navigation menu <navigation_menu>`. The only difference is the popovermenu class.
.. image:: ../images/popovermenu.png
Basic layout
=============
.. rst-class:: figure-with-code
.. figure:: ../images/popovermenu.png
:alt: Popover image example
.. code:: html
<div class="popovermenu">
<ul>
<li>
<a href="#" class="icon-details">
<span>Details</span>
</a>
</li>
<li>
<button class="icon-details">
<span>Details</span>
</button>
</li>
<li>
<button>
<span class="icon-details"></span><span>Details</span>
</button>
</li>
<li>
<a>
<span class="icon-details"></span><span>Details</span>
</a>
</li>
<ul>
</div>
<div class="popovermenu">
<ul>
<li>
<a href="#" class="icon-details">
<span>Details</span>
</a>
</li>
<li>
<button class="icon-details">
<span>Details</span>
</button>
</li>
<li>
<button>
<span class="icon-details"></span>
<span>Details</span>
</button>
</li>
<li>
<a>
<span class="icon-details"></span>
<span>Details</span>
</a>
</li>
<ul>
</div>
Technical details
==================