Latest Updates

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

The Viewer media viewer supports full-screen viewing of multimedia files, including images, videos, audio, maps, iframes, and other embeddable platform links.

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

Show the development and version update history of the OrcaUI front-end framework, and publicly release the historical version numbers on this page.

A short real-time message that disappears automatically and cannot be clicked or copied

This framework comes with a built-in icon font (iconfont). Icons can be used either by applying the _icon[-*] style classes, or by writing the main name of the icon inside the tag and then applying the icon font to that tag. The icon font library wil...

The src file is a module file of OrcaUI, containing JS modules and CSS modules, written in TypeScript, and used via import statements.

The Gesture library is a multi-device gesture module dedicated to OrcaUI. It standardizes events such as click (single tap), dblclick (double tap), hold (long press), cancel, scale (pinch zoom), rotate, and translate (pan). It also specifically handl...

The Gesture library is a multi-device gesture module dedicated to OrcaUI. It standardizes events such as click (single tap), dblclick (double tap), hold (long press), cancel, scale (pinch zoom), rotate, and translate (pan). It also specifically handl...

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports async...

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports async...

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports async...

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports async...

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports async...

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 poster component defines a cover image for post lists and card lists. It is purely styled with CSS.

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 comment list is purely CSS-defined and can be integrated into any component or module, with full responsive support across all devices.

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

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.

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

Pagination is not packaged as a component because different systems use pagination in various ways. Designing pagination with native HTML and CSS allows flexible combination of pagination elements for different scenarios. These elements include 'prev...

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

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

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

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

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.

This framework can be integrated via the `use()` method before `mount`, and can be used within the `mounted` lifecycle hook.

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

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.

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

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

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

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

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