t-flex

A group of layout components to display and organize components. By default these components' css classes are disabled in order to keep bundle size as small as possible. This is because UnoCSS does not support dynamic class names and we don't want to generate all classes for all breakpoints when they are not actually needed.

To solve this, you can define the properties you want to be generated in your css.config.ts file.

// css.config.ts

import { createUnocssConfig } from "@dija/tohama-vite";

export default createUnocssConfig({
  generator: {
    flex: {
      direction: ["row", "col"],
      justify: ["center", "between", "end"],
      align: ["start", "center", "stretch"],
      breakpoints: ["re"],
    },
  },
});

Basic Usage

<TFlex>
  <TFlexCol col="4" />
  <TFlexCol col="8" />
</TFlex>

Gap

<TFlex gap="2">
  <TFlexCol col="4" />
  <TFlexCol col="8" />
</TFlex>

Justify and Align

<TFlex justify="center" align="end">
  <TFlexCol col="3" />
  <TFlexCol col="5" />
</TFlex>

Responsive Layout

<TFlex wrap="wrap" wrapMd="nowrap">
  <TFlexCol col="6" colMd="3" />
  <TFlexCol col="6" colMd="3" />
  <TFlexCol col="12" colMd="6" />
</TFlex>

t-flex API

No options available

t-flex-col API

No options available