Latest Updates

The Datetime module can create date picker instances, supporting single or multiple date selection, as well as date range selection. It also supports the use of lunar calendars and custom events.

The fieldTools utility functions can be used to get form field values, set form field values, and reset form field values. Supports both native form fields and custom form fields.

The Valid validation module performs value validation on form fields. It requires the form field to have a 'name' attribute and is best used within a 'form' node. When submitting the form, 'validate' supports secondary validation. It also supports as...

The Valid validation module performs value validation on form fields. It requires the form field to have a 'name' attribute and is best used within a 'form' node. When submitting the form, 'validate' supports secondary validation. It also supports as...

The Valid validation module performs value validation on form fields. It requires the form field to have a 'name' attribute and is best used within a 'form' node. When submitting the form, 'validate' supports secondary validation. It also supports as...

The Message module displays real-time status notifications, including success, error, information, question, and warning types. It features:Large icon/title mode for emphasis;9 customizable display positions;HTML text support

The Message module displays real-time status notifications, including success, error, information, question, and warning types. It features:Large icon/title mode for emphasis;9 customizable display positions;HTML text support

Ajax is a fundamental method for asynchronous data retrieval in frontend development. While similar to jQuery's $.ajax in usage, OrcaUI's implementation has unique characteristics: supports automatic data type detection (no dataType parameter require...

The notice utility function is implemented by the Dialog library, which can quickly open a text notification and customize the opening position.

The alert utility function can quickly open a warning dialog that requires clicking 'confirm' to close, serving as a replacement for the native alert method.

The confirm utility function simulates the native confirm method, allowing quick opening of a dialog box with confirm and cancel options.

Empty includes styles or states displayed for blank content or empty tags

Bullet is commonly referred to as an unordered list or brief news, primarily consisting of short text and usually without accompanying images; bullet can also consist of one or more lines of text but may be supplemented with small images or icons; bu...

Single-line and multi-line ellipsis are essential when dealing with lengthy text. The _ell[-*] style class enables text ellipsis, supporting both single-line and multi-line ellipsis. Multi-line ellipsis accommodates different font sizes, and uses em ...

A scrollable container (scroller) is used to display content that is too wide or tall by enabling scrolling. It supports both horizontal and vertical scrolling.

Atomic processing of display properties; alignment is divided into two main categories: inline element alignment (left/center/right) and flex child element alignment; parent alignment can be independently configured using _a[-*] classes.

Direction refers to the writing direction. Latin and Chinese scripts are written left-to-right (LTR), while Arabic and Hebrew are written right-to-left (RTL), often requiring RTL configuration.

Web content needs to be contained within a defined area called an outer container. This container wraps all content and enables responsive scaling. Users can easily achieve cross-device responsiveness by simply adding a wrap container. The container ...

Flexible layout, also known as flex layout, is the mainstream layout method for web pages today. It solves the collapse issue of float layouts and the 4px gap problem of inline-block elements. Most importantly, flex layout is inherently suitable for ...

The grid layout system can replace traditional table layouts; it can simulate tables for data display while also mimicking flexbox for multi-column layouts. This framework primarily uses flexbox and grid layouts.

Atomic positioning for 'position', providing basic positioning types and directions.

Margin controls outer spacing while padding handles inner spacing. The _m[-*] utility classes independently configure element margins with support for size and positioning. Similarly, _p[-*] classes independently set element padding with size and pos...

Use _bg[-*] style classes to independently define section background colors. Supports color schemes including prim, succ, error, etc. Additionally, _bg-stage can be used for the current page's background color scheme (defaults to white).

Gradients are typically used for section backgrounds. For standard web pages, it's best not to use too many colors, so OrcaUI's gradient system only employs two-color gradients. It supports gradients with all primary colors across 8 directions, using...

Users can independently control width and height using _w-* and _h-* style classes. Dimensions use input height as the base unit (e.g., _w-1 equals 40px, _w-6 equals 40*6px). Includes three special sizes: neat (matches input width), half (50%), and f...

By controlling the aspect-ratio property, block elements can automatically maintain proportional dimensions based on either width or height, supporting common media sizes.

Use _sd[-*] style classes to independently apply shadows to elements. In this framework, shadows are categorized by style rather than size. For example, shadows can simulate borders without occupying space, or create diffused spreading effects to evo...

Utilizes various fonts and font sizes to meet general webpage display needs for headings and body text

The _bd or _bd-* classes represent standalone border styling (outline-like borders) that can be applied to any element. These styles support border positioning and sizing, with all _bd[-*] variants using solid borders. Unlike outline, these borders o...

The text formatting styles were previously scattered across CSS and native HTML tags, making them inconvenient to use. This framework has now integrated commonly used text formats into CSS, standardizing their implementation through CSS classes rathe...

The article tag is one of HTML5's semantic elements, and the main body of an article should be placed within this tag. This framework has optimized and improved the article tag, ensuring that its internal child elements display with excellent layout ...

Variable and naming abbreviations are primarily intended to improve developer programming efficiency, followed by making it easier for users to remember and quickly use them, and finally to reduce file size. However, when using framework code in the ...

Describe the development journey of the OrcaUI framework—it is both an accumulation of experience and a culmination of persistent effort. Staying true to our original vision, we remain committed to the native JavaScript, CSS, and HTML standards, stri...

OrcaUI's JS and CSS files are manually minified using Terser, including 3 JS files and 1 CSS file. If users modify the source code, re-minification is required. We recommend installing Terser, which supports modern JavaScript syntax.

Static resources include large images, thumbnails, cover images, SVG icons, PNG icons, videos, audio, etc., used for demo purposes. Click to get resource links. Files are hosted on npm and delivered via unpkg CDN for fast global access.

Achieves multi-device responsiveness through various methods: width adaptation via @media min/max-width queries, adaptive styling with classes like _xxs-1/_xs-2, mobile device adaptation via @media any-hover, breakpoint configuration using breakpoint...

OrcaUI's CSS styles use the `_` prefix as a namespace identifier. This character is reserved for private/internal use, and users should avoid using it in their custom CSS styles.

OrcaUI's language packs are stored in src/scripts/lang directory, using en-US English by default, with built-in multilingual support for framework internationalization; customize by modifying specific language packs. Language packs use export default...

Learn how to set up an OrcaUI page, reference JS/CSS files in multiple ways, and explore a live CodePen demo. Let’s get started with the OrcaUI front-end framework!

This page lists the database files used in the demonstration examples of this framework. These files are exported in .sql format via the phpMyAdmin software.