wisecolt/smarthome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ui elements

Browse Source
This commit is contained in:
szbk
2024-04-07 23:38:03 +03:00
parent b8cb55f7f1
commit 6f9aee85a9
2 changed files with 33 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Header.svelte
View File

@@ -1,14 +1,22 @@
<script>
import logo from "../assets/logo.png";
</script>
<div class="head">SMART HOME</div> <div class="head">SMART HOME</div>
<style> <style>
.head { .head {
background-color: #fff;
width: 100vw; width: 100vw;
height: 70px; height: 70px;
background-color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding-left: 20px; padding-left: 20px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05); box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
font-size: 25px;
}
.logo{
width: 50px;
} }
</style> </style>

29
src/libs/ui/Stepper.svelte
View File

@@ -1,4 +1,5 @@
<script> <script>
let value;
let counter = 0; let counter = 0;
const increaseCounter = () => { const increaseCounter = () => {
@@ -7,6 +8,11 @@
const decreaseCounter = () => { const decreaseCounter = () => {
counter = counter < 1 ? 0 : counter - 1; counter = counter < 1 ? 0 : counter - 1;
}; };
const handleChange = (e) => {
value = e.target.value;
console.log(value);
};
</script> </script>
<div class="stepper"> <div class="stepper">
@@ -19,7 +25,9 @@
> >
- -
</div> </div>
<div class="number">{counter}</div> <div class="number">
<input class="number-text" type="text" bind:value={counter} on:input={handleChange} />
</div>
<div <div
class="button increase" class="button increase"
on:click={increaseCounter} on:click={increaseCounter}
@@ -38,7 +46,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 5px; border-radius: 5px;
border: solid 1px #7B819E; border: solid 1px #7b819e;
box-sizing: border-box; box-sizing: border-box;
padding: 0px; padding: 0px;
} }
@@ -48,10 +56,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-left: solid 1px #7B819E; border-left: solid 1px #7b819e;
border-right: solid 1px #7B819E; border-right: solid 1px #7b819e;
color: #4a4d5d; color: #4a4d5d;
} }
.number-text {
box-sizing: border-box;
width: 40px;
height: 100%;
border: none;
font-size: 20px;
text-align: center;
}
.number-text:focus {
outline: none;
}
.button { .button {
width: 40px; width: 40px;
height: 100%; height: 100%;
@@ -59,7 +78,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 28px; font-size: 28px;
color: #7B819E; color: #7b819e;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
padding: 0px; padding: 0px;