Add button feature with Vue components and styling

khannedy · khannedy · commit 28baf0ada361 · 2024-12-26T09:56:59.000+07:00
Introduced a new "button" feature consisting of reusable Vue components. Created `ButtonApp.vue` and `MyButton.vue` for functionality and styling, and updated routing in `vite.config.js`. Includes dynamic props handling and interaction logic.
diff --git a/button.html b/button.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/button.js"></script>
+  </body>
+</html>
diff --git a/src/button.js b/src/button.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import ButtonApp from "./components/ButtonApp.vue";
+
+createApp(ButtonApp).mount("#app");
diff --git a/src/components/ButtonApp.vue b/src/components/ButtonApp.vue
@@ -0,0 +1,42 @@
+<script setup>
+
+import MyButton from "./MyButton.vue";
+
+function clickHandler(){
+  alert("You click me");
+}
+</script>
+
+<template>
+<MyButton class="button" @click="clickHandler" name="Eko" contoh="Kurniawan"/>
+</template>
+
+<style scoped>
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.button:hover {
+  background-color: #0056b3;
+  transform: scale(1.05);
+}
+
+.button:active {
+  background-color: #00408d;
+  transform: scale(0.98);
+}
+
+.button:focus {
+  outline: 2px solid #80bdff;
+  outline-offset: 2px;
+}
+</style>
diff --git a/src/components/MyButton.vue b/src/components/MyButton.vue
@@ -0,0 +1,18 @@
+<script setup>
+import {useAttrs} from "vue";
+
+const props = defineProps(["contoh"])
+console.info(props)
+
+const attributes = useAttrs();
+console.info(attributes);
+
+</script>
+
+<template>
+<button>My Button : {{attributes.name}}</button>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/vite.config.js b/vite.config.js
@@ -17,6 +17,7 @@ export default defineConfig({
                 contact: "contact.html",
                 product: "product.html",
                 note: "note.html",
+                button: "button.html",
             }
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export default defineConfig({`
`17`	`17`	`contact: "contact.html",`
`18`	`18`	`product: "product.html",`
`19`	`19`	`note: "note.html",`
	`20`	`+ button: "button.html",`
`20`	`21`	`}`
`21`	`22`	`}`
`22`	`23`	`}`