jonas/TIF22A_AnwProjekt_B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Status Bar Active Element Highlighted

Browse Source
This commit is contained in:
brausjonas
2023-05-02 23:08:41 +02:00
parent 05e3916952
commit d9dd4c6cb9
2 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anwendung/src/components/StatusBar.jsx
+6 -3
View File
@@ -6,12 +6,15 @@ export default function StatusBar(p)
let classNames = ["not-started", "started", "finished"]; let classNames = ["not-started", "started", "finished"];
let index = p.progress / 50; let index = p.progress / 50;
let actives = ["", "", ""]
actives[index] = "active";
return ( return (
<div className={"step-container"}> <div className={"step-container"}>
<div className={"steps"}> <div className={"steps"}>
<span className={"step " + classNames[index]}>1</span> <span className={"step " + classNames[index] + " " + actives[0]}>1</span>
<span className={"step " + classNames[index]}>2</span> <span className={"step " + classNames[index] + " " + actives[1]}>2</span>
<span className={"step " + classNames[index]}>3</span> <span className={"step " + classNames[index] + " " + actives[2]}>3</span>
<div className={"progress-bar " + classNames[index]} <div className={"progress-bar " + classNames[index]}
style={{ style={{
width: p.progress + "%" width: p.progress + "%"
anwendung/src/styles/globals.css
+6
View File
@@ -111,6 +111,12 @@ Step Progress Bar
background-image: linear-gradient(#43C20BFF, #0bc27c); background-image: linear-gradient(#43C20BFF, #0bc27c);
} }
.steps .active
{
border-width: 3px;
border-color: #1e2428;
}
.progress-bar .progress-bar
{ {
position: absolute; position: absolute;