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.3 kB · 37 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738import type { JSX } from 'solid-js';import { createMemo } from 'solid-js';import { useUnion } from './useUnion.js';import { styleGroupToUnionStyleProps } from '@union-web/core';
type Props = { children?: JSX.Element; spacing?: number; style?: JSX.CSSProperties;};
export function RowLayout(props: Props) { const { current, UnionProvider } = useUnion({ role: 'rowlayout' }); const layoutStyle = createMemo(() => { const u = styleGroupToUnionStyleProps(current()); const s: JSX.CSSProperties = { display: 'flex', 'flex-direction': 'row', 'box-sizing': 'border-box', }; if (u.padding !== undefined) s.padding = u.padding; if (u.paddingTop !== undefined) s['padding-top'] = u.paddingTop; if (u.paddingRight !== undefined) s['padding-right'] = u.paddingRight; if (u.paddingBottom !== undefined) s['padding-bottom'] = u.paddingBottom; if (u.paddingLeft !== undefined) s['padding-left'] = u.paddingLeft; const gap = props.spacing ?? u.spacing; if (gap !== undefined) s.gap = typeof gap === 'number' ? `${gap}px` : gap; return { ...s, ...props.style }; }); return ( <UnionProvider> <div style={layoutStyle()}> {props.children} </div> </UnionProvider> );}