material-you-react/app/components/switches.tsx

57 lines
2.6 KiB
TypeScript
Raw Normal View History

2024-01-25 22:43:42 +03:00
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: "row", gap: "2em"}}>
<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>
2024-01-25 22:43:42 +03:00
</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>
2024-01-25 22:43:42 +03:00
</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>
2024-01-25 22:43:42 +03:00
</div>
</div>
</div>
</div>
);
}