卡片组件：ss-card
Border Card UI 的本体组成依赖大量的卡片，卡片组件是最基础的页面组件。
基本使用
HTML
                    <div class="ss-card"></div>
VIEW
你也可以把卡片叠起来，不过你需要自行处理卡片之间的颜色层级，在默认提供的 color-*.css 中总共定义了三层卡片颜色，同样也不推荐卡片重叠过多。他们分别是：
--color--card
--color--card-1
--color--card-2
标题
你可以使用 header 组件来为卡片添加标题：
HTML
                    <div class="ss-card">
    <header><div></div>带有标头的卡片</header>
</div>
<div class="ss-card">
    <header><i class="fa fa-file-code-o" aria-hidden="true"></i>带有文本图标的卡片</header>
</div>
VIEW
带有标头的卡片
带有文本图标的卡片
语录栏组件：ana-card
这是个卡片衍生部件，它用于展示一个单行的重要文本，可以用于公告等。
基本使用
HTML
                    <div class="ss-card ana-card">
    <div></div>
    <span>『我的世界』 —— 很简单而已</span>
</div>
VIEW
『我的世界』 —— 很简单而已
单选按钮组件：ss-radio
单选按钮，就是普通的单选按钮而已。
基本使用
你需要覆盖 --radio-size 参数来修改它的大小，见下面的例子：
HTML
                    <label class="ss-radio" style="--radio-size: 23px;">
    <input type="radio">
    <div><div></div></div>
</label>
VIEW
这只是个单选按钮
开关组件：ss-switch
这是个基于 checkbox 的开关组件，就是个普通的 switch 而已。
基本使用
这是开关默认的样子：
HTML
                    <label class="ss-switch">
    <input type="checkbox">
    <div><div></div></div>
</label>
VIEW
自定义参数
你可以通过覆盖修改 --switch-dot-border、--switch-dot-margin、--switch-height、min-width 参数来更全面的修改开关的样式， 他们分别是开关白色边框的宽度、开关离外边框的距离（可以为负数）、开关的高度以及开关的宽度，如下例子：
HTML
                    <label class="ss-switch" style="--switch-dot-border: 4px;--switch-dot-margin: -4px;--switch-height: 15px;min-width: 37px;">
    <input type="checkbox">
    <div><div></div></div>
</label>
VIEW
验证码输入框：ss-code-input
这是一个很方便快捷的验证码输入框，可以用来快速构建输入验证码的功能。
基本使用
你需要使用 js 对输入框进行基本初始化，完成之后它长这样：
HTML
                    <label id="ss-code-input" class="ss-code-input">
    <input>
    <input>
    <input>
    <input>
    <input>
</label>
JS
                    initCodeInput(document.getElementById('ss-code-input'), true)
VIEW
输入触发
在默认情况下，输入框在输入结束后将会保持在最后一位，如果你想结束输入并触发一些操作，你可以修改初始化 JS：让第二位参数（AllowEdit）为 false 并且增加一个参数，它是你需要执行的函数。 在这种模式下，输入结束后输入框将无法再次进行编辑，如果有必要，你需要清空输入框使输入框可以再次被编辑。 你可以使用 getCodeInput() 方法和 cleanCodeInput() 方法来获取和清空输入框的内容。
JS
                    const pass = function () {
    alert("输入内容为：" + getCodeInput(document.getElementById('ss-code-input-1')))
    cleanCodeInput(document.getElementById('ss-code-input-1'))
    document.getElementById('ss-code-input-1').click()
}
initCodeInput(document.getElementById('ss-code-input-1'), false, pass)
VIEW
复杂应用
在默认情况下，输入框只能输入数字，但是你可以通过向构造方法传递正则表达式来自定需要判断的输入内容。在这种情况下，你必须传递操作函数（也可以是 null）。 正则表达式将会对每一格的输入内容进行判断，并且限制输入，使用方法如下：
JS
                    initCodeInput(document.getElementById('ss-code-input-2'), true, null, "[aeiouAEIOU]")
VIEW
如果你想让输入框显示的内容始终大写，可以给 input 加上 data-up="true" 参数，这时将会将输入内容处理为大写，如下：
HTML
                    <label id="ss-code-input" class="ss-code-input">
    <input data-up="true">
    <input data-up="true">
</label>
VIEW