组件 · 布局

AspectRatio 宽高比

按比例约束子元素尺寸的容器。

入口 @selrux/ui/aspect-ratio · 源码 src/components/aspect-ratio/index.ts · 1 个组件 · 发布状态 preview

使用建议

  • 避免:与绝对定位冲突时强行嵌套
  • 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造

引入

tsx
import { AspectRatio } from '@selrux/ui/aspect-ratio';

演练场

调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

ratio 固定为 16/9(数字控件无法表达分数)。

无可调节的字面量属性;下方为组合用法预览。

16 : 9

代码演示

基础用法

ratio 为宽高比(宽 / 高),子元素填满容器。

16 : 9

正方形

ratio={1}。

1 : 1

API

属性覆盖:示例用到 1 / 1 个自有属性(100%)

由 scripts/demo-coverage.mjs 统计,不含 className / style / 原生透传属性与纯转发事件。

AspectRatio

主题化宽高比容器。

属性说明类型默认值
ratio宽/高正数,如 16/9;非法运行时回退 1。number-

另有 280 项原生属性与事件继承自 HTMLAttributes,原样透传。

导出类型:AspectRatioProps