更新记录

1.1.1（2024-12-31） 下载此版本

按钮组件优化

1.1.0（2024-12-27） 下载此版本

添加搜索组件

1.0.1（2024-12-26） 下载此版本

1、添加loading组件 2、添加间距Space组件

平台兼容性

UNIAPP

开始

组件安装下载后

// pages.json 
"easycom": {
    "autoscan": true,
    "custom": {
        "^f-(.*)": "@/uni_modules/fd-ui/components/f-$1/f-$1.vue"
    }
},

<!-- App.vue -->
<style lang="scss">

@import url('@/uni_modules/fd-ui/index.scss');

</style>

/* uni.scss */
@import '@/uni_modules/fd-ui/theme.scss';

自定义主题

/**
 * 在uni.scss 文件下
 */

@import '@/uni_modules/fd-ui/theme.scss';

/**
 * 在引入主题文件后通过修改颜色变量从而修改颜色
 */

$f-primary-color: #417ff9;
$f-success-color: #2bcc63;
$f-danger-color: #fa3131;
$f-warning-color: #f5903d;
$f-black: #28314b;

$f-primary-color-80: rgba($f-primary-color, 0.8);
$f-primary-color-40: rgba($f-primary-color, 0.4);
$f-primary-color-15: rgba($f-primary-color, 0.15);

$f-success-color-80: rgba($f-success-color, 0.8);
$f-success-color-40: rgba($f-success-color, 0.4);
$f-success-color-15: rgba($f-success-color, 0.15);

$f-danger-color-80: rgba($f-danger-color, 0.8);
$f-danger-color-40: rgba($f-danger-color, 0.4);
$f-danger-color-15: rgba($f-danger-color, 0.15);

$f-warning-color-80: rgba($f-warning-color, 0.8);
$f-warning-color-40: rgba($f-warning-color, 0.4);
$f-warning-color-15: rgba($f-warning-color, 0.15);

$f-black-85: rgba($f-black, 0.85);
$f-black-65: rgba($f-black, 0.65);
$f-black-45: rgba($f-black, 0.45);
$f-black-35: rgba($f-black, 0.35);
$f-black-25: rgba($f-black, 0.25);
$f-black-15: rgba($f-black, 0.15);
$f-black-10: rgba($f-black, 0.1);
$f-black-5: rgba($f-black, 0.05);