Sfoglia il codice sorgente

Utilisation d'un bouton d'action

Arthur Brandao 5 anni fa
parent
commit
6f808397fc
1 ha cambiato i file con 19 aggiunte e 2 eliminazioni
  1. 19 2
      app/src/edit.html

+ 19 - 2
app/src/edit.html

@@ -24,8 +24,21 @@
         <main>
             <div class="container">
                 <div class="row mtop-5">
-                    <div class="col s12 right-align">
-                        <button class="btn-floating btn-large waves-effect waves-light blue tooltipped" data-position="left" data-tooltip="Sauvegarder" onclick="validCard()"><i class="large material-icons">save</i></button>
+                    <div class="col s12 right-align" style="position: relative; min-height: 60px;">
+                        <!--button class="btn-floating btn-large waves-effect waves-light blue tooltipped" data-position="left" data-tooltip="Sauvegarder" onclick="validCard()"><i class="large material-icons">save</i></button-->
+                        <div>
+                            <div class="fixed-action-btn" style="position: absolute; z-index: 10;">
+                                <a class="btn-floating btn-large red">
+                                    <i class="large material-icons">mode_edit</i>
+                                </a>
+                                <ul>
+                                    <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
+                                    <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
+                                    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
+                                    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
+                                </ul>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="row">
@@ -70,6 +83,10 @@
                 });
                 // Load tooltip
                 const tooltip = M.Tooltip.init(document.querySelectorAll('.tooltipped'))[0];
+                // Load action buttons
+                const actionBtn = M.FloatingActionButton.init(document.querySelectorAll('.fixed-action-btn'), {
+                    direction: 'left'
+                });
                 // Load markdown editor
                 mdEditor = loadMarkdownEditor();
                 // Load data if update