- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
前端组件库_前端组件库有什么好处
前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A package manager underscore.js Way.js – 双向数据绑定库 Keys.js – 应用快捷键 3. Quintus 4. ui组件库 GMU NEC NEJ Pure CSS Components magic-of-css 5. Transit – CSS transitions and transformations for jQuery Move.js – 简化CSS3动画的JS库 ScrollMe – 在网页中加入各种滚动动画效果
7.7K10编辑于 2022-09-20 - 来自专栏白菜博客
web前端UI组件库框架
前端UI组件框架使用规则 高效使用组件库框架 一找 找到需要使用的组件库。 原生：LayUI Vue：ElementUI React：Ant Design 移动端/小程序：VantUI 二开 打开组件库的官网文档，优先看【快速开始/开始使用】 三引 引入组件库 CDN (推荐) 下载本地代码包 包管理器(npm/yarn) 四选 根据你的小程序(网页)布局/动效等需要,选择组件. 五看 针对一个组件,仔细阅读文档,千万不要看到能用就立马拿起扳手打螺丝. 六粘 粘贴组件代码到网页文件(项目)中 七改 建议参照文档,根据实际需要修改代码. 比如内容,样式和行为.
1K20编辑于 2022-03-02 - 来自专栏全栈学习
前端反卷计划-组件库-03-组件样式
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。 在接下来的日子，我会持续分享前端反卷计划中的每个知识点。 以下是前端反卷计划的内容： 目前这些内容持续更新到了我的 学习文档 中。 create-react-app创建的项目，但是create-react-app不支持scss，需要安装node-sass解决 pnpm install node-sass --save 因为我们做的是组件库 ，比如像antd design组件库是蓝色样式，所以我们做的组件库也需要设置色彩系统的样式，因为我们使用的是scss，所以我们可以将这些系统的样式颜色通过变量来定义，方便复用。 /(background|color)$/i, date: /Date$/, }, }, }, }; export default preview; 系列篇 前端反卷计划 -组件库-01-环境搭建 前端反卷计划-组件库-02-storybook
47070编辑于 2023-11-16 - 来自专栏大数据
前端框架与库 - Material-UI组件库
Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。 Material-UI简介 Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。 2. 常见问题与易错点 2.1 忽略版本兼容性 Material-UI 的版本更新频繁，新版本可能引入了 API 变更或移除了旧组件。 3. 如何避免 3.1 检查版本兼容性 在升级 Material-UI 或 React 之前，务必查阅官方文档，确认版本间的兼容性。 通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。
2K10编辑于 2024-07-21 - 来自专栏Web前端
前端框架与库 - Material-UI组件库
Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。 Material-UI简介Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。2. 常见问题与易错点2.1 忽略版本兼容性Material-UI 的版本更新频繁，新版本可能引入了 API 变更或移除了旧组件。 3. 如何避免3.1 检查版本兼容性在升级 Material-UI 或 React 之前，务必查阅官方文档，确认版本间的兼容性。 通过以上介绍和示例，我们可以看到 Material-UI 在简化前端开发流程的同时，也带来了一些需要注意的问题。
1.6K00编辑于 2024-07-20 - 来自专栏运维博客
Element Plus前端组件库
Element Plus前端组件库 大纲 Element Plus基本使用 容器布局 导航栏 字体图标 栅格布局 卡片 表单 数据表格 反馈提示 Element Plus基本使用 Element-UI 是基于 Vue 开发的一套UI组件库，提供丰富网页开发的组件，可快速开发网站，降低前端开发成本。 目前Element UI有两个版本： Element-UI：基于Vue2 Element-Plus：基于Vue3 官网文档：https://element-plus.org/zh-CN/component /button.html 其他参考文档：https://www.w3cschool.cn/vue_elementplus/ElementPlusButton.html Vue项目使用ElementPlus 在vue项目main.js中引入element-plus组件以及css文件 import { createApp } from 'vue' import App from '.
6.3K31编辑于 2023-04-24 - 来自专栏Java基础
前端组件库Element UI 的使用
此处可查阅运行教程） 注意：以上均在 Win10环境下进行，浏览器为：Microsoft Edge，Vue：2.x 二、Element UI 介绍 Element UI 是一个基于 Vue 2.0 的桌面端组件库 它提供一套丰富的组件和工具，能够帮助开发者快速构建高质量的 Vue 应用。Element UI 由饿了么前端团队开发，并开放源代码。 三、快速入门使用 3-1 安装Element UI组件 1.确保当前项目已经停止，在此页面按下CTRL + C，然后输入y，回车后项目就停止了 2.使用npm在当前项目安装Element UI组件，右键当前项目 查看项目结构，Element UI组件都被安装在node_modules下，至此Element UI安装成功 3-2 引入Element UI组件库 1.打开main.js，添加下面红色内容内容至红色方框 ，所以我们在这里先搭好框架 3-3 访问官网，复制组件代码进行调整 官网：组件 | Element 1.这里以按钮为示例，进入官网后，可以看到各种各样的按钮 2.看到合适的按钮之后，可以直接复制其代码，
84010编辑于 2025-08-28 - 来自专栏全栈学习
前端反卷计划-组件库-06-Icon组件开发
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：目前这些内容持续更新到了我的 学习文档 中。 1.安装fortawesomeicon组件的开发借助第三方开源库：fortawesome 1.安装fortawesome第三方库 npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save2.新建Icon目录2.新建Icon目录，同其他组件 3 ，看下效果<Icon icon='coffee' theme="danger" size="10x" />将theme换成primary看下效果 系列篇前端反卷计划-组件库-01-环境搭建前端反卷计划 -组件库-02-storybook前端反卷计划-组件库-03-组件样式前端反卷计划-组件库-04-Button组件开发# 前端反卷计划-组件库-05-Menu组件开发持续更新目前这些内容持续更新到了我的
50010编辑于 2023-11-27 - 来自专栏全栈学习
前端反卷计划-组件库-05-Menu组件开发
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：目前这些内容持续更新到了我的 学习文档 中。 { handleMouse(e, false); }, } : {};目前效果：水平菜单：1.默认是隐藏的2.当鼠标移动上去后，显示菜单3. 当鼠标移出后，隐藏菜单垂直菜单：1.默认菜单是隐藏的2.当点击的时候，显示出来3.当再次点击的时候，隐藏菜单5.5.12 将index改造成树形结构submenu和menuitem目前都是通过index 修改menu组件的index的类型// 首先修改menu组件的defaultIndex的类型，由数字改成字符串export interface MenuProps { defaultIndex? -组件库-01-环境搭建前端反卷计划-组件库-02-storybook前端反卷计划-组件库-03-组件样式前端反卷计划-组件库-04-Button组件开发持续更新目前这些内容持续更新到了我的 学习文档
49910编辑于 2023-11-27 - 来自专栏全栈学习
前端反卷计划-组件库-04-Button组件开发
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：目前这些内容持续更新到了我的 学习文档 中。 Button4.1 需求分析以antd design的Button组件为例按钮类型按钮尺寸不可用状态4.2 Demo<Button size='large' type='primary' disabled toBeInTheDocument() expect(element).toHaveClass('btn-primary btn-lg klass') })测试结果：4.5.3 测试3: fireEvent.click(element) expect(disabledProps.onClick).not.toHaveBeenCalled() })})系列篇前端反卷计划 -组件库-01-环境搭建前端反卷计划-组件库-02-storybook前端反卷计划-组件库-03-组件样式持续更新目前这些内容持续更新到了我的 学习文档 中。
74510编辑于 2023-11-27 - 来自专栏开源小分队
这几个前端组件库有点厉害！
今天给大家推荐几款的后台管理系统开箱即用的组件库，基于ElementUI二次封装，开发必备 Headless UI Headless UI 是一款出色的前端组件库，专为与 Tailwind CSS 集成而设计 ，简化一些繁琐的操作，主要的组件库针对table表格和form表单场景，同时内置了丰富了数据展示组件，让开发变得更加容易。 x的中后台业务组件库. 组件库使用全新的 组合式 API 编写，并尽可能采用 Hooks 编写代码逻辑，全量的 TypeScript 和 TSX。 特点 10+ 高质量的开箱即用 Vue 3 组件 遵循直觉的、简约的 Api 设计 自由配置的属性默认值，快速完成全局/局部修改 ⚡ 组合式 Api，良好的性能基础 TypeScript 和 TSX
75110编辑于 2024-09-25 ZUI：组合式前端 UI 组件库
ZUI 3 是一个开源的前端 UI 组件库，它为开发者提供了一套现代化、无依赖、高度可定制、功能丰富的界面组件，旨在帮助开发者高效地构建美观、响应式的网页应用。 ZUI 3 提供了更全面的 CSS 工具类和组件，以及基于现代标准重写的 JS 组件。部分组件预览：普通模式使用：<! 实用的 CSS 组件：ZUI 3 提供了众多实用的 CSS 组件，如按钮、表单、导航栏、卡片和表格等，这些组件无需 JavaScript 即可工作。 强大的 JS 组件：对于需要交互功能的组件，如下拉菜单、对话框和数据表格，ZUI 3 提供了基于 Preact 的 JavaScript 实现，确保了组件的性能和可靠性。 灵活的使用方式：开发者可以根据需要选择单独引入某个组件，或者引入整个库。支持通过 ESM 导入，也支持在浏览器中直接引用。
70610编辑于 2024-10-17TextIn OCR Frontend前端开源组件库发布！
为什么开源 TextIn OCR Frontend 前端组件库？ 在 TextIn 社群中，我们时常接到用户反馈，调取 API 进行票据等文件批量识别后，需要另行完成前端工程，实现比对环节。 为助力用户节省工程成本，TextIn 团队正式开源 OCR Frontend 前端组件库，便于用户搭建前端界面，完成识别结果审核，提升使用体验。 此外，对于有翻译、校对等需求的开发者，也可灵活应用开源组件库，进行二次开发。 组件库适配票据类解析结果（key-value）的展示，前端界面案例见下图。 ResultView 结果展示组件结果展示组件，支持表格和列表两种展示方式。 Props3. MarkLayer 标注层组件标注层组件，用于在图片显示标注框。 Props4.
42710编辑于 2025-06-03- ); } ReactDOM.render(<App />, document.getElementById('root')); 3. State(状态) State 是组件内部的状态，它可以在组件生命周期中改变，从而触发组件的重新渲染。与 Props 不同，State 是可变的，通常用于存储组件的动态数据。来自专栏大数据
前端框架与库 - React基础：组件、Props、State
React 是一个用于构建用户界面的 JavaScript 库，特别擅长创建可复用的组件。掌握组件、Props 和 State 的概念是学习 React 的基石。 组件(Component) 组件是 React 中的基本构建单元，可以理解为 UI 的独立部分，每个组件负责渲染页面的一部分。 Props(属性) Props 是传递给组件的参数，类似于函数的参数。它们是只读的，不能在组件内部被修改。Props 使得组件之间能够传递数据，增加了组件的复用性。 /> {/* 使用默认 Props */}
28910编辑于 2024-07-13
想做前端开发？推荐几个必备珍品组件库
前端是一个一直在发展的名词，从最初刀耕火种时代的页面仔到文艺复兴时期的前端工程化再到如今新时代的大前端，前端技术在某种程度上似乎可以为所欲为了。但是我们这次讨论的是前端技术中的一部分—组件库。 维护团队：蚂蚁金服体验技术部 ant-design 是我经常使用的组件库之一，蚂蚁开源，大牛维护，4W 多的 Star 让这款组件库成为国内使用率较高的 React 组件库。 但是细看这套组件库的灵魂是维护团队提出了一个设计语言的概念，也就是说组件库的所有交互样式都是遵循这套设计语实现的，14px 的主字体，类别的对齐，简洁直接的设计风格都决定了这套组件库在用户体验上的亮眼。 组件数量上基本覆盖了中台日常需要使用的组件 代码层面：文件结构清晰，组件的定义简洁明了，适合学习 生态：mint-ui[3] (Mobile UI elements for Vue.js) element-angular https://element.eleme.cn/2.5/#/zh-CN/guide/design [3] mint-ui: https://github.com/ElemeFE/mint-ui [4]
前端基建处理之组件库优化方案
前端基建开发一直被认为是前端开发中的 “高阶技能”。而内部组件库的开发则算是基建中比较“容易”入手的一个方向。所以咱们今天就利用这篇文章，来看一看 组件库开发 的优化方案。 公共组件库。 公共组件的运行依赖于宿主，要求引入frontend-common的项目(宿主)本身要安装依赖的包，否则无法运行，例如公共组件依赖element这个库，所以引入公共组件的项目也要求要安装element才可以运行 组件会依赖一些UI库的组件，比如笔者用到的element ui，在storybook中需要引入这些element的组件，这里我们在.storybook/preview.js中引入element，参考如下 笔者部署完的大概样子如下： 总结 当前这版优化对现有的组件库做了一次大的调整，本身不涉及具体组件的改动，只是规范和优化整个流程，方便前端开发接入和使用等，但是还存在不少的优化空间，比如以submodule
前端框架与库 - Angular基础：组件、模板、服务
Angular 是一款由 Google 维护的流行前端框架，用于构建动态的 Web 应用。它基于 TypeScript，提供了丰富的功能，包括组件化架构、数据绑定、依赖注入等。 本文将深入浅出地介绍 Angular 中的组件、模板和服务，探讨常见问题、易错点及如何避免，并通过代码示例加深理解。 组件 组件是 Angular 的核心构建块，每个应用都是由多个组件组成的。 组件包括三个主要部分：类、模板和样式。 类：定义组件的行为逻辑。 模板：定义组件的视图结构，即用户界面。 样式：定义组件的外观。 }) export class DataService { constructor() { } getData() { return ['item1', 'item2', 'item3' 直接访问其他组件的属性或方法是错误的实践。
前端框架与库 - React基础：组件、Props、State
React 是一个用于构建用户界面的 JavaScript 库，特别擅长创建可复用的组件。掌握组件、Props 和 State 的概念是学习 React 的基石。 组件(Component)组件是 React 中的基本构建单元，可以理解为 UI 的独立部分，每个组件负责渲染页面的一部分。 Props(属性)Props 是传递给组件的参数，类似于函数的参数。它们是只读的，不能在组件内部被修改。Props 使得组件之间能够传递数据，增加了组件的复用性。 Avatar /> {/* 使用默认 Props */}
从零开始，手摸手搭建前端组件库
MI-vant组件库 打造一个内部的组件库，在我们进行代码的重构，以及开发新的功能的时候，抽离公共的组件，减少代码的复用，注重业务与组件的分离，简化耦合度，便于开发与维护。 是前端走向未来语法的一大步，改造为babel7 的时候，遇到了很多难以解决的问题。但是最终还是坚持下来了。 readme文档改造为组件的使用文档类似于目前知名组件库如 antd，element-ui，vant等支持代码库高亮显示，组件动态展示等效果,简而言之一句话： 能够在md中运行代码。 让我们的组件库看起来不那么low?.......... 由于之前没有接触过类似的功能，于是漫漫的调研之路开始了。。。。 var.less'; html { font-size: 100px; /* no */ } h1{ font-size: 32px; } h2{ font-size: 24px; } h3{
开源项目介绍｜TDesign - 前端通用 UI 组件库
滑至文末报名参与开源人才培养计划 提交 TDesign 项目Proposal TDesign 项目介绍 TDesign 是腾讯第一个对外开源的企业级设计体系，基于腾讯海量业务沉淀，为 PC、Mobile、小程序等平台提供丰富组件库 ，通过统一组件 API 接口为上层业务开发提供跨平台和跨端的同构方案，内部已服务 300+业务。 在设计侧TDesign提供涵盖中后台、移动端的组件资源包，汇集200+的业务操作的图标、特殊的数字字体、由浅入深的设计指南、工具等满足不同角色、不同阶段的设计师需求。 在这里你可以学习到如何设计和封装前端 UI 组件库，如何在不同技术栈下保证同个组件实现一致。 预备知识： Vue/React/Angular 技术栈 预期结果： 1.初级：兼容 Vue/React 的跨技术栈复用方案 2.中级：兼容 Vue/React/Angular 的跨技术栈复用方案 3.
