Select (System API)

The Select component provides a drop-down menu that allows users to select among multiple options.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

This topic describes only system APIs provided by the module. For details about its public APIs, see Select.

menuSystemMaterial²³⁺

menuSystemMaterial(material:Optional<SystemUiMaterial>)

Sets the system material of the drop-down menu. Different system materials correspond to different attribute effects. This API affects paramters of the drop-down menu, such as menuBackgroundColor, borderColor, borderWidth, and shadow. It is not recommended to use this API together with the preceding APIs.

System API: This is a system API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Atomic service API: This API can be used in atomic services since API version 23.

Model restriction: This API can be used only in the stage model.

Parameters

Name	Type	Mandatory	Description
material	Optional<SystemUiMaterial>	Yes	Sets the system material of the drop-down menu. If the material is set to an invalid value or undefined, no system material is set.

Examples

Example 1 Setting System Material for the Select Component and Drop-down Menu

This example uses the menuSystemMaterial API to apply the system material effect to the drop-down menu, and the systemMaterial API to apply the system material effect to the Select component.

The menuSystemMaterial and systemMaterial APIs are added since API version 23.

import { uiMaterial } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Select([{ value: 'SelectOption' },
        { value: 'SelectOption' },
        { value: 'SelectOption' },
        { value: 'SelectOption' },
        { value: 'SelectOption' }])
        .value('Click Show Options')
        .systemMaterial(new uiMaterial.Material({ type: uiMaterial.MaterialType.SEMI_TRANSPARENT }))
        .menuSystemMaterial(new uiMaterial.Material({ type: uiMaterial.MaterialType.SEMI_TRANSPARENT }))
    }
    // Replace $r('app.media.img') with the image resource file you use.
    .backgroundImage($r('app.media.img'))
  }
}

System material not set

select-without-menu-new-material