Spinner 旋轉圖形

基礎旋轉圖形，表示進行中的狀態。載入遮罩（LhLoading）內部同樣由它呈現。

基礎用法

三種尺寸

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

自訂顏色

顏色

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

API

LhSpinner Props

屬性名	說明	類型	預設值
size	尺寸	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	旋轉顏色（CSS color 值，未傳時繼承 currentColor）	string	—
sx	sx 快速版面配置屬性	LhSxProps	—

無障礙

• 圖形為純裝飾，aria-hidden="true" 移出無障礙樹；進行中狀態應由外層容器（如 role="status"）承擔語意
• 旋轉動效尊重 prefers-reduced-motion，降級為靜態半環

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/spinner/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhSpinnerProps

export interface LhSpinnerProps {
  /** 尺寸 */
  size?: LhSpinnerSize
  /** 旋轉顏色（CSS color 值，未傳時繼承 currentColor） */
  color?: string
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhSpinnerSize _{（來自 @lh-ui/share/core/spinner）}

/** 旋轉圖形尺寸 */
export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

常數

本元件用到的公開常數如下（可在 Props 表的「類型 / 預設值」列點選同名條目跳轉至此）：

LH_SPINNER_SIZE_CONST _{（來自 @lh-ui/share/core/spinner）}

export const LH_SPINNER_SIZE_CONST = {
  ...LH_SIZE_CONST,
} as const

LH_SPINNER_SIZE_PX _{（來自 @lh-ui/share/core/spinner）}

/** 尺寸 → 直徑 px 映射 */
export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}