Aspect Ratio
This composable provides an easy way to apply aspect ratio styling.
Usage
Pass the ratio value to useAspectRatio and apply the classes and style it generates to the element.
9 / 16 Box
import { TCard, TFlex } from "@dija/tohama-components";
import { useAspectRatio } from "@dija/tohama-use";
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const ratio = useAspectRatio({
ratio: 9 / 16,
});
return () => (
<TCard class={ratio.classes.value} style={ratio.style.value} design="raised">
<TFlex justify="center" align="center">
9 / 16 Box
</TFlex>
</TCard>
);
},
});