components

Vibe Design 组件索引

提供可复用的 WEB 控件类型；打开类型页获取提示词，粘贴到 Agent 可快速落地，配合 VibePM 工具包时还原效果最好。

90 类型 526 成员
查看设计系统风格预览 开通会员获取工具包
基础组件Basic16 表单控件Form14 数据展示Data Display23 内容导航Navigation11 反馈提示Feedback13 数据图表Chart13

基础组件Basic

16 个类型

主按钮btn-primary
打开类型页

6 个相关组件

营销 · preview
  • default
  • icon
  • round
  • round-icon
  • loading
  • disabled
柔和按钮btn-soft
打开类型页

6 个相关组件

营销 · —
  • default
  • icon
  • round
  • round-icon
  • loading
  • disabled
中性按钮btn-secondary
打开类型页

6 个相关组件

通用 · —
  • default
  • icon
  • round
  • round-icon
  • loading
  • disabled
按钮装饰btn-fx
打开类型页

26 个相关组件

营销 · preview
  • shine-sweep
  • background-wipe
  • two-tone-sweep
  • border-glow
  • border-follow
  • icon-nudge
  • arrow-fly
  • label-roll
  • attention-pulse
  • center-fill
  • side-sweep
  • pinch-fill
  • fill-slide-out
  • fill-collapse
  • skew-sweep
  • arrow-morph
  • shape-flood
  • arrow-sweep
  • circle-drop
  • frame-swap
  • zoom-fill
  • expanding-icon
  • tap-spring
  • ripple-press
  • plus-close
  • bounce-in
图标按钮btn-icon
打开类型页

6 个相关组件

通用 · preview
  • circle
  • square
  • with-label
  • group-pager
  • group
  • group-view
描边按钮btn-outline
打开类型页

6 个相关组件

通用 · preview
  • default
  • success
  • warning
  • danger
  • disabled
  • loading
虚线按钮btn-dashed
打开类型页

6 个相关组件

通用 · preview
  • default
  • primary
  • success
  • warning
  • danger
  • disabled
文字按钮btn-text
打开类型页

2 个相关组件

通用 · preview
  • default
  • disabled
链接link
打开类型页

3 个相关组件

通用 · preview
  • default
  • hover
  • disabled
字号层级type-scale
打开类型页

4 个相关组件

通用 · preview
  • display
  • title
  • body
  • caption
间距space
打开类型页

2 个相关组件

通用 · preview
  • default
  • wrap
排版typography
打开类型页

6 个相关组件

通用 · preview
  • title
  • paragraph
  • text
  • ellipsis
  • meta
  • fields
滚动容器scrollbar
打开类型页

2 个相关组件

通用 · preview
  • vertical
  • horizontal
栅格grid
打开类型页

3 个相关组件

通用 · preview
  • two-col
  • three-col
  • four-col
分割器splitter
打开类型页

3 个相关组件

通用 · preview
  • default
  • vertical
  • resize-box
分割线divider
打开类型页

4 个相关组件

通用 · preview
  • default
  • dashed
  • with-text
  • with-text-dashed

表单控件Form

14 个类型

日期选择date-picker
打开类型页

10 个相关组件

通用 · preview
  • default
  • range
  • datetime
  • datetime-range
  • week
  • month
  • year
  • quarter
  • multiple
  • disabled
时间选择time-picker
打开类型页

6 个相关组件

通用 · preview
  • default
  • range
  • select
  • select-range
  • hour12
  • disabled
输入框input
打开类型页

20 个相关组件

通用 · preview
  • default
  • password
  • number
  • tag
  • tags-below
  • append
  • search
  • prefix
  • copy
  • char-limit
  • timestamp
  • range
  • group
  • mention
  • autocomplete
  • verification-code
  • textarea
  • overlapping-label
  • success
  • disabled
下拉选择select
打开类型页

9 个相关组件

通用 · preview
  • default
  • multiple
  • search
  • create
  • cascader
  • tree-select
  • brand
  • category
  • disabled
颜色选择color-picker
打开类型页

6 个相关组件

通用 · preview
  • default
  • show-text
  • preset
  • history
  • disabled
  • marker
单选radio
打开类型页

6 个相关组件

通用 · preview
  • default
  • button
  • border
  • pill
  • disabled
  • segment
多选checkbox
打开类型页

4 个相关组件

通用 · preview
  • default
  • border
  • pill
  • disabled
评分rate
打开类型页

4 个相关组件

通用 · preview
  • default
  • text
  • readonly
  • disabled
开关switch
打开类型页

4 个相关组件

通用 · preview
  • default
  • text
  • loading
  • disabled
滑块slider
打开类型页

14 个相关组件

通用 · preview
  • default
  • range
  • marks
  • ticks
  • labels
  • output
  • volume
  • stepper
  • mood
  • price
  • input
  • vertical
  • vertical-range
  • equalizer
上传upload
打开类型页

3 个相关组件

通用 · preview
  • button
  • drag
  • picture
表单布局form
打开类型页

3 个相关组件

通用 · preview
  • horizontal
  • vertical
  • inline
校验反馈validate
打开类型页

5 个相关组件

通用 · preview
  • account
  • email
  • channel
  • period
  • submit
穿梭框transfer
打开类型页

4 个相关组件

通用 · preview
  • default
  • search
  • simple
  • oneway

数据展示Data Display

23 个类型

标签tag
打开类型页

12 个相关组件

通用 · preview
  • color
  • bordered
  • default
  • closable
  • small
  • checkable
  • icon
  • loading
  • soft
  • option
  • icon-text
  • icon-badge
徽标badge
打开类型页

4 个相关组件

通用 · preview
  • status
  • count
  • max
  • dot
头像avatar
打开类型页

6 个相关组件

通用 · preview
  • default
  • square
  • text
  • trigger
  • group-text
  • group-photo
空状态empty
打开类型页

6 个相关组件

通用 · preview
  • default
  • message
  • avatars
  • icon
  • action
  • outline
时间轴timeline
打开类型页

4 个相关组件

通用 · preview
  • default
  • icon
  • horizontal
  • icon-horizontal
描述列表descriptions
打开类型页

2 个相关组件

通用 · preview
  • default
  • bordered
折叠面板collapse
打开类型页

8 个相关组件

通用 · preview
  • default
  • accordion
  • bordered
  • plus
  • icon
  • subtext
  • stacked
  • active
可折叠collapsible
打开类型页

6 个相关组件

通用 · preview
  • show-more
  • code
  • form
  • comments
  • card
  • tree
统计数值statistic
打开类型页

7 个相关组件

通用 · preview
  • default
  • prefix
  • suffix
  • extra
  • animation
  • trend
  • countdown
走马灯carousel
打开类型页

6 个相关组件

通用 · preview
  • default
  • autoplay
  • card
  • fade
  • vertical
  • line
图片画廊gallery
打开类型页

10 个相关组件

通用 · preview
  • default
  • dots
  • thumbnails
  • counter
  • thumbnails-side
  • progress
  • multiple
  • arrows
  • arrows-bottom
  • arrows-dots
图片image
打开类型页

4 个相关组件

通用 · preview
  • default
  • preview
  • group
  • error
卡片card
打开类型页

12 个相关组件

通用 · preview
  • default
  • hoverable
  • shadow
  • bordered
  • actions
  • footer
  • extra
  • tabs
  • cta
  • dark
  • form
  • cover
表面装饰surface-fx
打开类型页

4 个相关组件

通用 · preview
  • spotlight
  • shine
  • border-flow
  • lift
列表list
打开类型页

6 个相关组件

通用 · preview
  • default
  • meta
  • action
  • hoverable
  • header
  • empty
条目item
打开类型页

7 个相关组件

通用 · preview
  • basic
  • link
  • alert
  • team
  • avatar
  • playlist
  • variants
树形控件tree
打开类型页

2 个相关组件

通用 · preview
  • default
  • checkable
日历calendar
打开类型页

4 个相关组件

通用 · preview
  • default
  • cell
  • header
  • select
表格table
打开类型页

13 个相关组件

通用 · preview
  • default
  • stripe
  • border
  • selection
  • fixed
  • fixed-header
  • sortable
  • expand
  • tree
  • group
  • actions
  • pagination
  • toolbar
评论comment
打开类型页

3 个相关组件

通用 · preview
  • default
  • nest
  • align
水印watermark
打开类型页

2 个相关组件

通用 · preview
  • default
  • multi
折叠列表overflow-list
打开类型页

3 个相关组件

通用 · preview
  • default
  • from-start
  • overflow-slot
附件卡片attachment
打开类型页

5 个相关组件

通用 · preview
  • gallery
  • uploading
  • group
  • sizes
  • states

内容导航Navigation

11 个类型

面包屑breadcrumb
打开类型页

4 个相关组件

通用 · preview
  • default
  • icon
  • separator
  • max-count
标签页tabs
打开类型页

5 个相关组件

通用 · preview
  • default
  • capsule
  • line
  • card
  • vertical
分页pagination
打开类型页

11 个相关组件

通用 · preview
  • default
  • mini
  • jumper
  • full
  • all
  • simple
  • prev-next
  • counter
  • text
  • joined
  • disabled
下拉菜单dropdown
打开类型页

12 个相关组件

通用 · preview
  • default
  • button
  • icons
  • group
  • checkbox
  • radio
  • more
  • user
  • theme
  • rich
  • submenu
  • help
步骤条steps
打开类型页

4 个相关组件

通用 · preview
  • default
  • dot
  • vertical
  • arrow
锚点anchor
打开类型页

3 个相关组件

通用 · preview
  • default
  • line
  • nested
回到顶部back-top
打开类型页

2 个相关组件

通用 · preview
  • default
  • custom
页头page-header
打开类型页

4 个相关组件

通用 · preview
  • default
  • extra
  • breadcrumb
  • content
固钉affix
打开类型页

2 个相关组件

通用 · preview
  • default
  • bottom
命令菜单command
打开类型页

8 个相关组件

通用 · preview
  • default
  • shortcuts
  • files
  • people
  • actions
  • settings
  • filter-tabs
  • footer
导航菜单navigation-menu
打开类型页

4 个相关组件

通用 · preview
  • default
  • platform
  • store
  • featured

反馈提示Feedback

13 个类型

进度条progress
打开类型页

16 个相关组件

通用 · preview
  • default
  • label
  • animation
  • success
  • warning
  • danger
  • color
  • steps
  • circle
  • mini
  • striped
  • upload
  • usage
  • metrics
  • setup
  • status
提示alert
打开类型页

8 个相关组件

通用 · preview
  • default
  • success
  • warning
  • error
  • title-default
  • title-success
  • title-warning
  • title-error
全局提示message
打开类型页

6 个相关组件

通用 · preview
  • default
  • success
  • warning
  • error
  • loading
  • closable
通知提醒notification
打开类型页

6 个相关组件

通用 · preview
  • default
  • success
  • warning
  • error
  • closable
  • no-icon
文字提示tooltip
打开类型页

10 个相关组件

通用 · preview
  • default
  • bottom
  • left
  • right
  • no-icon
  • no-arrow
  • icon
  • with-title
  • stats
  • preview
气泡卡片popover
打开类型页

10 个相关组件

通用 · preview
  • default
  • bottom
  • left
  • right
  • form
  • notifications
  • tips
  • share
  • feedback
  • profile
对话框modal
打开类型页

5 个相关组件

通用 · preview
  • info
  • success
  • warning
  • error
  • confirm
内容对话框modal-content
打开类型页

8 个相关组件

通用 · preview
  • list
  • form
  • import
  • export
  • detail
  • steps
  • preview
  • avatar-crop
加载中spin
打开类型页

10 个相关组件

通用 · preview
  • default
  • dot
  • badge
  • input
  • steps
  • item
  • processing
  • area
  • fullscreen
  • page
气泡确认popconfirm
打开类型页

5 个相关组件

通用 · preview
  • default
  • bottom
  • left
  • right
  • info
结果页result
打开类型页

8 个相关组件

通用 · preview
  • success
  • error
  • info
  • warning
  • 404
  • content-search
  • maintenance
  • offline
骨架屏skeleton
打开类型页

6 个相关组件

通用 · preview
  • avatar
  • card
  • card-image
  • list
  • avatar-grid
  • paragraphs
抽屉drawer
打开类型页

10 个相关组件

通用 · preview
  • default
  • left
  • top
  • bottom
  • form
  • scroll
  • float-form
  • float-scroll
  • float-login
  • float-cookie

数据图表Chart

13 个类型

柱状图chart-bar
打开类型页

3 个相关组件

通用 · preview
  • default
  • grouped
  • stacked
条形图chart-horizontal-bar
打开类型页

2 个相关组件

通用 · preview
  • default
  • compare
面积图chart-area
打开类型页

4 个相关组件

通用 · preview
  • sharp
  • sharp-compare
  • smooth
  • smooth-compare
折线图chart-line
打开类型页

2 个相关组件

通用 · preview
  • sharp
  • smooth
柱线组合图chart-combo
打开类型页

1 个相关组件

通用 · preview
  • default
漏斗图chart-funnel
打开类型页

1 个相关组件

通用 · preview
  • default
圆环图chart-donut
打开类型页

2 个相关组件

通用 · preview
  • basic
  • compact
雷达图chart-radar
打开类型页

3 个相关组件

通用 · preview
  • dots
  • circle
  • compare
玫瑰图chart-rose
打开类型页

2 个相关组件

通用 · preview
  • nightingale
  • semi
径向图chart-radial
打开类型页

5 个相关组件

通用 · preview
  • simple
  • label
  • text
  • shape
  • stacked
仪表盘chart-gauge
打开类型页

4 个相关组件

通用 · preview
  • default
  • semi
  • score
  • needle
水球图chart-liquid
打开类型页

1 个相关组件

通用 · preview
  • default
图表配色chart-palette
打开类型页

4 个相关组件

通用 · preview
  • theme
  • colorful
  • brand
  • muted

Social CTA

关注我们

获取最新设计规范与组件更新，访问官网或联系团队。

Visit us
Vibe Design · 产品协作
VibePM 微信扫码关注公众号 VibePM 公众号二维码
Copyright © www.VibePM.net All rights reserved
Loading