组件 · 布局
AspectRatio 宽高比
按比例约束子元素尺寸的容器。
使用建议
- 避免:与绝对定位冲突时强行嵌套
- 限制:属性与导出以 @selrux/ui 对应子路径 d.ts/源码为准,禁止臆造
引入
tsx
import { AspectRatio } from '@selrux/ui/aspect-ratio';演练场
调节下方可实现的字面量属性,实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。
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