小而美的IKUN-UI组件库源码学习(前言)

简介: 小而美的IKUN-UI组件库源码学习(前言)

“我很想知道为什么”


🐥坤-UI是由vue3和vitejs搭建的简易组件库 🏀,身为一名合格 IKUN,我得学习学习这款专门为我偶像打造的精美组件库。

来看到其组件使用文档:

组件分成了这四类:虽然量不多,但是帅呀!!!


  • 信息反馈


接着就来看到其项目文件的组织方式:

- dev
  组件调用测试面板
- docs
  组件使用文档
- packages  组件源码
  - ikui-components
  - ikui-theme
  - utils
- scripts
  项目打包相关

utils / install.ts

import { App } from 'vue'

export const withInstall = (main) => {
  main.install = (app: App): void => {
    app.component(main.name, main)
  }
  return main
}

这里是封装了一个简化组件组成的工具函数 withInstall,该工具函数接受一个参数 main,main 应该是一个 Vue 组件,main.install 为main组件添加了一个install方法,这个方法接受一个参数app,类型为APP,return main ,withInstall 函数返回 main 组件。这意味着 main 组件现在具有一个 install 方法,可以在Vue应用中使用。


再看到组件的样式组织

ikui-theme 文件夹

mixins 文件夹

common.scss

.ik-shadow__average {
  box-shadow: -10px 0 10px rgb(0 0 0 / 12%), 10px 0 10px rgb(0 0 0 / 12%), 0 -10px 10px rgb(0 0 0 / 12%),
    0 10px 10px rgb(0 0 0 / 12%);
}

config.scss

// $default: #f0f0f0;
// $primary: #cd8025;
// $success: #01847f;
// $warning: #fbD26a;
// $danger: #470024;
// $info: #4341bd;

$qianyun: #eaecf1; // 浅云
// $rimu: #cd8025; // 日暮
$rimu: #6379f6; // 绀宇
$tianshuibi: #5aa4ae; // 天水碧
$zhuyantuo: #f29a76; // 朱颜砣
$shiliuqun: #b13b2e; // 石榴裙
$mushanzi: #a4abd6; // 暮山紫

$default: $qianyun;
$primary: $rimu;
$success: $tianshuibi;
$warning: $zhuyantuo;
$danger: $shiliuqun;
$info: $mushanzi;

// button hover
$button-lighter--default: lighten($default, 3%);
$button-lighter--primary: lighten($primary, 3%);
$button-lighter--info: lighten($info, 3%);
$button-lighter--success: lighten($success, 3%);
$button-lighter--warning: lighten($warning, 1%);
$button-lighter--danger: lighten($danger, 2%);

// button active
$button-darker--default: darken($default, 3%);
$button-darker--primary: darken($primary, 2%);
$button-darker--info: darken($info, 3%);
$button-darker--success: darken($success, 2%);
$button-darker--warning: darken($warning, 4%);
$button-darker--danger: darken($danger, 2%);

// 不同类型的颜色状态
$allColors: (
  (
    name: 'default',
    // 默认背景色
    default: $default,
    // hover
    // simple: $button-lighter--default,
    defaultTextColor: #333,
    // hover 状态背景色
    defaultHover: $button-lighter--default,
    // Active 状态背景色
    defaultActive: $button-darker--default,
  ),
  (
    name: 'primary',
    default: $primary,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--primary,
    defaultActive: $button-darker--primary,
  ),
  (
    name: 'info',
    default: $info,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--info,
    defaultActive: $button-darker--info,
  ),
  (
    name: 'success',
    default: $success,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--success,
    defaultActive: $button-darker--success,
  ),
  (
    name: 'warning',
    default: $warning,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--warning,
    defaultActive: $button-darker--warning,
  ),
  (
    name: 'danger',
    default: $danger,
    defaultTextColor: #ffffff,
    defaultHover: $button-lighter--danger,
    defaultActive: $button-darker--danger,
  )
);

// *::selection {
//   background-color: $button-lighter--primary;
// }

$border-radius--size: 6px;

transition.scss

// drawer ============================= start
// mask
.drawer-fade-enter-active,
.drawer-fade-leave-active {
  transition: all 0.28s;
}

.drawer-fade-enter-from,
.drawer-fade-leave-to {
  opacity: 0;
}

.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.28s;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.drawer-slide__right-enter-active,
.drawer-slide__right-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__right-enter-from,
.drawer-slide__right-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

.drawer-slide__top-enter-active,
.drawer-slide__top-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__top-enter-from,
.drawer-slide__top-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.drawer-slide__bottom-enter-active,
.drawer-slide__bottom-leave-active {
  opacity: 1;
  transition: all 0.28s;
}
.drawer-slide__bottom-enter-from,
.drawer-slide__bottom-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
// drawer ============================= end

// lockScreen ============================= start
.lockScreen-enter-active,
.lockScreen-leave-active {
  transition: all 0.32s;
}
.lockScreen-enter-from,
.lockScreen-leave-to {
  opacity: 0;
  transform: translateY(-80%);
}
// lockScreen ============================= end

// tag =================================== start
.tag-fade-enter-active {
  animation: tag-bounce-in 0.24s;
}
.tag-fade-leave-active {
  animation: tag-bounce-in 0.22s reverse;
}
@keyframes tag-bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

// tag =================================== end

var.scss

$qianyun: #eaecf1; // 浅云
$rimu: #6379f6; // 绀宇
$tianshuibi: #5aa4ae; // 天水碧
$zhuyantuo: #f29a76; // 朱颜砣
$shiliuqun: #b13b2e; // 石榴裙
$mushanzi: #a4abd6; // 暮山紫

$default: $qianyun;
$primary: $rimu;
$success: $tianshuibi;
$warning: $zhuyantuo;
$danger: $shiliuqun;
$info: $mushanzi;

:root {
  --default-color: #eaecf1;
  --primary-color: #6379f6;
  --success-color: #5aa4ae;
  --warning-color: #f29a76;
  --danger-color: #b13b2e;

  --button-plain-bg: #fff;

  // hover
  --default-color-lighter-1: #f3f4f7;
  --primary-color-lighter-1: #7185f7;
  --success-color-lighter-1: #64aab3;
  --warning-color-lighter-1: #f29d7b;
  --danger-color-lighter-1: #b93e30;
  // active
  --default-color-darker-1: #e1e4eb;
  --primary-color-darker-1: #5971f5;
  --success-color-darker-1: #54a0aa;
  --warning-color-darker-1: #f08c63;
  --danger-color-darker-1: #a9382c;

  --primary-color-hover: #e8ebfb;

  --default-radius: 6px;
  --default-round-radius: 24px;

  // disabled
  --default-color-lighter-2: #f1f2f5;
  --primary-color-lighter-2: #6d85ff;
  --success-color-lighter-2: #8dc0c7;
  --warning-color-lighter-2: #efa384;
  --danger-color-lighter-2: #d44737;

  --primary-color-lighter-3: #7791ff;
  --primary-color-lighter-4: #8ba9ff;
  --primary-color-lighter-5: #9ec2ff;
  --primary-color-lighter-6: #b2daff;
  --primary-color-lighter-7: #bee8ff;

  --success-color-lighter-3: #64aab3;
  --success-color-lighter-4: #64aab3;
  --success-color-lighter-5: #64aab3;
  --success-color-lighter-6: #64aab3;
  --success-color-lighter-7: #64aab3;

  --danger-color-lighter-3: #f85340;
  --danger-color-lighter-4: #ff5e4a;
  --danger-color-lighter-5: #ff644e;
  --danger-color-lighter-6: #ff6a53;
  --danger-color-lighter-7: #ff7057;
}

:root {
  --input-default-border-color: #dde0e5;
  --input-hover-border-color: #dde0e5;

  --default-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);

  // select
  --select-inner-bg: #fff;
  --select-inner-color: #333;
  --select-options-bg: #fff;

  // switch
  --switch-bg-on-color: var(--primary-color);
  --switch-bg-off-color: var(--default-color-darker-1);

  // model
  --drawer-body-bg: #fff;

  // tabs
  --tabs-header-bg: #f5f5f5;
  --tabs-header-block-bg: #fff;
}

.dark {
  // button
  --default-color: #525354;
  --default-color-darker-1: #333;
  --default-color-lighter-1: #444;
  --default-color-lighter-2: #666;
  --button-plain-bg: transparent;

  // select
  --select-inner-bg: #333;
  --select-inner-color: #c7c7c7;
  --select-options-bg: #333;

  // model
  --drawer-body-bg: #333;

  // tabs
  --tabs-header-bg: #333;
  --tabs-header-block-bg: #666;
}
目录
打赏
0
0
0
0
8
分享
相关文章
小而美的IKUN-UI组件库源码学习(按钮 Button)
小而美的IKUN-UI组件库源码学习(按钮 Button)
82 0
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
84 15
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
81 11
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
120 56
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
138 55
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
74 14
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
61 1
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
290 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
109 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问