Application resources are defined by in the project's resources directory, which is organized as follows:
Application resources are defined in the project's resources directory, which is organized as follows:
- Level-1: base sub-directory, qualifiers sub-directories, and rawfile sub-directory
- The base sub-directory is a default directory. If no qualifiers sub-directories in the resources directory of the application match the device status, the resource file in the base sub-directory will be automatically referenced.
...
...
@@ -13,25 +13,27 @@ Application resources are defined by in the project's resources directory, which
- Level-2: resource sub-directories
- Resource sub-directories store basic elements such as character strings, colors, and floating point numbers, and resource files such as media files.
- Supported files and resource types are listed in the table below:
| File Name | Resource Type |
| File Name | Resource Type |
| -------- | -------- |
| color.json | Color resource. |
| float.json | Resources such as spacing, rounded corners, and fonts. |
| string.json | String resource. |
| plural.json | String resource. |
| media directory | Image resource. |
| color.json | Color resource. |
| float.json | Resources such as spacing, rounded corners, and fonts. |
| string.json | String resource. |
| plural.json | String resource. |
| media directory | Image resource. |
## Referencing Resources
To reference an application resource in a project, use the "$r('app.type.name')" format. app indicates the resource defined in the resources directory of the application. type indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. name indicates the resource name, which you set when defining the resource.
To reference an application resource in a project, use the ```"$r('app.type.name')"``` format. **app** indicates the resource defined in the resources directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be color, float, string, plural, or media. **name** indicates the resource name, which you set when defining the resource.
When referencing resources in the rawfile sub-directory, use the "$rawfile('filename')" format. Currently, $rawfile allows only the <Image> component to reference image resources. In the format, filename indicates the relative path of a file in the rawfile directory, and the file name must contain the file name extension. **NOTE** that the relative path cannot start with a slash (/).
When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. Currently, **$rawfile** allows only the **\<Image>** component to reference image resources. In the format, **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/).
Custom components decorated by @Preview can be previewed in the Previewer of DevEco Studio. When the page is loaded, the custom components decorated by @Preview are created and displayed.
You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded.
