187 lines
9.0 KiB
TypeScript
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>
|
|
);
|
|
} |