retrozinndev
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { Accessor } from "ags";
|
|
import { Gtk } from "ags/gtk4";
|
|
|
|
|
|
export interface SeparatorProps {
|
|
class?: string;
|
|
alpha?: number;
|
|
cssColor?: string;
|
|
orientation?: Gtk.Orientation;
|
|
size?: number;
|
|
spacing?: number;
|
|
margin?: number;
|
|
visible?: boolean | Accessor<boolean>;
|
|
}
|
|
|
|
export function Separator(props: SeparatorProps = {
|
|
orientation: Gtk.Orientation.HORIZONTAL
|
|
}) {
|
|
props.alpha = props.alpha ?
|
|
(props.alpha > 1 ?
|
|
props.alpha / 100
|
|
: props.alpha)
|
|
: 1;
|
|
|
|
props.orientation = props.orientation ?? Gtk.Orientation.HORIZONTAL;
|
|
|
|
return <Gtk.Box name={"separator"} vexpand={props.orientation === Gtk.Orientation.HORIZONTAL}
|
|
hexpand={props.orientation === Gtk.Orientation.VERTICAL}
|
|
class={`separator ${ props.orientation === Gtk.Orientation.VERTICAL ?
|
|
"vertical" : "horizontal" }`} visible={props.visible}
|
|
css={`.vertical { padding: ${props.spacing ?? 0}px ${props.margin ?? 7}px; }
|
|
.horizontal { padding: ${props.margin ?? 4}px ${props.spacing ?? 0}px; }`}>
|
|
|
|
<Gtk.Box class={`${props.orientation === Gtk.Orientation.VERTICAL ?
|
|
"vertical"
|
|
: "horizontal"} ${props.class ?? ""}`}
|
|
vexpand={props.orientation === Gtk.Orientation.HORIZONTAL}
|
|
hexpand={props.orientation === Gtk.Orientation.VERTICAL}
|
|
|
|
css={`* {
|
|
background: ${ props.cssColor ?? "lightgray" };
|
|
opacity: ${props.alpha};
|
|
}
|
|
.horizontal { min-width: ${ props.size ?? 1 }px; }
|
|
.vertical { min-height: ${ props.size ?? 1 }px; }`}
|
|
/>
|
|
</Gtk.Box>
|
|
}
|