引入css
注意，组件的css使用了页面root的css变量，如果复制组件的话，需要复制以下内容。
如果您打算直接将样式放到css文件或html中，需要复制本段代码。
:root {
--ul-color-main-base: #3B82F6;
--ul-color-main-hover: #2563EB;
--ul-color-main-light: #DBEAFE;
--ul-color-main-text: #fff;
--ul-color-primary-base: #3B82F6;
--ul-color-primary-hover: #2563EB;
--ul-color-primary-light: #DBEAFE;
--ul-color-primary-text: #fff;
--ul-color-success-base: #10B981;
--ul-color-success-hover: #059669;
--ul-color-success-light: #D1FAE5;
--ul-color-success-text: #fff;
--ul-color-danger-base: #EF4444;
--ul-color-danger-hover: #DC2626;
--ul-color-danger-light: #FEE2E2;
--ul-color-danger-text: #fff;
--ul-color-warning-base: #F59E0B;
--ul-color-warning-hover: #D97706;
--ul-color-warning-light: #FEF3C7;
--ul-color-warning-text: #fff;
--ul-color-info-base: #06B6D4;
--ul-color-info-hover: #0891B2;
--ul-color-info-light: #CFFAFE;
--ul-color-info-text: #fff;
--ul-color-dark-base: #1F2937;
--ul-color-dark-hover: #111827;
--ul-color-dark-light: #D1D5DB;
--ul-color-dark-text: #fff;
--ul-color-light-base: #F9FAFB;
--ul-color-light-hover: #F3F4F6;
--ul-color-light-light: #FFFFFF;
--ul-color-light-text: #1F2937;
--ul-color-gray-base: #E5E7EB;
--ul-color-gray-hover: #D1D5DB;
--ul-color-gray-light: #F3F4F6;
--ul-color-gray-text: #374151;
--ul-color-white: #fff;
--ul-color-black: #000;
--ul-color-text: #1F2937;
--ul-color-text-secondary: #6B7280;
--ul-color-text-placeholder: #9CA3AF;
--ul-color-text-disabled: #9CA3AF;
--ul-color-border: #E5E7EB;
--ul-color-bg: #F9FAFB;
--ul-bg-color-overlay: #fff;
--ul-bg-color-page: #F3F4F6;
}引入基础scss代码
注意，组件的scss使用了大量的基础变量，如果打算复制scss的话，还需要复制以下内容。
// 全局变量
// --------------------------------------------------
// 主题色
// Main 主要用于字体
$color-main-base: var(--ul-color-main-base);
$color-main-hover: var(--ul-color-main-hover);
$color-main-light: var(--ul-color-main-light);
$color-main-text: var(--ul-color-main-text);
// Primary
$color-primary-base: var(--ul-color-primary-base);
$color-primary-hover: var(--ul-color-primary-hover);
$color-primary-light: var(--ul-color-primary-light);
$color-primary-text: var(--ul-color-primary-text);
// Success
$color-success-base: var(--ul-color-success-base);
$color-success-hover: var(--ul-color-success-hover);
$color-success-light: var(--ul-color-success-light);
$color-success-text: var(--ul-color-success-text);
// Danger
$color-danger-base: var(--ul-color-danger-base);
$color-danger-hover: var(--ul-color-danger-hover);
$color-danger-light: var(--ul-color-danger-light);
$color-danger-text: var(--ul-color-danger-text);
// Warning
$color-warning-base: var(--ul-color-warning-base);
$color-warning-hover: var(--ul-color-warning-hover);
$color-warning-light: var(--ul-color-warning-light);
$color-warning-text: var(--ul-color-warning-text);
// Info
$color-info-base: var(--ul-color-info-base);
$color-info-hover: var(--ul-color-info-hover);
$color-info-light: var(--ul-color-info-light);
$color-info-text: var(--ul-color-info-text);
// Dark
$color-dark-base: var(--ul-color-dark-base);
$color-dark-hover: var(--ul-color-dark-hover);
$color-dark-light: var(--ul-color-dark-light);
$color-dark-text: var(--ul-color-dark-text);
// Light
$color-light-base: var(--ul-color-light-base);
$color-light-hover: var(--ul-color-light-hover);
$color-light-light: var(--ul-color-light-light);
$color-light-text: var(--ul-color-light-text);
// Gray
$color-gray-base: var(--ul-color-gray-base);
$color-gray-hover: var(--ul-color-gray-hover);
$color-gray-light: var(--ul-color-gray-light);
$color-gray-text: var(--ul-color-gray-text);
// 主题变体 - 可以使用循环生成所有主题色变体
$theme-colors: ("primary": $color-primary-base,
"success": $color-success-base,
"danger": $color-danger-base,
"warning": $color-warning-base,
"info": $color-info-base,
"dark": $color-dark-base,
"light": $color-light-base,
"gray": $color-gray-base);
// 包含所有变体的主题色集合
$theme-color-variants: (
"primary": (
"base": $color-primary-base,
"hover": $color-primary-hover,
"light": $color-primary-light,
"text": $color-primary-text
),
"success": (
"base": $color-success-base,
"hover": $color-success-hover,
"light": $color-success-light,
"text": $color-success-text
),
"danger": (
"base": $color-danger-base,
"hover": $color-danger-hover,
"light": $color-danger-light,
"text": $color-danger-text
),
"warning": (
"base": $color-warning-base,
"hover": $color-warning-hover,
"light": $color-warning-light,
"text": $color-warning-text
),
"info": (
"base": $color-info-base,
"hover": $color-info-hover,
"light": $color-info-light,
"text": $color-info-text
),
"dark": (
"base": $color-dark-base,
"hover": $color-dark-hover,
"light": $color-dark-light,
"text": $color-dark-text
),
"light": (
"base": $color-light-base,
"hover": $color-light-hover,
"light": $color-light-light,
"text": $color-light-text
),
"gray": (
"base": $color-gray-base,
"hover": $color-gray-hover,
"light": $color-gray-light,
"text": $color-gray-text
)
);
// 中性色与通用色
$color-white: var(--ul-color-white);
$color-black: var(--ul-color-black);
$color-text: var(--ul-color-text);
$color-text-secondary: var(--ul-color-text-secondary);
$color-text-placeholder: var(--ul-color-text-placeholder);
$color-text-disabled: var(--ul-color-text-placeholder);
$color-border: var(--ul-color-border);
$color-bg: var(--ul-color-bg);
$bg-color-overlay: var(--ul-bg-color-overlay);
$bg-color-page: var(--ul-bg-color-page);
// 间距
$space-base: 4px;
$space-xs: $space-base; // 4px
$space-sm: $space-base * 2; // 8px
$space-md: $space-base * 4; // 16px
$space-lg: $space-base * 6; // 24px
$space-xl: $space-base * 8; // 32px
// 字体
$font-size-base: 14px;
$font-size-md: 14px;
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;
$font-size-xxxl: 38px;
$line-height-base: 1.5;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
// 圆角
$radius-sm: 2px;
$radius-base: 4px;
$radius-md: 6px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-circle: 50%;
// 阴影
$shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
$shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
$shadow-xl: 0 12px 24px 0 rgba(0, 0, 0, 0.12);
// 混合宏 (Mixins)
// --------------------------------------------------
// Flex 布局
@mixin flex($justify: flex-start, $align: center, $direction: row) {
display: flex;
justify-content: $justify;
align-items: $align;
flex-direction: $direction;
}
// 文本溢出省略
@mixin text-ellipsis($lines: 1) {
@if $lines==1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@else {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
}
}
// ==========================================================================
// Variables and Mixins
// ==========================================================================
// Grid columns
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Breakpoints
$screen-sm: 576px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1400px !default;
$breakpoints: (sm: $screen-sm,
md: $screen-md,
lg: $screen-lg,
xl: $screen-xl,
xxl: $screen-xxl) !default;
// Container max widths
$container-max-widths: (sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px) !default;
// Media Query Mixins
@mixin media-breakpoint-up($name, $breakpoints-map: $breakpoints) {
$min: map-get($breakpoints-map, $name);
@if $min {
@media (min-width: $min) {
@content;
}
}
@else {
@error "No value found for `#{$name}` in $breakpoints-map.";
}
}
@mixin media-breakpoint-down($name, $breakpoints-map: $breakpoints) {
$max: map-get($breakpoints-map, $name) - 0.02;
@if $max {
@media (max-width: $max) {
@content;
}
}
@else {
@error "No value found for `#{$name}` in $breakpoints-map.";
}
}关于JS
一些组件需要配合js使用，我们推荐您使用顺手的框架实现基本的交互功能，比如jquery,vue,htmx等。
本站使用jQuery封装了一些插件，在相关组件中有介绍，可以直接根据说明使用。
本站主要提供组件样式，js部分也仅是为了展示效果。比如标签页组件，我们只实现了点击切换的功能，如果需要拖拽排序，关闭等功能，需要寻找其他专业的插件来实现。
关于图片
ULUI提供了各种类型的示例图片，所有图片资源来源 https://pixabay.com ，都是免版税资源，无需授权。具体政策参考：https://pixabay.com/zh/service/license-summary/ 。
但本站不保证图片的长期有效性，如果您需要长期使用，建议自行下载并托管。