Fixtures
浏览淘汰赛轮次或径向赛程，并查看队伍与比赛元数据。
适用场景
- 当界面需要以下行为时使用 Fixtures：浏览淘汰赛轮次或径向赛程，并查看队伍与比赛元数据。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/knockout-bracket.json https://orvui.efu.me/r/knockout-wheel.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
Knockout Wheel
knockout-wheel.vue围绕径向轮盘排列淘汰赛对阵，将冠军放在中心。
- Solar v Ashford · 2–1
- Solar v Birch FC · 2–1
- Fjord FC v Ashford · 0–0 (3–4 pens)
- Solar v Port Vale · 1–0
- Eastgate v Birch FC · 2–3
- Fjord FC v Ivory · 2–1
- Ashford v Grovefield · 3–1
- Solar v Juniper · 2–0
- North Harbor v Port Vale · 1–3
- Eastgate v Upland · 2–1
- Copper FC v Birch FC · 0–1
- Fjord FC v Moonbay · 3–1
- Beacon v Ivory · 1–2
- Ashford v Marina · 2–0
- Grovefield v Northbay · 1–1 (4–2 pens)
- Solar v Coral Rise · 3–0
- Juniper v Seabrook · 2–1
- North Harbor v Elmbridge · 2–0
- Green FC v Port Vale · 2–3
- Eastgate v West FC · 4–0
- Cedar FC v Upland · 0–2
- Copper FC v Duskvale · 1–0
- Birch FC v Creekwood · 3–1
- Fjord FC v Pebble FC · 2–1
- Suncrest v Moonbay · 0–1
- Beacon v Tideland · 2–0
- Snowfield v Ivory · 1–3
- Ashford v Peak · 2–0
- Quartz v Marina · 0–1
- Grovefield v Silverlake · 4–2
- Aster FC v Northbay · 1–2
packages/vue/src/blocks/knockout-bracket/examples/knockout-wheel.vue
<script setup lang="ts">
import { KnockoutWheel, WHEEL_ROUNDS } from "@/components/orvui/blocks/knockout-bracket";
const season = { rounds: WHEEL_ROUNDS, initialRound: 0 };
</script>
<template>
<div class="w-full py-8"><KnockoutWheel v-bind="season" /></div>
</template>
packages/vue/src/blocks/knockout-bracket/src/KnockoutWheel.vue
Knockout Bracket
knockout-bracket.vue浏览锦标赛轮次与队伍信息，并可加入季军赛。
Showing Round of 16, Quarter-finals, and Semi-finals
Round of 16
Quarter-finals
Semi-finals
- Sat, 4 JulFT
Cedar FC0
Moonbay3 - Sun, 5 JulFT
Pinehaven0
Fjord FC1 - Mon, 6 JulFT
Union1
Beacon4 - Mon, 6 JulFT
Port Vale0
Solar1 - Mon, 6 JulFT
Birch FC1
Northbay2 - Mon, 6 JulFT
Marina2
Eastgate3 - Tue, 7 JulFT (P)
Snowfield0 (4)
Coastline0 (3) - Tue, 7 JulFT
Ashford3
Ember2
- Fri, 10 Jul, 4:00 amFTFjord FC2Moonbay0
- Sat, 11 Jul, 3:00 amFTSolar2Beacon1
- TodayFTNorthbay1Eastgate2
- TodayFTAshford3Snowfield1
- Wed, 15 Jul, 4:00 amFjord FCSolar
- Thu, 16 Jul, 3:00 amEastgateAshford
Third place play-off
Sun, 19 Jul, 3:00 amTBDTBD
packages/vue/src/blocks/knockout-bracket/examples/knockout-bracket.vue
<script setup lang="ts">
import { KnockoutBracket, ROUNDS, THIRD_PLACE } from "@/components/orvui/blocks/knockout-bracket";
const season = { rounds: ROUNDS, thirdPlace: THIRD_PLACE, initialRound: 1 };
</script>
<template>
<div class="w-full py-8"><KnockoutBracket v-bind="season" /></div>
</template>
packages/vue/src/blocks/knockout-bracket/src/KnockoutBracket.vue
状态与事件
此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。
API 参考
Knockout Wheel
roundsRound[]—initialRound?number0Knockout Bracket
roundsRound[]—initialRound?number1thirdPlace?Match—thirdPlaceLabel?string"Third place play-off"无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Fixtures？
- 通过 rounds、initialRound、thirdPlace、thirdPlaceLabel 配置 Fixtures；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 通过文档中的组合方式提供内容，应用副作用由调用方管理。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
请留意
部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。
更新于
来源与许可 ↗MIT · 0.1.1