组件总览

2.0 提供全局插件和逐组件入口，组件必要 CSS 会自动按需加载。下列 Demo 使用隔离的组件样式；Utilities 与 base.css 均为显式可选，Minecraft 字体由文档站单独导入 fonts.css。

基础与反馈预览

生存模式3

import { ref } from 'vue'
const enabled = ref(true)
const checked = ref(false)
const mode = ref('survival')
const volume = ref(60)
const dialog = ref(false)
const tab = ref('worlds')
const tabs = [
  { label: '世界', value: 'worlds' },
  { label: '服务器', value: 'servers' },
]
const modes = [
  { title: '生存', value: 'survival' },
  { title: '创造', value: 'creative' },
]

状态反馈预览

保存完成

世界数据已写入

加载中

import { ref } from 'vue'
const enabled = ref(true)
const checked = ref(false)
const mode = ref('survival')
const volume = ref(60)
const dialog = ref(false)
const tab = ref('worlds')
const tabs = [
  { label: '世界', value: 'worlds' },
  { label: '服务器', value: 'servers' },
]
const modes = [
  { title: '生存', value: 'survival' },
  { title: '创造', value: 'creative' },
]

表单

Form 与 FormField 属于同一表单组件族：Form 负责组合、提交和验证，FormField 负责字段标签、描述与消息展示；标准输入组件已内置 FormField。

允许作弊

启用音效

游戏模式

世界名称

至少 3 个字符

描述

音量

60

import { ref } from 'vue'
const enabled = ref(true)
const checked = ref(false)
const mode = ref('survival')
const volume = ref(60)
const dialog = ref(false)
const tab = ref('worlds')
const tabs = [
  { label: '世界', value: 'worlds' },
  { label: '服务器', value: 'servers' },
]
const modes = [
  { title: '生存', value: 'survival' },
  { title: '创造', value: 'creative' },
]

布局与导航

当前：worlds

• 生存模式
• 创造模式

import { ref } from 'vue'
const enabled = ref(true)
const checked = ref(false)
const mode = ref('survival')
const volume = ref(60)
const dialog = ref(false)
const tab = ref('worlds')
const tabs = [
  { label: '世界', value: 'worlds' },
  { label: '服务器', value: 'servers' },
]
const modes = [
  { title: '生存', value: 'survival' },
  { title: '创造', value: 'creative' },
]

浮层预览

import { ref } from 'vue'
const enabled = ref(true)
const checked = ref(false)
const mode = ref('survival')
const volume = ref(60)
const dialog = ref(false)
const tab = ref('worlds')
const tabs = [
  { label: '世界', value: 'worlds' },
  { label: '服务器', value: 'servers' },
]
const modes = [
  { title: '生存', value: 'survival' },
  { title: '创造', value: 'creative' },
]

按职责浏览

顶栏按「指南 / 组件 / 样式」分区；组件侧栏统一使用“中文 / English”格式，中文说明用途，英文对应公开组件名。独立功能组件使用单独页面和实时 Demo；Grid、ExpansionPanels、Appbar 等紧密协作的组件族保留在同页。

• 基础：Button、Icon、Card、Divider
• 表单：Form、FormField、单行文本输入框 / TextField、多行文本输入框 / Textarea、Select、Autocomplete、Checkbox、Radio、RadioGroup、Switch、Slider、FileInput、NumberInput
• 导航：Tabs、ButtonTabs、List、Breadcrumbs、Pagination、ExpansionPanels、Stepper
• 布局：Layout、Grid、Panel、Appbar 组件族、Drawer、ScrollView、VirtualScroll
• 数据展示：Table、DataTable、Avatar、Badge、Chip、SkinViewer
• 浮层：Overlay、Dialog（含 Confirm）、Menu、Tooltip
• 反馈：Alert、Snackbar、Progress、Spinner、Skeleton、LoadingMask、Pop