A mobile-optimized sample configured for mobile devices with responsive design and mobile-specific features.

Overview

The Mobile sample demonstrates how to build responsive UIs for mobile devices using Luna UI. It includes features specifically designed for mobile platforms, such as SafeArea support for UI Toolkit and optimized layouts for various screen sizes.

Key Features

SafeArea Support

The sample includes SafeArea implementation for UI Toolkit, ensuring your UI properly handles notches, status bars, and other device-specific screen areas on mobile devices.

Responsive Design

All UI elements are designed to adapt to different screen sizes and orientations, providing a consistent experience across various mobile devices.

Mobile Equipment Scene

Features a Mobile Equipment scene with two versions:

  • ListView Version: Traditional list-based equipment display
  • Pagination Version: Paginated equipment view with drag & drop functionality and InventoryWithSlots, allowing you to move items between slots

Touch Optimization

UI interactions are optimized for touch input, ensuring smooth and responsive interactions on mobile devices.

Getting Started

To use the Mobile sample:

  1. Import the Library sample first (required dependency)
  2. Import the Mobile sample
  3. Open the Mobile sample scenes and explore the mobile-specific implementations

Refer to the Quick Start guide for installation instructions.

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL