Circle Buttons
ThreeUI · Buttons · 免费
在云境TS 中打开并复制 →
内容预览
# Circle Buttons Three compact circular icon controls using the exact Dark Glass, Launch, and Dot Border material systems. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/circle-buttons · 预览动画：https://threeui.com/previews/circle-buttons.webm > 分类：Buttons > 包含变体（3）：play、plus、mail /* ===== src/shaders/circle-buttons/CircleButtons.tsx (tsx) ===== */ import type { CSSProperties, MouseEventHandler } from "react"; import "./circle-buttons.css"; export type CircleButtonVariant = "play" | "plus" | "mail"; export type CircleButtonMode = "light" | "dark"; export type CircleButtonsProps = { variant?: CircleButtonVariant; mode?: CircleButtonMode; hue?: number; saturation?: number; brightness?: number; ariaLabel?: string; disabled?: boolean; type?: "button" | "submit" | "reset"; onClick?: MouseEventHandler; className?: string; style?: CSSProperties; }; export const CIRCLE_BUTTON_DEFAULTS = { variant: "play", mode: "dark", hue: 0, saturation: 1, brightness: 1, } as const satisfies Required; const LABELS: Record = { play: "Play", plus: "Add", mail: "Send mail", }; function clamp(value: number, minimum: number, maximum: number) { return Math.min(maximum, Math.max(minimum, value)); } function CircleIcon({ variant }: { variant: CircleButtonVariant }) { if (variant === "play") { return ( ); } if (variant === "plus") { return ( ); } return ( ); } export function CircleButtons({ variant = CIRCLE_BUTTON_DEFAULTS.variant, mode =
……（完整源码请在站内查看）