Ant Design（蚂蚁组件）是蚂蚁集团体验技术部经过大量项目实践和总结，逐步打磨出的一个设计系统，内含带有 React 的 UI 库。它是为企业级产品设计而创建的。Ant Design 提供了高质量的交互界面设计组件和演示。作为 UI 设计师，在我们的工作中，善于利用现有的设计系统组件能够极大地提升工作效率。今天，即时设计设计师将向大家介绍广泛使用的设计系统 Ant Design 以及它的使用
转载
2024-03-12 14:41:01
55阅读
1. 需求最近项目中要修改原有的菜单,项目UI为antd,antd的导航菜单长这样: 看着挺好的,完美对齐,但是当把我的菜单文案填入之后发现: 左右不对齐,这也太丑了吧,这要是放任不管要被怼的。2. 排查问题开始审查元素,先查看官方demo正常能对齐的样式: 再看下我的demo不能对齐的样式: 发现我的菜单里少了一个 min-width ,也就是说antd在某一步给官方的demo添加了st
转载
2024-06-18 21:57:36
106阅读
封装vue组件库1.新建项目新建一个vue项目vue create 项目名2.在src目录下新建一个packages文件夹，用来存放组件文件及字体图标等。目录如下：3.同在packages文件夹下新建一个index.js文件，用来注册所有组件，引入字体图标import Button from './button'
const components = [Button]
// 定义install方法
前言Vue结合ElementUI是一个流行的前端技术组合，用于快速开发和搭建桌面端的界面。以下是关于这个组合的详细介绍：组件库：ElementUI是基于Vue 2.x版本开发的一套组件库。它为开发者提供了一系列的预制组件，如布局、导航、输入框、选择器等，这些组件均已预先设计好样式并封装了常用功能，使得开发者能够高效地构建出整洁且风格一致的用户界面。技术栈：vue-element-admin是一个以
前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的，看到作者的高度肯定后我立即转到github上，正如许多朋友所关注的，Formik的星数达8282，这个数字在github虽然不算很高，但是从基于React技术跨平台表单开发这个主题角度来看，此数字已经相当可观了。不自觉地，我对比了redux-form与Formik的几个数据，如下：库开源库的时间星数redux-fo
1、官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大，但是太复杂了，感觉大部分功能都用不上，下面实现一个简单从后台动态获取菜单的功能。 2、增加SubMenu方法 2.1 定义 const { SubMenu } = Menu
转载
2020-01-31 18:33:00
212阅读
2评论
今天花了大半天时间从老家回到工作地，路上因为肺炎封堵挺厉害，希望国家挺过这个难关，要不大家都失业可就惨了，上一篇做了一个展示数据的demo，这一篇研究antd Menu item点击事件 1、还是先看文档 在menu上增加onClick事件 2、handleClick代码如下 handleClick
转载
2020-02-01 22:33:00
729阅读
2评论
一、前言 利用Sass预处理实现换肤和字体大小调整。 思路及达到的效果：字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配. 实现方法：1.利用全局变量和bus事件，使用js方式调整字体和颜色(这里暂不讨论); 2.利用scss预处理方式实现
转载
2024-07-13 05:43:43
478阅读
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以
上一章我们详解了项目的架构目录，这一章主要学习对接口的封装。网络请求封装是每个前端项目必不可少的一项，有利于方便统一管理，比如在请求头统一加上后台校验数据，这样就没必要在每个接口中都写一遍了嘛，这也是面向对象编程的一个好的提现。我们这次选用的是axios插件，这个插件优点还是蛮多的，支持promise，可以拦截请求和拦截响应，客户端支持防御XSRF攻击等等，那么我们就开始吧。一、安装axios老规
转载
2024-07-12 13:05:03
40阅读
介绍Room是Google提供的一个ORM库。Room提供了三个主要的组件：@Database：@Database用来注解类，并且注解的类必须是继承自RoomDatabase的抽象类。该类主要作用是创建数据库和创建Daos（data access objects，数据访问对象）。@Entity：@Entity用来注解实体类，@Database通过entities属性引用被@Entity注解的类，并
转载
2023-06-30 19:14:49
95阅读
有时间总结了下动态添加tab页的相关知识:非常鄙视那些引用我文章的网站和个人网站，引用了别人的东西还带商业广告！~在此谢绝转载 一。 首先得写个动态添加Tab页的JS操作文件，我想在网上应该能找到，喜欢自己可以写 二 。其次是 写个动态添加Tab页的样式CSS文件，控制TAB标签等样式 &
原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。封装一个封装组件提供 props 控制其行为而不是暴露其内部结构。耦合是决定组件之间依赖程度的系统特性。根据组件的依赖程度，可区分两种耦合
在后台管理系统中，开发人员面临最多的开发任务，table 数据管理应有一席之地。而随之而来的，就是数不清的筛选，排序操作。而且每个table，都会配置一个分页用来更好的显示数据。本文就从这个需求触发，来聊一聊时间组件和分页组件的二次封装。为什么要二次封装elementui 的各种组件做的很友好，但偶尔神经的产品就是不喜欢大众风格，非得独树一帜这时候，在每个有 table 的位置都去做一个繁琐的分页
转载
2024-09-19 16:43:55
249阅读
activiti对持久化层的初始化主要有几个步骤：1、初始化数据源。这个很好理解，就是配置好要连接的数据库；2、初始化mybatis的SqlSessionFactory。因为activiti使用mybatis作为持久化层，所以需要对mybatis进行相应的配置和初始化；3、封装增删查改操作，不让用户直接使用mybatis进行操作。主要通过sessionFactory和XXXEntityManage
最近参与了一个基于Raact技术栈的项目，距离我上一次在工作中react已经过去了挺长一段时间，因此打算整理在react中封装组件的一些方法。1、extends 正向继承对于类组件而言，可以通过extends继承某个父类，从而获得一些公共的能力class LogPage extends React.Component { trackLog() { console.log("tr
转载
2024-06-06 05:55:21
110阅读
本节实现一个点击左侧menu在右侧content切换页面效果，原始代码请从UMI学习-6开始看 1、在pages下添加两个组件，User,UserRole import React from 'react'; class User extends React.Component { render()
转载
2020-02-01 23:05:00
462阅读
2评论
写在前面更换电脑资料丢失，暂停学习组件封装，开始重新学习vue2和3，组件封装将在学习完后重新学习 由于是学习记录使用，存在不完善的地方，会在全部学习完之后进行完善和放出源代码（应该），感谢阅读步骤创建基础模板创建.vue文件，命名为apl-Dialog.vue，使用快捷键放上组件三件套（template,script,style) 为了实现对话框出现时的动画效果，给template外面包上一层t
转载
2024-09-12 13:58:52
96阅读
react-navigation 介绍随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。react-navigation的出现替代了Navigator、 Ex-Navig
大部分项目都需要一个菜单栏进行切换，所以学习了一下怎样
封装一个tabbar组件，这样以后使用的时候可以直接拿来使用。1.路由router首先是路由的设置，这个在之前的随笔中已经写过相关的使用方法。说一下使用tabbar，在标签栏下面点击切换页面的时候，跟随到不同的路径，就需要配置相关的router，根据不同的路径展示不同的页面。入口App中的div：<div id="app">
