UI Components

How common dashboard components work: buttons, cards, overlays, carousels, pagination and more, redrawn on canvas with live hover readouts and explanations.

Tech: Canvas 2D, 组件状态机, Pointer Events

• Buttons — Button Variable, Size with Disable State.
• Cards + Modal — A card layout with a model frame.
• Inputs — Text frames change the main colour and dizziness when the focus is on; red frames and tips are displayed when verification fails.
• Navigation Styles — The current item is marked with a slide indicator (underlined or capsule), which moves smoothly between the items.
• Accordion — accordion: Clicking on the title to expand this section, smoothing the transition height, and automatically closing the others.
• Dialog — Blank windows: Cover the page with a semi-transparent mask, pop up the middle dialogue box and return to the original page after closing.
• Carousel — Rotation: A row of cards is lateralized, smoothed by location, and the dot shows the current number.
• Toast — New news slipped from the corner, the old news moved down and faded out, and then disappeared in seconds.
• Dropdown — Dropdown/Select。
• Tooltip — Tooltip/Popover。
• Loading Placeholder — Bones screen: The contents are pre-mounted with a grey block twirl layout, with a sweep indicating that the light is “mounting”.
• Button Effects — Button Microinteract: Shrink slightly when pressing, Unleash the bounce and make you feel that the button "was pressed."
• Spring Switch — Spring switch: The slider appears to be hanging on the spring, and the switch goes over and back to position.
• Bottom Sheet / Overlay — Bottom drawer: The panel slips out of the bottom of the screen and can drag the handle to adjust the height or pull it off.
• Animated Tabs — Instruction slips Tabs.
• Timeline — Timeline: Events are in chronological order vertically and dots and links indicate the sequence.
• Tree View — Tree directory: folders can be expanded, closes, sub-items are shown by level indentation.
• Floating Action Button — Main button rotated to ×，sub-buttons with a staggered delay in subsequent ejection (dive or fan formation).
• Chips / Tags — Label: Small corner blocks represent the classification or filter conditions, and click to select or delete.
• Interactive Table — Table Interactive: Header Sorting, Suspends the high-lighted whole row, and the long table header is fixed.
• Avatar Group — Folding of heads: Multiple circle heads overlap in one row, exceeding the number shown for "+N".
• Animated Stepper — The current steps are preceded by a tick, the connection line fills the main colour with progress, and the current node outer circle pulse.
• Kanban Board — Kanban Entity.
• Color Picker — Color ring + preset palette.
• Notification Center — The bell displays unreading and shaking, the panel lists notifications, new notifications are inserted from the top and the rest moved down.
• Command Palette — Enter the keyword word by word, the result list is filtered in real time, the highlight item moves up and down, and back to the car for execution.
• Pagination — The current high-light block slides to the target page; the number of pages folds into... and always shows the end page.
• Breadcrumb — Displays the hierarchy path of the current page in the site, with the last level as the current page; the new layer slides from the right side and the suspension is underlined.
• Star Rating — Suspend preview fractions (the stars light up in turn) and then return to the current fractions; support half-stars.
• Empty State — When the list does not have data, use a slightly floating illustration + specify text + guide button to tell the user what to do next.
• Top Banner — tab at the top of the page, slides from above; long text can scroll horizontally, with a closing button on the right.