Components组件Base UIBase UI 组件
宽高比
按照指定比例稳定展示图片或媒体内容。
中文模式已适配导航、标题、简介、目录与常用章节名称。翻译状态：部分完成；技术正文目前仍为英文。
Loading JGuang UI example…
安装
Command
Manual
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
安装以下依赖：
npm install @base-ui/react
将以下代码复制到你的项目中。
View complete source: components/ui/aspect-ratio.tsx
根据项目配置更新导入路径。
用法
import { AspectRatio } from "@/components/ui/aspect-ratio"
<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>
Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
Loading JGuang UI example…
从右到左布局
To enable RTL support in JGuang UI, see the RTL configuration guide.
Loading JGuang UI example…
API 参考
AspectRatio
The AspectRatio component displays content within a desired ratio.
| Prop | Type | Default | Required |
|---|---|---|---|
ratio | number | - | Yes |
className | string | - | No |
For more information, see the Base UI documentation.
来源: components/base/aspect-ratio.mdx
JGuang UI 技术文档。