harmony 鸿蒙@system.mediaquery (Media Query)

  • 2022-08-09
  • 浏览 (619)

@system.mediaquery (Media Query)

The mediaquery module provides different styles for different media types.

NOTE

  • The APIs of this module are no longer maintained since API version 7. You are advised to use @ohos.mediaquery instead.
  • The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.

Modules to Import

import mediaquery from '@system.mediaquery';

mediaquery.matchMedia

matchMedia(condition: string): MediaQueryList

Creates a MediaQueryList object based on the query condition.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
condition string Yes Query condition.

Return value

Type Description
MediaQueryList Attributes of the MediaQueryList object created. For details, see MediaQueryList attributes.

Example

let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    

MediaQueryEvent

Defines a media query event.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Mandatory Description
matches boolean Yes Matching result.

MediaQueryList

Defines a media query list.

Attributes

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Type Mandatory Description
media string No Serialized media query condition. This parameter is read-only.
matches boolean Yes Matching result.

onchange

onchange?: (matches: boolean) => void

Called when the matches value changes.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
matches boolean Yes New matches value.

MediaQueryList.addListener

addListener(callback: (event: MediaQueryEvent) => void): void

Adds a listener for this MediaQueryList object. The listener must be added before onShow is called, that is, it must be added in the onInit or onReady API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
callback (event: MediaQueryEvent) => void Yes Callback invoked when the query condition changes.

Example

import mediaquery, { MediaQueryEvent } from '@system.mediaquery';
let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');

function maxWidthMatch(e: MediaQueryEvent): void {
  if(e.matches){
    // do something
  }
}
mMediaQueryList.addListener(maxWidthMatch);

MediaQueryList.removeListener

removeListener(callback: (event: MediaQueryEvent) => void): void

Removes the listener for this MediaQueryList object.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
callback (event: MediaQueryEvent) => void) Yes Callback invoked when the query condition changes.

Example

import mediaquery, { MediaQueryEvent } from '@system.mediaquery';
let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');

function maxWidthMatch(e: MediaQueryEvent): void {
  if(e.matches){
    // do something
  }
}
mMediaQueryList.removeListener(maxWidthMatch);

你可能感兴趣的鸿蒙文章

harmony 鸿蒙APIs

harmony 鸿蒙System Common Events (To Be Deprecated Soon)

harmony 鸿蒙System Common Events

harmony 鸿蒙API Reference Document Description

harmony 鸿蒙Enterprise Device Management Overview (for System Applications Only)

harmony 鸿蒙BundleStatusCallback

harmony 鸿蒙@ohos.bundle.innerBundleManager (innerBundleManager)

harmony 鸿蒙@ohos.distributedBundle (Distributed Bundle Management)

harmony 鸿蒙@ohos.bundle (Bundle)

harmony 鸿蒙@ohos.enterprise.EnterpriseAdminExtensionAbility (EnterpriseAdminExtensionAbility)

0  赞