Skeuomorphic Toggle

在云境TS 中打开并复制 →

内容预览

# Skeuomorphic Toggle Four takes on one switch: the preserved tactile skeuomorphic export plus flat modern, Three.js glass, and shader-lit treatments, each matching light and dark appearances automatically. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/skeuomorphic-toggle · 预览动画：https://threeui.com/previews/skeuomorphic-toggle.webm > 分类：UI Elements > 包含变体（3）：modern、glass、shader /* ===== src/shaders/skeuomorphic-toggle/SkeuomorphicToggleCollection.tsx (tsx) ===== */ import { lazy, Suspense, type CSSProperties } from "react"; import type { ToggleModePreference } from "./toggleMode"; export const SKEUOMORPHIC_TOGGLE_VARIANTS = [ "skeuomorphic-toggle", "modern", "glass", "shader", ] as const; export type SkeuomorphicToggleVariant = (typeof SKEUOMORPHIC_TOGGLE_VARIANTS)[number]; export type SkeuomorphicToggleCollectionProps = { variant?: SkeuomorphicToggleVariant; mode?: ToggleModePreference; defaultOn?: boolean; label?: string; speed?: number; size?: number; opacity?: number; hue?: number; saturation?: number; brightness?: number; onChange?: (on: boolean) => void; className?: string; style?: CSSProperties; }; /* The packaged Neuform export stays exactly as it shipped; the three companion treatments are first-party React renderers. */ const PackagedToggle = lazy(() => import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.SkeuomorphicToggle })), ); const ModernToggle = lazy(() =>

……（完整源码请在站内查看）