UIKernel/Core
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

Add toggle switch checkbox.

Browse source
This commit is contained in:
Madeorsk 2024-07-07 19:47:29 +02:00
parent 0af652b413
commit 32d5006d9b
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
3 changed files with 49 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demo/DemoApp.tsx
View file

@ -22,6 +22,7 @@ import {MainMenuItemSubmenu, MainMenuLink} from "../src/Components/Menus/MainMen
import {AppItem, AppLink, AppsMenu} from "../src/Components/Menus/AppsMenu"; import {AppItem, AppLink, AppsMenu} from "../src/Components/Menus/AppsMenu";
import {Application} from "../src/Application/Application"; import {Application} from "../src/Application/Application";
import {Outlet} from "react-router-dom"; import {Outlet} from "react-router-dom";
import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
export function DemoApp() export function DemoApp()
{ {
@ -120,6 +121,7 @@ export function DemoApp()
<p>Currently selected datetime: <strong>{datetime ? datetime.toISOString() : "none"}</strong></p> <p>Currently selected datetime: <strong>{datetime ? datetime.toISOString() : "none"}</strong></p>
<Checkbox>Checkbox demo</Checkbox> <Checkbox>Checkbox demo</Checkbox>
<ToggleSwitch>Toggle switch demo</ToggleSwitch>
<Radio name={"radio-test"}>Radio box test</Radio> <Radio name={"radio-test"}>Radio box test</Radio>
<Radio name={"radio-test"}>Radio box test</Radio> <Radio name={"radio-test"}>Radio box test</Radio>

14
src/Components/Forms/ToggleSwitch.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from "react";
import {Check} from "@phosphor-icons/react";
import {classes} from "../../Utils";
export function ToggleSwitch({children, className, type, ...inputProps}: React.PropsWithChildren<React.InputHTMLAttributes<HTMLInputElement>>): React.ReactElement
{
return (
<label className={classes("toggleswitch", className)}>
<input type={"checkbox"} {...inputProps} />
<a className={"button"} tabIndex={-1}><span className={"switch"}></span></a>
{children}
</label>
);
}

34
src/styles/components/forms/_box.less
View file

@ -1,4 +1,4 @@
label.box label.box, label.toggleswitch
{ {
display: block; display: block;
@ -50,3 +50,35 @@ label.box
background: var(--background-lighter); background: var(--background-lighter);
} }
} }
label.toggleswitch
{
> .button
{
display: inline-flex;
align-items: center;
width: 2.5em;
> .switch
{
transition: margin-left 0.25s ease, box-shadow 0.25s ease;
display: inline-block;
margin: auto 0.25em;
width: 0.9em;
height: 0.8em;
border-radius: 0.25em;
box-shadow: 0 0 0 0 var(--foreground-shadow);
border: solid var(--background-darkest) thin;
background: var(--background);
}
}
> input:checked + .button > .switch
{
margin-left: 1.2em;
border-color: transparent;
box-shadow: 0 0 0.4em 0 var(--foreground-shadow);
}
}