1 Star 0 Fork 5.3K

OpenHarmony-build / docs

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
ts-component-based-preview.md 1.42 KB
一键复制 编辑 原始数据 按行查看 历史
zengyawen 提交于 2021-11-10 20:02 . add arkui

@Preview

用**@Preview装饰的自定义组件可以在DevEco的PC预览上进行单组件预览,加载页面时,将创建并呈现@Preview**装饰的自定义组件。

说明: 在单个源文件中,最多可以使用**@Preview**装饰一个自定义组件。

示例

@Preview的用法如下:

// Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device.
@Entry
@Component
struct MyComponent {
    build() {
        Column() {
            Row() {
                Text('Hello World!')
                    .fontSize("50lpx")
                    .fontWeight(FontWeight.Bold)
            }
            Row() {
                Component1()
            }
            Row() {
                Component2()
            }
        }
    }
}
@Preview
@Component
struct Component1 {
    build() {
        Column() {
            Row() {
                Text('Hello Component1')
                    .fontSize("50lpx")
                    .fontWeight(FontWeight.Bold)
            }
        }
    }
}

@Component
struct Component2 {
    build() {
        Column() {
            Row() {
                Text('Hello Component2')
                    .fontSize("50lpx")
                    .fontWeight(FontWeight.Bold)
            }
        }
    }
}
1
https://gitee.com/openharmony-build/docs.git
git@gitee.com:openharmony-build/docs.git
openharmony-build
docs
docs
master

搜索帮助