Border Card UI
Version - 1.7
文档
使用
下载
关于 Border Card UI
还是做前端页面什么的最有趣了(主修后端的 SS 如是说)
这是 SS ——,Border Card UI 是 SS 第一个使用的纯扁平化设计风格,它也完全出自意外(不是),并且现在已经扩展到了你能看见的所有来自我的界面!(我称之为 BCUI 化 x) 在 2020 年的高三,我闲来无事买了本 WPF 开发的教程,便开始从简陋的控制台编程跨向了现代化的 UI 程序开发(其实在这之前我还学了 Windows API) 于是我想着要用什么东西练练手,于是 SS Tool Box 就出现了!你可以在 这儿 看到更多和 SS Tool Box 相关的内容。 SSTB 经历了好几版的更新,还有好几版的界面设计更新,界面有些是自己设计的,有些可能直接来自 UI 库。 总之,在 2.0 的重置版里,我设计了一个全新的 UI,它就是现在的 Border Card UI。 为什么叫 Border Card UI? 因为它在 WPF 中最早的实现方式依靠了大量的 Border 控件,于是我脑子一抽,就用 Border 做名字了 XD Border Card UI 并不是一个全部自主设计的风格,它来自于早期 SSTB 的卡片、TMore 的界面设计(主要来源)、PCL2 的动画设计(主要来源)甚至在新版本中还有 Windows 11 的新元素。 Border Card UI 是个设计风格,它指定了一个卡片化、扁平、优雅的设计风格,并且尝试将它迁移到任何有界面的平台上。总而言之,这是个设计风格,只有基础的要求和无限的可能。 还是那句熟悉的话: 它有着并不是特别完美的设计,有着并不是特别规范的代码,有着看起来非常鸡肋的彩蛋。 但是这些都不重要,重要的是,它是 SS 第一个用来学习和练习的东西。 林槐出品,必属稽品
快速开始
这儿仅包括 Border Card UI For Web 的网页端实现使用方式,如果想看看其他平台,去 使用 界面查看吧。
引入文件
你需要引入一些 CSS 和 JS 文件来快速将 BCUI 应用在你的页面中,这不是件难事。
CSS 引入内容
                        <!-- 这是配色文件,如果你想自定义它,可以用本地文件替代;
但是在你使用本地文件的时候,你必须同时准备一份 color-dark.css。
当然如果你想优先加载暗黑主题,也可以替换为 https://api.stapxs.cn/css/color-dark.css。 -->
<link rel="stylesheet" href="https://api.stapxs.cn/css/color-light.css">
<!-- 这是主样式 -->
<link rel="stylesheet" href="https://api.stapxs.cn/css/style.css">
                    
                
JS 引入内容
                        <!-- 这是主功能 -->
<script src="https://api.stapxs.cn/js/main.js"></script>
<!-- 这个 JS 提供自动暗黑模式的功能,如果你不需要它,可以不使用。 -->
<script src="https://api.stapxs.cn/js/auto-theme.js"></script>
                    
                
开始使用
接下来就完成啦,去 文档 界面找些控件试一试吧!
小尾巴
BCUI For Web 的实现还非常年轻,这意味着它目前非常简陋和不成熟,如果你在使用控件库的时候遇到了问题以及 BUG,请及时在 Github Issues 告诉我! 如果你有关于新的控件和布局的建议,也可以在 Issues 告诉我!BCUI 现在需要更加完善!
更新记录

少女祈祷中
Border Card UI For Web
Version - 1.7