feat(button): add button component & demos

lingbopro · Dec 22, 2024 · b8cc852 · b8cc852
1 parent ffd9a06
commit b8cc852
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 0 deletions.
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -33,6 +33,7 @@ export default {
         'utils',
         // component names
         // add component name here when adding new component
+        'button',
         'page',
         'ripple',
       ],

diff --git a/demos/components/button.html b/demos/components/button.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Button · Material-Me Component Demo</title>
+    <link rel="stylesheet" href="../assets/css/index.css" />
+    <style></style>
+    <script type="module">
+      import '../../dist/components/page.js';
+      import '../../dist/components/button.js';
+    </script>
+  </head>
+  <body>
+    <mm-page id="root" theme="auto">
+      <main>
+        <h1>Button</h1>
+        <section>
+          <mm-button> Filled button </mm-button>
+          <mm-button type="elevated"> Elevated button </mm-button>
+          <mm-button type="filled-tonal"> Tonal button </mm-button>
+          <mm-button type="outlined"> Outlined button </mm-button>
+          <mm-button type="text"> Text button </mm-button>
+        </section>
+      </main>
+    </mm-page>
+  </body>
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -37,6 +37,7 @@
         <h1>Material-Me Demo</h1>
         <section class="links">
           <h2>Components</h2>
+          <mm-ripple><a href="./components/button.html">Button</a></mm-ripple>
           <mm-ripple><a href="./components/ripple.html">Ripple</a></mm-ripple>
         </section>
         <section class="links">

diff --git a/src/components/button.ts b/src/components/button.ts
@@ -0,0 +1 @@
+export * from './button/button';
diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -0,0 +1,47 @@
+:host {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  background-color: rgb(var(--mm-color-primary));
+  color: rgb(var(--mm-color-on-primary));
+  font-size: 0.875rem;
+  text-transform: capitalize;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border-radius: 20px;
+  padding: 10px 24px;
+  min-height: 40px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  --mm-ripple-color: currentColor;
+  transition: all 0.12s;
+}
+:host([type='elevated']) {
+  box-shadow: var(--mm-elevation-level1);
+  background-color: rgb(var(--mm-color-surface-container-low));
+  color: rgb(var(--mm-color-primary));
+}
+:host([type='elevated']:hover) {
+  box-shadow: var(--mm-elevation-level2);
+}
+:host([type='filled-tonal']) {
+  background-color: rgb(var(--mm-color-secondary-container));
+  color: rgb(var(--mm-color-on-secondary-container));
+}
+:host([type='filled-tonal']:hover) {
+  box-shadow: var(--mm-elevation-level1);
+}
+:host([type='outlined']) {
+  color: rgb(var(--mm-color-primary));
+  background-color: initial;
+  border: solid 1px rgb(var(--mm-color-outline));
+}
+:host([type='text']) {
+  color: rgb(var(--mm-color-primary));
+  background-color: initial;
+  padding: 10px 14px;
+}
diff --git a/src/components/button/button.html b/src/components/button/button.html
@@ -0,0 +1,2 @@
+<slot></slot>
+<mm-ripple attached></mm-ripple>
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -0,0 +1,23 @@
+import { useElement } from '../../core/element';
+import '../ripple';
+import template from './button.html';
+import style from './button.css';
+
+const name = 'mm-button';
+const props = {
+  type: 'filled' as
+    | 'elevated'
+    | 'filled'
+    | 'filled-tonal'
+    | 'outlined'
+    | 'text',
+};
+
+export class Button extends useElement({
+  template,
+  style,
+  props,
+  syncProps: ['type'],
+}) {}
+
+Button.define(name);
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,2 +1,3 @@
+export * from './button';
 export * from './page';
 export * from './ripple';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<slot></slot>
		<mm-ripple attached></mm-ripple>