Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests 1 Projects Activity Actions

AppTopBar: automatically switch toolbar variant
All checks were successful
/ depoly (push) Successful in 1m21s
Details

Browse source
This commit is contained in:
thislight 2024-11-26 15:30:39 +08:00
parent bece50643f
commit b2d8c1bb2e
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 4 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/material/AppTopBar.tsx
View file

@ -1,12 +1,15 @@
import { AppBar, Toolbar } from "@suid/material"; import { AppBar, Toolbar } from "@suid/material";
import { splitProps, type JSX, type ParentComponent } from "solid-js"; import { splitProps, type JSX, type ParentComponent } from "solid-js";
import "./AppTopBar.css"; import "./AppTopBar.css";
import { useWindowSize } from "@solid-primitives/resize-observer";
const AppTopBar: ParentComponent<{ const AppTopBar: ParentComponent<{
class?: string; class?: string;
style?: JSX.HTMLAttributes<HTMLElement>["style"]; style?: JSX.HTMLAttributes<HTMLElement>["style"];
}> = (oprops) => { }> = (oprops) => {
const [props, rest] = splitProps(oprops, ["children", "class"]); const [props, rest] = splitProps(oprops, ["children", "class"]);
const windowSize = useWindowSize();
return ( return (
<AppBar <AppBar
class={`AppTopBar ${props.class || ""}`} class={`AppTopBar ${props.class || ""}`}
@ -15,7 +18,7 @@ const AppTopBar: ParentComponent<{
{...rest} {...rest}
> >
<Toolbar <Toolbar
variant="dense" variant={windowSize.width > windowSize.height ? "dense" : "regular"}
class="toolbar" class="toolbar"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }} sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
> >