What’s this called?这个控件叫什么？

The visual dictionary of UI. See the element, learn its real name, and prompt your coding agent with precision. Double-press any word on the site for a plain-English definition.

UI 视觉词典。看到元素，学会它的真名，然后精准地指挥你的 AI 编程代理。双击站内任意英文单词，查看通俗释义。

62 elements, each one seeable, nameable, promptable62 个元素，每一个都看得见、叫得出、可指挥

Text Scramble (Decode Effect)new 文本乱序（Decode 效果） web

ScrambleTextPlugin

Random characters churn and settle into the real text

随机字符不停翻滚，最终落定成真正的文字

Spring Animationnew 弹簧动画（Spring Animation） web

transition={{ type: "spring", stiffness, damping }}

Physics-based motion that overshoots the target and settles

基于物理的运动：冲过目标，再缓缓停稳

Easing (Timing Function)new 缓动（Timing Function） web

transition-timing-function

The speed curve of an animation — why motion feels smooth or robotic

动画的速度曲线 —— 决定动起来是顺滑还是僵硬

Masonry

Masonry Layout (Pinterest Grid)new 瀑布流布局（Pinterest 网格） web

columns

Cards of different heights packed into columns with no row gaps

高度各异的卡片紧塞进列中，行线完全错开

Revenue

$48.2k

Users

2.4k

Growth

↑ 12%

+9 signups today

Bento Gridnew 便当网格（Bento Grid） web

display: grid + grid-column: span 2

One grid, mixed tile sizes — a layout packed like a bento box

一个网格，大小不一的格子 —— 像便当盒一样紧凑分装的布局

Hamburger Menu (Nav Drawer)new 汉堡菜单（导航抽屉） web

aria-expanded + aria-controls

The three-line button and the navigation panel it slides open

三条线的按钮，以及它滑出的导航面板

Lightboxnew 灯箱（Lightbox） web

The click-to-enlarge image overlay that dims the page behind it

点图放大、背后页面变暗的图片浮层

Marqueenew 跑马灯（Marquee） web

animation + @keyframes translateX

Content that auto-scrolls sideways in an endless loop

横向自动滚动、无限循环的内容

Hover a shape · your pointer becomes it

Pointer (Cursor) 指针（光标） macos

NSCursor

Every shape the mouse pointer takes — and the real name of each one

鼠标指针的每一种形态 —— 以及它们各自的本名

Alert 提醒（Alert） macos

NSAlert

The small centered window with a badged icon, a bold line, and Cancel/OK buttons

居中的小窗口：带角标的图标、一行粗体字，以及“取消/好”按钮

Volume

Slider 滑块（Slider） macos

NSSlider

The round knob you drag along a track to pick a value from a range

沿轨道拖动的圆钮，用来在一个范围里取值

Fill

Color Well 颜色井（Color Well） macos

NSColorWell

The little swatch button that shows the current color and opens the picker

显示当前颜色的小色块按钮，点开就是取色器

We’ll only use this to sign you in.

Form Field 表单字段（Form Field） web

Every part of a labeled input — label, placeholder, helper text, and the red error line

带标签输入框的每个部分 —— 标签、占位文本、辅助文本和那行红色错误信息

text-overflow: ellipsis

The quarterly review meeting has been rescheduled to Friday afternoon

-webkit-line-clamp: 2

Release notes: this update reworks the sync engine, fixes twelve reported issues with offline edits, and adds keyboard shortcuts for every panel in the app.

middle truncation · JS

quarterly-review-meeting-notes-2026-final-v3.pdf

container width

Truncation (Ellipsis & Line Clamp) 文本截断（省略号与行数截断） web

text-overflow: ellipsis

Text cut short with … — at the end of the line, after N lines, or in the middle

用 … 把文本截短 —— 在行尾、在 N 行之后，或者在中间

To do

In review

Drag & Drop 拖放（Drag & Drop） web

ondrop

The grips, handles, previews, and landing cues around a drag interaction

拖拽交互周边的抓手、手柄、预览和落点提示

<hr> thematic break

role="separator"

Divider vs. Separator vs. Rule 分隔线：Divider、Separator 与 Rule web

<hr>

The same thin line can mark a topic break, separate controls, or be decoration

同一条细线，可以是话题转折、控件分隔，也可以只是装饰

spinner

progress ring

progress bar

Progress Ring vs. Spinner vs. Progress Bar 进度环 vs. Spinner vs. 进度条 web

A spinner means wait; a ring or bar can show how much work is complete

Spinner 只表示「请等待」；进度环或进度条能显示已经完成了多少

Notes

Mac Window Mac 窗口 macos

NSWindow

The movable Mac app frame, from its title bar and toolbar to its resize edges

可移动的 Mac 应用框架，从标题栏、工具栏一直到调整大小的边缘

Mail

Inbox

Split View 拆分视图 macos

NSSplitView

Resizable panes separated by a draggable divider inside a Mac window

Mac 窗口里由可拖动分隔条隔开、可各自调整大小的窗格

Journal

Scroll View (Scroller) 滚动视图（Scroller） macos

NSScrollView

A viewport whose AppKit scrollbar is called a scroller

一个视口，它的滚动条在 AppKit 里叫 scroller

Search Field 搜索栏 macos

NSSearchField

A Mac text field with built-in search, clearing, and recent-query controls

Mac 上的文本输入框，自带搜索、清除和最近查询控件

Save As:

Where:

Format:

Save Panel 存储面板 macos

NSSavePanel

The standard Mac dialog for naming a file and choosing where to save it

Mac 上给文件起名、选择存储位置的标准对话框

Tags:

Design Q3 Report

Token Field 令牌输入框 macos

NSTokenField

A text input that turns recognized values into removable rounded tokens

一种文本输入框，能把识别出来的值变成可移除的圆角令牌

Combo Button 组合按钮 macos

NSComboButton

A primary action joined to a separate arrow that opens related actions

主操作和一个独立箭头拼在一起，箭头打开相关操作

Rating

Capacity

Level Indicator 级别指示器 macos

NSLevelIndicator

A Mac gauge rendered as a capacity bar, rating stars, or relevance meter

Mac 上的量表：容量条、评分星星或相关度仪表

Files

Column View (Browser) 分栏视图（层级浏览器） macos

NSBrowser

Finder-style columns that reveal each successive level of a hierarchy

Finder 风格的分栏，逐级展开层级结构

Library

Outline View 大纲视图 macos

NSOutlineView

An indented tree of rows that expand to reveal nested children

一棵带缩进的行树，展开后露出嵌套的子行

Navigation

The Three Dots (Overflow Menu) 三个点（溢出菜单） web

Horizontal dots, vertical dots, three lines, and an ellipsis mean different things

横排三个点、竖排三个点、三条横线和省略号，含义各不相同

Menu Bar 菜单栏 macos

NSApp.mainMenu

The strip along the top of the Mac screen — every part, labeled

Mac 屏幕顶部那条横条——每个部件都标上名字

Context Menu 上下文菜单 macos

NSMenu

The menu opened at the pointer by right-clicking or Control-clicking an item

在项目上右键点按或 Control-点按，在指针处打开的菜单

📄Q3 Report.pages

📄Notes.md

📄installer.dmg

Disclosure Triangle 披露三角 macos

NSOutlineView

The small rotating control that reveals or hides nested content

那个会旋转的小控件，用来显示或隐藏嵌套内容

Dock Badge Dock 角标 macos

NSDockTile.badgeLabel

The red count or status label overlaid on an app's Dock icon

叠在应用 Dock 图标上的红色数量或状态标签

Enabled

Focus Ring 焦点环 macos

NSView.focusRingType

The accent-colored glow that identifies the control receiving keyboard input

标示当前接收键盘输入的控件的强调色光晕

Slides

Fill

Border

Shadow

Inspector 检查器 macos

View.inspector(isPresented:content:)

The right-hand panel for viewing and editing details of the current selection

右侧用于查看和编辑当前选中项详情的面板

Editor

Panel (Floating Window / HUD) 面板（浮动窗口 / HUD） macos

NSPanel

An auxiliary macOS window that floats above related document windows

悬浮在相关文稿窗口上方的 macOS 辅助窗口

Popover 弹出框（Popover） macos

NSPopover

A floating bubble whose arrow points back to the control that opened it

带箭头的浮动气泡，箭头指回打开它的控件

Pop-Up Button vs. Pull-Down Button vs. Combo Box 弹出式按钮 vs. 下拉式按钮 vs. 组合框 macos

NSPopUpButton

Three similar-looking macOS controls for choosing a value or invoking a menu action

三个外观相似的 macOS 控件，分别用于选取一个值或触发菜单操作

Segmented Control 分段控件 macos

NSSegmentedControl

A row of connected choices with the current segment visibly selected

一排相连的选项，当前选中的分段清晰可见

Documents

Sheet 窗口附着面板（Sheet） macos

NSWindow.beginSheet(_:completionHandler:)

A modal panel attached to one macOS window rather than the whole app

只附着于单个 macOS 窗口、而非整个 App 的模态面板

Sidebar (Source List) 边栏（源列表） macos

NavigationSplitView

The translucent navigation column along the left edge of a macOS window

位于 macOS 窗口左缘的半透明导航列

Copies: 2

Stepper 步进器 macos

NSStepper

The compact up-and-down arrow pair used to increment or decrement a value

一对紧凑的上下箭头，用来递增或递减数值

Toolbar (Unified Title Bar) 工具栏（统一标题栏） macos

NSToolbar

A row of window actions integrated with the modern macOS title bar

与现代 macOS 标题栏融为一体的一排窗口操作

Untitled

Traffic Lights (Window Controls) 红绿灯按钮（窗口控制按钮） macos

NSWindow.standardWindowButton(_:)

The red, yellow, and green controls at the top-left of a macOS window

macOS 窗口左上角的红、黄、绿三个控制按钮

Vibrancy on

The wallpaper bleeds through the frosted material.

Visual Effect Material (Vibrancy) 视觉效果材质（Vibrancy） macos

NSVisualEffectView

The adaptive translucent background used behind macOS sidebars, menus, and panels

macOS 边栏、菜单和面板背后那种自适应的半透明背景

Changes saved

Toast (Snackbar) 轻提示（Snackbar） web

role="status"

A brief, non-blocking message that appears after an action

操作完成后短暂出现、不打断流程的消息

Modal Dialog vs. Drawer vs. Sheet 模态对话框 vs. 抽屉 vs. 底部面板 web

Three overlay patterns distinguished by placement, scope, and task depth

三种覆盖层模式，按位置、范围和任务深度区分

Popover vs. Dropdown Menu vs. Tooltip 弹出框 vs. 下拉菜单 vs. 工具提示 web

popover

Three anchored overlays with different triggers, content, and dismissal rules

三种锚定式覆盖层，触发方式、内容和关闭规则各不相同

Scrim (Backdrop / Overlay) 遮罩层（背景遮罩 / 覆盖层） web

::backdrop

The translucent layer that separates a modal surface from the page

把模态界面与页面隔开的那层半透明层

Skeleton

Spinner

Skeleton vs. Spinner 骨架屏 Skeleton vs. 旋转指示器 Spinner web

aria-busy="true"

Two loading indicators for predictable layouts and indeterminate waits

两种加载指示器：一个给布局可预期的内容占位，一个应付时长未知的等待

Favorite fruit

Combobox (Autocomplete / Typeahead) 组合框 Combobox（自动补全 / 输入联想） web

role="combobox"

A text input paired with a filtered list of selectable suggestions

一个文本输入框，配一个按输入过滤、可供选择的建议列表

Command Palette 命令面板 Command Palette web

Command

A keyboard-first searchable launcher for actions and navigation

键盘优先的可搜索启动器，用来执行操作和跳转导航

A reusable piece of interface with its own structure and behavior.

A named value for color, spacing, type, or another design decision.

Shared names make design and implementation prompts precise.

Accordion (Disclosure) 手风琴 Accordion（披露式展开 Disclosure） web

Stacked sections whose headings expand and collapse their content

堆叠的分区，点标题即可展开或收起对应内容

Weekly activity

1,248

+12% from last week

Tabs 标签页 Tabs web

role="tablist"

A single row of labels that switches one shared content region

一排标签，切换同一块共享内容区

Badge vs. Chip vs. Pill vs. Tag 徽标 Badge vs. 碎片 Chip vs. 胶囊 Pill vs. 标签 Tag web

Badge

Compact labels distinguished by meaning, shape, and interactivity

同样是小标签，靠含义、形状和可交互性来区分

Breadcrumbs 面包屑导航 Breadcrumbs web

<nav>

A hierarchy trail from the current page back to its ancestors

一条从当前页面回溯到各级上级的层级路径

Scrollable pane

Component notes

position: sticky

Sticky vs. Fixed Positioning 粘性定位 Sticky vs. 固定定位 Fixed web

position: sticky

Two ways to keep an element visible with different containing blocks

两种让元素保持可见的定位方式，包含块各不相同

:focus-visible

Focus Ring (:focus-visible) 焦点环 Focus Ring（:focus-visible） web

:focus-visible

The keyboard-aware outline that identifies the active control

感知键盘操作的轮廓线，标识当前活动的控件

No projects yet

Empty State 空状态 Empty State web

Purposeful guidance shown when a view has no content yet

视图还没有内容时，给出有目的的引导

Hover Card 悬停卡片 Hover Card web

HoverCard

A rich, non-modal preview revealed from a hovered or focused reference

悬停或聚焦某个参照物时浮现的富内容、非模态预览

Switch

Checkbox

Radio

Switch vs. Checkbox vs. Radio 开关 Switch vs. 复选框 Checkbox vs. 单选按钮 Radio web

Controls for an on/off setting, independent choices, or one choice from a group

三种控件：管开/关的设置、各自独立的多选、组内只能选一个

Single selection · center

Toggle Group (Segmented Control) 切换组 Toggle Group（分段控件 Segmented Control） web

ToggleGroup

A connected row of compact options with one persistent selection

连成一排的紧凑选项，其中一项保持选中

Menu Bar Extra (Status Item) 菜单栏附加项 Menu Bar Extra（状态项 Status Item） macos

NSStatusItem

The icon that lives on the right side of the macOS menu bar

住在 macOS 菜单栏右侧的那个图标

Guides — the decisions before the names指南 —— 起名之前要做的决定

Guide AppKit vs SwiftUI The same Mac element has two real names — which one to say in a prompt.同一个 Mac 元素有两个真名 —— 写 prompt 时该说哪一个。 Guide Swift vs Electron Native app or web-in-a-shell — the first fork, and the vocabulary it decides.原生应用还是壳中网页 —— 第一个岔路口，以及它决定的词汇表。 Guide The Translation Table 60+ elements: plain name → AppKit → SwiftUI, searchable.60+ 个元素：通俗名 → AppKit → SwiftUI，可搜索。