Something went wrong. Try again.
experimental web port of the Union style engine + adapters
styling theming css solidjs react union kde
Something went wrong. Try again.
1.2 kB · 35 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536import type { JSX } from 'solid-js';import { createMemo } from 'solid-js';import { useUnion } from './useUnion.js';import { toPx } from './utils.js';import { styleGroupToUnionStyleProps } from '@union-web/core';
type Props = { children?: JSX.Element;};
export function DialogButtonBox(props: Props) { const { current, UnionProvider } = useUnion({ role: 'dialogbuttonbox' }); const layoutStyle = createMemo(() => { const u = styleGroupToUnionStyleProps(current()); const s: JSX.CSSProperties = { display: 'flex', 'flex-direction': 'row', 'box-sizing': 'border-box', }; if (u.spacing !== undefined) s.gap = toPx(u.spacing); if (u.padding !== undefined) s.padding = toPx(u.padding); if (u.paddingTop !== undefined) s['padding-top'] = toPx(u.paddingTop); if (u.paddingRight !== undefined) s['padding-right'] = toPx(u.paddingRight); if (u.paddingBottom !== undefined) s['padding-bottom'] = toPx(u.paddingBottom); if (u.paddingLeft !== undefined) s['padding-left'] = toPx(u.paddingLeft); return s; }); return ( <UnionProvider> <div style={layoutStyle()}> {props.children} </div> </UnionProvider> );}