我的UI组件库

一、布局Layout

基本样式

.tykj-w–auto

.tykj-w–full

.tykj-w–stretch

.tykj-h–full

.tykj-p–s

.tykj-p–m

.tykj-p–l

.tykj-p–xl

.tykj-p–2xl

.tykj-px–s

.tykj-py–s

.tykj-py–m

.tykj-py–xl

.tykj-py–2xl

.tykj-py–3xl

.tykj-radius–m

.tykj-gap–2xs

.tykj-gap–xs

.tykj-gap–s

.tykj-gap–m

.tykj-gap–l

.tykj-gap–xl

.tykj-gap–2xl

.tykj-gap–3xl

GRID样式

tykj-grid–631

tykj-grid–531

tykj-grid–442

tykj-grid–432

tykj-grid–421

tykj-grid–331

tykj-grid–211

tykj-grid–111

tykj-grid–fit-4-280

tykj-grid–fit-3-380

tykj-grid–fit-2-560

tykj-grid–auto-rows-1fr

tykj-l-grid--fit-3-380

FLEX样式

tykj-flex–xcenter-ycenter

tykj-flex–xbetween-ycenter

tykj-flex–xstart-ycenter

tykj-flex–ycenter-xcenter

tykj-flex–ycenter-xstart

tykj-flex–ycenter-xend

tykj-flex–ybetween-xcenter

tykj-flex–ystart-xcenter

tykj-flex–row-010

二、组件Component

图片样式

tykj-c-img–scale-105

tykj-c-img–rotate-5deg

tykj-bg-img–hover-v2

tykj-bg-img–hover-v2是背景图片，默认有一些暗度，然后hover的时候，有更大一点的暗度，同时内容z-index的注意层级。适用与卡片。

这里的图片是指背景图片

表单样式

tykj-from–default

文章分类样式

tykj-c-cate–main-v1
tykj-c-cate–main-v1-a
tykj-c-cate–main-v1-a1
tykj-c-cate–main-v1-a2
tykj-c-cate–main-v1-a3

所有分类

(11)

文章目录样式

tykj-single-toolbar

看左方

注意原理：Bricks 的分类菜单循环中，当当前页面是该分类时，Bricks 自动在 <a> 上输出 aria-current=”page” ，用 CSS 属性选择器 [aria-current=”page”] 精准匹配即可。

文章列表样式

v1

让你的 Bricks 网站像大厂一样展示代码：深度定制 Prism.js 高亮指南

2026年4月13日

浮动工具样式

tykj-footer-float-tools-lis-v1
tykj-footer-float-tools-lis-v1-content
tykj-back-to-top

看右方固定的浮动工具栏
备注：整个模块使用

三、工具Utility

文字样式

tykj-text–left

tykj-text–center

tykj-text–right

tykj-text–justify

tykj-align–middle

tykj-text-a–base-hover

tykj-text--left

tykj-text--center

tykj-text--right

tykj - text -- justify tykj - text -- justify tykj - text -- justify tykj - text -- justify tykj - text -- justify tykj - text -- justify

这段文字里面有一个链接，主要是给你看看链接样式

tykj-link-underline-fltr

tykj-u-line–1

tykj-u-line–2

tykj-u-line–3

tykj-u-line–4

一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。一共有5行，展示文字截断效果。

按钮样式

tykj-u-btn
tykj-u-btn–primary
tykj-u-btn–secondary
tykj-u-btn–bg-white
tykj-u-btn–outline-primary
tykj-u-btn–outline-white
tykj-u-btn–outline-deep
tykj-u-btn–ghost
tykj-u-btn–sm
tykj-u-btn–lg
tykj-u-btn–capsule-tips

primarysecondarybg-whitebg-whiteoutline-whiteoutline-deepghost

Icon样式

tykj-u-icon–outline-priimary
tykj-u-icon–sm

tykj-u-social–v1
tykj-u-social–v2

tykj-u-tips–capsule

outline-deep

动效样式

tykj-l-hover–up-3px
tykj-l-hover–left-3px
tykj-l-hover–right-3px

tykj-l-hover--up-3px

tykj-l-hover--left-3px

tykj-l-hover--right-3px

阴影样式

tykj-shadow–static-s

tykj-shadow–static-m

tykj-shadow–static-l

tykj-shadow–static-xl