Space

This composable provides an easy way to define utility classes like margin, negative margin and padding. Use it directly or by providing properties to components.

Basic usage with margin and padding

There are many variations of passages!
There are many variations of passages!
const Example = defineComponent({
  setup() {
    const space = useSpace({
      marginY: "re",
      padding: "md",
    });

    return () => <div class={space.value}>...</div>;
  },
});

Usage with t-cell component instead

There are many variations of passages!
There are many variations of passages!
<TCell p="md" my>
  There are many variations of passages!
</TCell>

Usage with t-button component

<TButton design="raised" me="sm">
    Call
</TButton>
<TButton design="raised" color="alert">
    Email
</TButton>

Usage with other components and t-flex layout

There are many variations of passages!

[email protected]

mysite.com

<TCard design="flat" py="lg" px>
    <TFlex align="center">
        <TIconButton design="outlined" color="primary" size="xl" to="/" icon="mdi:account" me />

        <TCell>
            <TText size="lg" weight="normal" tint="dark" leading="tight" mb="sm">
                There are many variations of passages!
            </TText>

            <TFlex>
                <TText size="sm" weight="normal" leading="line" me="md">
                    [email protected]
                </TText>
                <TText size="sm" weight="normal" leading="line">
                    mysite.com
                </TText>
            </TFlex>
        </TCell>
    </TFlex>
</TCard>

<TDivider my="md" nmx="lg" />

<TButton design="raised" to="/" me="sm">
    Call
</TButton>
<TButton design="raised" to="/" color="alert">
    Email
</TButton>

Composables

Slider

Composables

Text

Table of Contents