app-kit-ui (英语)
@behindthemusictree/app-kit-ui ——"MusicTree"组件后面的样式(流行,OAuth召回)
屏幕,流派树),建于无头上 @behindthemusictree/app-kit。安装它以获取
BTMT外观;跳过后用app-kit的钩子来作自己的UI来得到不同的钩子.
子路径
import { BasePopup, AuthPopup, NetworkErrorPopup, TrackUploadPopup } from "@behindthemusictree/app-kit-ui/popup";
import { AuthCallbackHandler } from "@behindthemusictree/app-kit-ui/auth";
import { GenreTreeView, TrackListSidebar, TrackItem, Rating } from "@behindthemusictree/app-kit-ui/genre-tree";
import "@behindthemusictree/app-kit-ui/genre-tree/styles.css";
同伴
@behindthemusictree/app-kit (只有一份,所以会话/Player/Popup上下文是共享的),
@behindthemusictree/ui, (中文(简体) ), @tanstack/react-query, (中文(简体) ), next, (中文(简体) ), react, (中文(简体) ), react-dom. 尾风必须
扫描 node_modules/@behindthemusictree/app-kit-ui/dist/**。 。 。 .
主题合同
颜色来自 CSS 变量,定义为 @behindthemusictree/brand (单位:千美元)tokens/theme.css)或通过
您的样式表 :
| 脚本 | 用于 |
|---|---|
--color-primary, (中文(简体) ), --color-primary-hover | 主要行动 |
--color-text | 文本正文 |
--color-neutral-100 . --color-neutral-700 (100、200、300、500、600、700) | 表面、 边框、 变音文本 |
--color-red-500, (中文(简体) ), --color-red-600, (中文(简体) ), --color-red-700 | 错误 |
--color-green-500 | 正在播放状态 |
--color-blue-500 | 链接和要点 |
第三方品牌颜色(Spotify,Google)保持文字化.
PlayerPanel 还读取了布局符号 --layout-gutter, (中文(简体) ), --layout-band-top, (中文(简体) ), --layout-right-w 财务报告和审定财务报表 --layout-detail-panel-w 从相同的样式表.
GenreTreeView 与 placement="regions" 套装 --layout-left-w 改为 0px 在文档中,当其信息面板被隐藏时,样式表可以拓宽中心列.
延长点
GenreTreeView带className根( 默认时无外边距) 和showDisplayOptions(默认)true)隐藏"Tree显示选项"组.- 折叠道具( R)
renderArtistLink, (中文(简体) ),renderSummary, (中文(简体) ),renderTracksToolbar,)替换 流派细节面板.