同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
grid-col是栅格布局容器grid-row的子容器组件。
无
支持。
除支持通用属性外,还支持如下属性:
除支持通用样式外,还支持如下样式:
说明:
- 不支持宽度相关样式。
支持通用事件。
支持通用方法。
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
<grid-row style="height:400px;justify-content:space-around;">
<grid-col span="1">
<div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
<text style="color: dodgerblue;" onclick="getCol">內容元素</text>
</div>
</grid-col>
<grid-col span="4" style="background-color:orange;">
<div style="width: 100%;height: 100%;padding: 20px;align-items: center;">
<text onclick="getColWidth">內容元素</text>
</div>
</grid-col>
</grid-row>
</grid-container>
</div>
/* index.css */
.container {
flex-direction: column;
padding-top: 80px;
}
// index.js
import prompt from '@system.prompt';
export default {
getCol(e) {
this.$element('mygrid').getColumns(function (result) {
prompt.showToast({
message: e.target.id + ' result = ' + result,
duration: 3000,
});
})
},
getColWidth(e) {
this.$element('mygrid').getColumnWidth(function (result) {
prompt.showToast({
message: e.target.id + ' result = ' + result,
duration: 3000,
});
})
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。