feat(button): add start & end slot support

lingbopro · Dec 29, 2024 · d041ee7 · d041ee7
1 parent e0d7031
commit d041ee7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/demos/components/button.html b/demos/components/button.html
@@ -9,6 +9,7 @@
     <script type="module">
       import '../../dist/components/page.js';
       import '../../dist/components/button.js';
+      import '../../dist/components/icon.js';
     </script>
   </head>
   <body>
@@ -22,6 +23,25 @@ <h1>Button</h1>
           <mm-button type="outlined"> Outlined button </mm-button>
           <mm-button type="text"> Text button </mm-button>
         </section>
+        <section>
+          <mm-button>
+            <mm-icon slot="start" title="Search">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                <path
+                  d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
+                />
+              </svg>
+            </mm-icon>
+            With icon in slot
+            <mm-icon slot="end" title="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                <path
+                  d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
+                />
+              </svg>
+            </mm-icon>
+          </mm-button>
+        </section>
       </main>
     </mm-page>
   </body>

diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -45,3 +45,14 @@
   background-color: initial;
   padding: 10px 14px;
 }
+::slotted(mm-icon) {
+  width: 18px;
+}
+::slotted([slot='start']) {
+  margin-left: -8px;
+  margin-right: 8px;
+}
+::slotted([slot='end']) {
+  margin-left: 8px;
+  margin-right: -8px;
+}
diff --git a/src/components/button/button.html b/src/components/button/button.html
@@ -1,2 +1,4 @@
+<slot name="start"></slot>
 <slot></slot>
+<slot name="end"></slot>
 <mm-ripple attached></mm-ripple>