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

187 lines
9.0 KiB
TypeScript

import React from 'react';
import {FAB} from "../../src/primitive-components/material-you-components";
export default function Fabs() {
return (
<div className={"m3 m3-wrapper"}>
<div style={{display:"flex",flexDirection:"row",gap:"2em"}}>
<div>
<h1> FABs with elevation</h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div>
<h2> Small </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"}
icon={"edit"}
elevated
centralRipple/>
<FAB variant={"primary"}
size={"small"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
size={"small"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
size={"small"}
icon={"edit"}
elevated/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB icon={"edit"}
elevated/>
<FAB variant={"primary"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
icon={"edit"}
elevated/>
</div>
</div>
<div>
<h2> Large </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"primary"}
size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
size={"large"}
icon={"edit"}
elevated/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"primary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"secondary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"tertiary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
</FAB>
</div>
</div>
</div>
</div>
<div>
<h1> FABs without elevation</h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div>
<h2> Small </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"small"}
icon={"edit"}/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB icon={"edit"}/>
<FAB variant={"primary"} icon={"edit"}/>
<FAB variant={"secondary"} icon={"edit"}/>
<FAB variant={"tertiary"} icon={"edit"}/>
</div>
</div>
<div>
<h2> Large </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"large"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"large"}
icon={"edit"}/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"primary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"secondary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
<FAB variant={"tertiary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
</FAB>
</div>
</div>
</div>
</div>
</div>
</div>
);
}