HarmonyOS WebView Component: Navigation Control and History Management
WebView Navigation and History Tracking in HarmonyOS
Web navigation enables users to move between different pages within a WebView component. This functionality enocmpasses history traverasl, programmatic page transitions, and cross-application linking. The following sections demonstrate implementation patterns using HarmonyOS ArkUI TypeScript ...
Posted on Thu, 17 Sep 2026 16:47:42 +0000 by Xyphon
HarmonyOS Development with ArkUI Components - Media Query Implementation
1. Import Required Modules
import mediaquery from '@ohos.mediaquery';
2. Setting Up Media Query Conditions
Use the matchMediaSync interface to define media query conditions and store the returned listener handle. For example, to monitor landscape orientation changes:
const orientationListener = mediaquery.matchMediaSync('(orientation: landscap ...
Posted on Thu, 17 Sep 2026 16:12:09 +0000 by Asperon
HarmonyOS Next UI Framework: JavaScript Syntax Reference
JavaScript Syntax
JavaScript (JS) files are used to define the business logic for HML pages, supporting the ECMA JavaScript language standard. Leveraging JavaScript's dynamic capabilities allows applications to be more expressive and flexible in design. This section details the supported compilation and runtime features for JS files.
Supported ...
Posted on Tue, 15 Sep 2026 16:30:15 +0000 by vitorjamil
Responsive Design with HarmonyOS ArkUI Media Queries
Media queries enable dynamic UI adjustments based on device attributes like screen dimensions, resolution, orientation, and color depth. They form the foundation of responsive application design, ensuring consistent and optimal user experiences across diverse hardware. Typical use cases include adaptive layouts, typography scaling, conditional ...
Posted on Tue, 04 Aug 2026 16:41:01 +0000 by unbreakable9
HarmonyOS ArkUI Combined Gesture Events
Gesture Type
Functionality
Swipe
Fast screen swiping for page navigation and content scrolling
Tap
Single touch for button activation and app launching
Double Tap
Two quick touches for zooming images or opening apps
Long Press
Sustained touch for context menus and drag operations
Pinch
Two-finger movement for zooming and scaling
...
Posted on Tue, 14 Jul 2026 17:03:54 +0000 by ShadowMetis
HarmonyOS ArkUI Text and Span Styling with Advanced Layout Controls
The textCase property enforces consistent capitalization of text content, regardless of the original string.
@Entry
@Component
struct TextCaseExample {
build() {
Column() {
Text("Original Text")
.textCase(TextCase.UpperCase)
.padding(10)
.border({ width: 1 })
Text("Original Text")
...
Posted on Tue, 23 Jun 2026 16:44:07 +0000 by solar_ninja
Styling and Implementing Buttons in HarmonyOS ArkUI
Creating a Circular Button
A circular button can be created by setting the ButtonType to Circle.
Button('Circle', { type: ButtonType.Normal, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90)
Note: The borderRadius property cannot be used to override the shape of a Circle type button.
Customizing Button Appearance
Va ...
Posted on Sat, 20 Jun 2026 16:52:25 +0000 by xsaero00
Text and Span Components in HarmonyOS ArkUI
In HarmonyOS ArkUI, the Text component serves as a container for displaying text content, while the Span component allows for styling specific portions of text within a Text container. The key distinction is that Text provides the overall container and layout properties, whereas Span enables granular text formatting within that container.
Text ...
Posted on Mon, 15 Jun 2026 17:57:03 +0000 by olidenia
Implementing Radio Buttons in HarmonyOS ArkUI
Handling Radio Button Events
In HarmonyOS ArkTS, the Radio component allows users to select one option from a group. Each radio button must share the same group value to ensure mutual exclusivity. Event handling is done via the .onChange() modifier.
// Example: Basic Radio Group with Logging
import router from '@ohos.router';
@Entry
@Component ...
Posted on Sun, 07 Jun 2026 17:31:14 +0000 by perry789
Building a Decoupled Custom Dialog System with ArkUI's Navigation.Dialog
Custom dialogs are essential in mobile application interfaces, covering modal, semi-modal, toast, and other overlay styles. A well-designed dialog component should be independent of specific UI pages and easily triggered from business logic.
Common real-world needs include:
Triggering dialogs from shared services (login prompts, full-screen ad ...
Posted on Wed, 03 Jun 2026 16:24:26 +0000 by sitorush