55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import {Switch} from "../../src/primitive-components/material-you-components";
|
|
|
|
export default function Switches() {
|
|
return (
|
|
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
|
|
<h1> Switches </h1>
|
|
<div style={{display: "flex", flexDirection: "column"}}>
|
|
<h2 style={{margin: 0}}> Without icon </h2>
|
|
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
|
<div>
|
|
<h2> Default </h2>
|
|
<Switch/>
|
|
<Switch defaultChecked/>
|
|
</div>
|
|
<div>
|
|
<h2> Disabled </h2>
|
|
<Switch disabled/>
|
|
<Switch disabled defaultChecked/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display: "flex", flexDirection: "column"}}>
|
|
<h2 style={{margin: 0}}> With icon (both)</h2>
|
|
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
|
<div>
|
|
<h2> Default </h2>
|
|
<Switch icon/>
|
|
<Switch defaultChecked icon/>
|
|
</div>
|
|
<div>
|
|
<h2> Disabled </h2>
|
|
<Switch disabled icon/>
|
|
<Switch disabled defaultChecked icon/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{display: "flex", flexDirection: "column"}}>
|
|
<h2 style={{margin: 0}}> With icon (selected)</h2>
|
|
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
|
|
<div>
|
|
<h2> Default </h2>
|
|
<Switch selected icon/>
|
|
<Switch selected defaultChecked icon/>
|
|
</div>
|
|
<div>
|
|
<h2> Disabled </h2>
|
|
<Switch selected disabled icon/>
|
|
<Switch selected disabled defaultChecked icon/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |