cosmemilton-ui/clientLayout & chrome

CmAspectRatio

Mantem uma proporcao previsivel, com superficie e raio opcionais, evitando saltos de layout em conteudo visual.

Import

tsx
import { CmAspectRatio } from "cosmemilton-ui/client";

Preview 16:9

Preview 16:9

Grafico, video ou imagem com altura estavel.

tsx
import { CmAspectRatio } from "cosmemilton-ui/client";
import { CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmAspectRatio ratio={16 / 9} surface="primary" center>
      <CmStack gap="xs" align="center">
        <CmText weight="semibold" tone="inverse">Preview 16:9</CmText>
        <CmText tone="inverse">Grafico, video ou imagem com altura estavel.</CmText>
      </CmStack>
    </CmAspectRatio>
  );
}

API rapida

CmAspectRatio

ratiocenterradiussurface