Docs

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

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 TEXTAREA component extends native textarea functionality with enhanced features including a toolbar, character limit indicators, and built-in input validation.

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 FILE custom tag is an encapsulation of the native file tag. In addition to maintaining the functionality of single and multiple file selection, it also adds support for a toolbox, file quantity limit prompts, and quantity validation.

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.

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

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 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 grade menu is a simplified version of the Menu module. Unlike typical components or modules, grade is built with native CSS+HTML, allowing users to insert custom content while preserving its core structure, and can be integrated into custom modul...

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.

Breadcrumb (or 'crumb' for short) navigation visually displays the hierarchical position of the current page within a website's structure, enabling users to quickly navigate back to parent pages or homepage - similar to Windows file directory paths. ...

Tab groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Flex groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Button groups are a form of tab headers that have been integrated into the Tab component module. Since they are built with CSS+HTML, they can be used anywhere in the webpage body and can also be packaged and referenced by other custom components or m...

While native HTML tags provide basic text formatting, certain special text formats still require custom CSS or JavaScript implementations. The format component currently supports several specialized text formats, including pinyin annotations, line br...

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 divider component has similar effects to the hr tag and the oc-line component, as both can create a horizontal dividing line. We define the divider more purely—it simply separates the context and is part of the context itself. Its label text size...

The line component displays a divider to distinguish contexts, with the default effect being consistent with the hr tag. In addition to displaying a horizontal divider, the line component can also display a vertical divider and include descriptive te...

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

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 confirm utility function simulates the native confirm method, allowing quick opening of a dialog box with confirm and cancel options.

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.

Both post and bullet are sub-components that form image-text lists. A post primarily emphasizes images or image collections, highlighting the role of visuals in information presentation – though it can also display multi-line text without images. For...

The card is used to display mixed content of images and text, in pure CSS form, and can be used with any layout, such as flex or grid.

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

The tag element can be used individually, or wrapped with tags container to uniformly configure appearance (color, size, and border styles). Both tag and tags serve as foundational components for the Tags module.

Pure CSS table component with multiple style variations, supporting basic frozen headers and side columns

The comment list is purely CSS-defined and can be integrated into any component or module, with full responsive support across all devices.

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

Multi-criteria filtering allows intuitive condition combination through point-and-click selection. Purely CSS-implemented, users can extend functionality as needed. Suitable for listing pages on classified information websites.

The legend style component is primarily used as a small decorative image and can be placed in any component or module. It includes rep=disk, rep=cube, and rep=image.

The poster component defines a cover image for post lists and card lists. It is purely styled with CSS.

Increase or decrease the font size, line height, and margin sizes of the page using the num-step and fs-root variables

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.