Components Overview

SwButton

Semantic button with loading, disabled, and icon support

SwLink

Smart link that auto-detects external URLs and adds rel attributes

SwBreadcrumb

Breadcrumb nav, items-driven with optional built-in BreadcrumbList JSON-LD

SwBackTop

Back-to-top for long pages, fades in past threshold with reduced-motion fallback

SwIcon

Business SVG icon, referenced directly by name

SwImage

Lazy-loading image with optimized srcset and placeholder support

SwThemeSwitch

Theme switcher, self-gated by theme.mode (renders only when toggle)

SwLangSwitch

Language switcher, auto-syncs with i18n.locales; hidden when i18n off / single locale

SwFormField

Form field wrapper with label and validation message support

SwInput

Text input with the unified form-control baseline box (equal height & font size) and full native fallthrough

SwSegmented

Inline single-select option group (segmented / pill) with built-in arrow-key a11y

SwSelect

Dropdown select — single / multi, clearable, grouping, searchable, create-on-type

SwUploadFile

Plain file upload (PDF / docs / zip), chunked without transcoding

SwUploadImage

Image uploader with cropping and preview

SwUploadVideo

Video uploader with progress bar and thumbnail capture

SwModal

Unstyled modal — declarative (v-model) and imperative (useModal) usage

SwPagination

Page-number pagination (replace-mode, pairs with SwGallery)

SwToast

Lightweight toast notification with success / error / info types

SwAddToHomescreenGuide

H5 PWA add-to-homescreen guide (bottom sheet, non-blocking)

SwVideoPlayer

Video player with HLS support and custom controls

SwAudioPlayer

Audio player with progress bar and volume control

SwVideoBackground

Muted MP4 background with poster fallback

SwVideoPreview

Video hover preview — auto-plays muted on mouse enter

SwQrcodeGenerator

Generates a QR code image from text with custom styles and download support

SwQrcodeScanner

Uploads an image, scans the QR code inside, and returns the decoded content

SwAsyncText

Async remote text loader (auto AES decryption for .bnc + IndexedDB cache)

SwTable

Admin data table: columns + cell slots, built-in sorting / selection / loading / sticky header

SwEditor

Rich text editor on Tiptap: @mention / #topic / emoji / image & video upload

SwRail

Free horizontal scroll rail, native scroll-snap + desktop arrows

SwCarousel

Full-width carousel banner, seamless loop + autoplay + dots / thumbnails

SwVideoFeed

TikTok-style vertical short-video feed, bare hls pool + virtualization

SwGallery

Responsive cover-card grid with load-more (complements SwRail)

SwAdBanner

Banner ad slot, single or multi-image carousel, built-in tracking

SwAdMrec

Medium rectangle ad slot (MREC, default 300×250)

SwAdIcon

Icon ad slot, grid / single-icon image mode

SwAdText

Text ad slot, cell text links / grid

SwAdMarquee

Marquee text ad, seamless horizontal scroll

SwAdNative

Native feed ad card (image + title + desc + CTA)

SwAdSplash

Splash / app-open ad, auto-shown on entry + frequency capping (ad_type=splash)

SwAdPopup

Business-triggered fullscreen popup ad, ref.open() + optional frequency capping

SwAdPreroll

Pre-roll video ad (official #preroll-ad slot filler, mount-time impression)

SwAdPause

Pause ad (official #pause-ad slot filler, shown on gated pause, closable)

SwAdFloating

Side floating ad, shown only when the window is wide enough

SwAdLabel

The "Ad" compliance badge