Docs

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...

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 ...

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...

The category component is used to create section titles. It can be used for large sections on a page or small sections in a sidebar, serving to separate adjacent sections and indicate the main content of the current section.

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...

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.

The Progress component displays data loading status, task completion, or process tracking. It supports multiple variants including bar, full circle, semicircle, and large arc designs. The component offers various theme colors (including gradients), a...

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 ...

This framework can be integrated both inside and outside React. It allows using WebComponent components anywhere within React, and its modules can be utilized in the useEffect hook.

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

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 ...

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...

The upload module supports batch uploading in multiple formats, with direct cloud transmission to Amazon S3, Cloud Storage, Azure Blob Storage, OSS, COS, Kodo, UPYUN and other cloud services.

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).

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.

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 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 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.

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...

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...

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

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.

The OC-BR component is a replacement for the native br tag; this break-row component can create horizontal separation space within the context. br stands for break-row. Additionally, the OC-BC component can create vertical space intervals, where bc s...

This framework resets the styles of some commonly used native HTML elements to align with the framework's design language. While it overrides default element styles, it preserves their core functionality and ensures accessibility compliance, avoiding...

The select component supports both single and multiple selection, perfectly replacing native select-single and select-multiple components; it features fuzzy search and auto-completion.

Displays the CSS animations integrated in this framework, including transition animations and keyframe animations, which can meet daily usage needs.

Explains the relationship between color utility classes and CSS variables for color generation. This article provides a clear understanding of how OrcaUI's color theme system works, empowering users to customize their own theme styles after mastering...

The Accordion component can create nested collapsible panels and supports multiple data formats.

The stats component primarily highlights numerical values and can be enriched with properties like icon, disk, tips, and unit to enhance its content. It supports common operations such as reset and set.

The pill component is a standalone tab-switching component that only includes the tab header (not the tab body). It resembles a capsule shape and features an animated moving background block.

A form field container is the basic unit that makes up a complete form. Within a form field container, child elements may include native elements like input, custom form field components, form validation modules, a left-side label header, right-side ...

The Accordion library can create nested collapsible panels and supports multiple data formats.

Single-line form field combination component that groups multiple form fields into a unified whole

The Editor rich text editor component supports HTML editing (unlike textarea which only handles plain text) and provides multiple shortcut operations.

The datetime component can create date picker instances, supporting single or multiple date selection, date range selection, lunar calendar usage, and custom events.

The TEXTAREA component extends native textarea functionality with enhanced features including a toolbar, character limit indicators, and built-in input validation.

The icon component is primarily used to display an icon. The form of the icon is not limited to iconfont icon fonts; it can also be images such as SVG, PNG, or JPG. It supports theme color themes and the use of label text, as well as various mixed st...

Universal webpage header with adaptive width, capable of accommodating logos, navigation, menus, search bars, buttons, etc.

The footer of a website is the least prominent area of a webpage, typically used to display disclaimers or contact information. OrcaUI's footer component comes with built-in sub-elements for users to combine, including icon button groups, auxiliary n...