A SafeArea component is a component in the safe area of the notch screen.
Attribute
Attribute | Type | Required | Default value | Description |
position | 'bottom' | 'top' | 'both' | No | 'both' | The location of the safe area. |
className | string | No | '' | The class name. |
Style class
Class name | Description |
amd-safe-area | The style of the entire safe area. |
amd-safe-area-top | The style of the safe area on the top. |
amd-safe-area-bottom | The style of the safe area on the bottom. |
Code sample
The following shows an example of the code in the index.axml file:
<safe-area className="container">
I celebrate myself, and sing myself,
And what I assume you shall assume,
For every atom belonging to me as good belongs to you.
I loafe and invite my soul,
I lean and loafe at my ease observing a spear of summer grass.
My tongue, every atom of my blood, form’d from this soil, this air,
Born here of parents born here from parents the same, and their parents the same,
I, now thirty-seven years old in perfect health begin,
Hoping to cease not till death.
Creeds and schools in abeyance,
Retiring back a while sufficed at what they are, but never forgotten,
I harbor for good or bad, I permit to speak at every hazard,
Nature without check with original energy.
</safe-area>The following shows an example of the code in the index.js file:
Page({});The following shows an example of the code in the index.acss file:
.container {
line-height: 48rpx;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "SafeArea",
"usingComponents": {
"safe-area": "antd-mini/es/SafeArea/index"
},
"transparentTitle": "always"
}