- 综合排序
- 最热优先
- 最新优先
- 来自专栏深度学习与python
6个常用的React组件库
important 以防止它样式化你的非 Ant 组件）。 Bootstrap ? 其实我主要把 Bootstrap 看作是一个 UI 库。 Semantic-UI/issues/6413 社区运行的 fork： https://github.com/fomantic/Fomantic-UI 荣誉奖 Reach UI ReachUI 是一个底层组件库 没有可用的包大小，因为每个组件都单独导出为自己的 npm 包。 Reakit Reakit 是另一个底层组件库。从技术上讲它是一个 UI 库，但不附带 CSS。因此你仍然需要找到一种样式解决方案。 它是一个功能强大的组件库，没有自带主题，但可以轻松改变主题。关于它的实践示例，请参见其演示。 我还特意省略了 CSS-in-JS（如 styled-components 和 Emotion）以及实用工具 CSS 系统（如 Tailwind），因为它们不是明确的“React 组件库”，而是用来制作组件的工具
2.6K10发布于 2020-09-14 - 来自专栏运维博客
6. Element Plus前端组件库
Element Plus前端组件库 大纲 Element Plus基本使用 容器布局 导航栏 字体图标 栅格布局 卡片 表单 数据表格 反馈提示 Element Plus基本使用 Element-UI 是基于 Vue 开发的一套UI组件库，提供丰富网页开发的组件，可快速开发网站，降低前端开发成本。 cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false }) 6、 style> 5、项目运行结果 导航栏 导航栏基础 官方文档： https://element-plus.gitee.io/zh-CN/component/menu.html#%E4%BE%A7%E6% template> <script> export default { name: "B" } </script> <style scoped> </style> 6、
6.3K31编辑于 2023-04-24 - 来自专栏全栈程序员必看
前端组件库_前端组件库有什么好处
underscore.js Way.js – 双向数据绑定库 Keys.js – 应用快捷键 3. Egret Engine LimeJS EaselJS three.js AlloyStick The-Best-JS-Game-Framework CanvasEngine Quintus 4. ui组件库 基础模版 HTML5 BOILERPLATE Modernizr Normalize.css Responsive – 响应式布局 6. 通知组件/弹框组件 alertify.js AlertifyJS SweetAlert Messenger – 非常酷的弹框组件 PNotify Notify.js – A simple, versatile html2canvas – 实现纯JS网页截图 jquery.qrcode.js – 生成二维码的 jQuery 插件 FocusPoint.js 实现图片的响应式裁剪 DD_belatedPNG.js – 让IE6支持透明
7.7K10编辑于 2022-09-20 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.6K20发布于 2020-01-21 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.2K10发布于 2018-10-19 - 来自专栏狮乐园
高级 Vue 组件模式 (6)
06 通过 Directive 增强组件内容 目标 之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle 我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素，这个组件或者元素，可以根据当前 toggle 组件的开关状态，动态地更新它本身的 aria-expanded 属性，以便针对无障碍访问提供适配 ，能否直接在指令中获取当前所绑定的组件实例呢？ 成果 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-6 总结 关于指令的概念，我自身还是在 angularjs 中第一次见到，当时其实不兴组件化开发这个概念 但仔细想想的话，web 开发流程中，并不是所有的场景都可以拿组件来抽象和描述的，比如说，你想提供一个类似高亮边框的公用功能，到底如何来按组件化的思想抽象它呢？这时候使用指令往往是一个很好的切入点。
75220发布于 2020-01-21 - 来自专栏学习/读书笔记
《Flutter》-- 6.高级组件
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。 6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。 只需将Scrollbar组件作为可滚动组件的父组件使用即可。 ，组件树的子组件可以通过发送通知来与父组件进行通信，父组件则可以通过NotificationListener组件来监听自己关注的通知，这种跨组件的通信方式通常被称为事件冒泡。 Canvas canvas, Size size) { double wheelSize = min(size.width, size.height) / 2; double nbElem = 6;
12.6K20编辑于 2022-04-07 - <script type="module"> import { createApp } from 'vue' // 引入 @opentiny/vue 组件 tiny-button> <tiny-alert description="TinyVue"></tiny-alert> ` }) // 注册 @opentiny/vue 组件来自专栏快乐阿超
TinyVue组件库
——董仲舒 文档： TinyVue：一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端 代码： https://github.com/opentiny/ tiny-vue 在项目的根目录中，打开控制台，执行以下命令，为 Vue 3.0 的项目安装 TinyVue 组件库 ： yarn add @opentiny/vue@3 # 或者 npm install @opentiny/vue@3 或者执行以下命令，为 Vue 2.0 的项目安装 TinyVue 组件库 ： yarn add @opentiny/vue@2 # 或者 npm install @opentiny id="app">
40810编辑于 2024-08-23
Flutter lesson 6: Flutter组件之基础组件（二）
Row Row这个Widget其实就是一个布局组件，类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列，可以用来做走马灯轮播等效果。 FadeInImage.assetNetwork( placeholder: 'images/logo.png', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy Text Text Widget用的是非常多的一个组件，要显示文字就需要用到这个组件。使用也是很简单的。
漫谈 React 组件库开发（二）：组件库最佳实践
那么现在就面临一个选择： 一是选择 React 生态中已有的组件库，例如 antDesign、Material-UI 等比较成熟的组件库； 二是团队再开发一套属于自己的组件库。 React 大环境里面有很多优秀的 UI 组件库，国内比较有名的 antDesign，国外的 Material-UI，都是比较稳定和优秀的组件库。那么我们为什么还要自己去开发一套组件库呢？ 二、组件库构成 构建一个完整的组件库需要考虑： 组件设计思路 组件代码规范 组件开发流程 组件测试 组件维护（包括 PR / issue 管理、发包、文档） 1. felint 为你的项目做以下三件事： 初始化 eslint/stylelint 配置文件，无论是 react 项目、vue 项目、es5 还是 es6 都提供了针对性的配置方案 安装 eslint/stylelint 组件文档 一份好的 doc 是一个优秀组件库的标准，良好的文档能够提升组件库的整体品质和好感度，愿意花时间好好写 doc 的团队，那么他们产出的组件库应该也不会差到哪去，组件库文档维护也是组件库生命周期里重要的一环
Web组件库 JS组件方法记录
以折叠面板的形式进行组件描述，点击对应的面板会展示对应信息。
组件库设计实战 - 复杂组件设计
作者：诚身 https://zhuanlan.zhihu.com/p/29034015 一个成熟的组件库通常都由数十个常用的 UI 组件构成，这其中既有按钮（Button），输入框（Input）等基础组件 这里我们提出一个组件复杂度的概念，一个组件复杂度的主要来源就是其自身的状态，即组件自身需要维护多少个不依赖于外部输入的状态。 至此，组件库设计实战系列文章也将告一段落。 在全部四篇文章中，我们分别讨论了组件库架构，组件分类，文档组织，国际化以及复杂组件设计这几个核心的话题，因笔者能力所限，其中自然有许多不足之处，烦请各位谅解。 组件库作为提升前端团队工作效率的重中之重，花再多时间去研究它都不为过。再加上与设计团队对接，形成设计语言，与后端团队对接，统一数据结构，组件库也可以说是前端工程师在拓展自身工作领域上的必经之路。
vue常用组件库_vue内置组件
的web UI工具套件 Vux：基于Vue和WeUI的组件库 mint-ui：Vue 2的移动UI元素 iview：基于 Vuejs 的开源 UI 组件库 Keen-UI：轻量级的基本UI组件合集 rubik：基于Vuejs2的开源 UI 组件库 VueStar：带星星动画的vue点赞按钮 vue-mugen-scroll：无限滚动组件 mint-loadmore：VueJS的双向下拉刷新组件 vue-morris：Vuejs组件封装Morrisjs库 we-vue：Vue2及weui1开发的组件 vue-image-clip：基于vue的图像剪辑组件 vue-bootstrap-table ：iOS7+ 风格的alertview服务 dd-vue-component：订单来了的公共组件库 paco-ui-vue：PACOUI的vue组件 vue-cmap：Vue China map可视化组件 vue-slide – vue轻量级滑动组件 vue-slider – vue 滑动组件 vue-m-carousel – vue 移动端轮播组件 dd-vue-component – 订单来了的公共组件库
6. vue组件详解(一)
组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 我们可以将每一个部分设计为一个组件. 然后将三个组件组成一个页面. 每一个组件又是由多个小组件构成的. 组件可以让模块可复用性提高. 是一种提倡的用法 一. 组件的基本使用 构建一个组件分为三个部分: 定义组件 注册组件 使用组件 下面, 我们就从这三个部分来定义一个组件 1. 全局组件 组件有全局组件和局部组件的概念, 如果将一个组件定义在外部就是全局组件 // 定义一个组件 const myComp = Vue.extend({ template 局部组件, 哪里注册, 哪里调用 三. 父组件和子组件 ? 像这种有嵌套关系的组件, 就是父子组件. 那么父组件和子组件如何定义呢?
flutter组件6【AppBar的使用】
1.图示 2.解释 AppBar 有以下常用属性： leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。 title → Wi
ES6+ 开发 React 组件
类 迄今为止，最能体现我们使用 ES6+ 来编写 React 组件的就是我们选择使用类定义语法。 替代了使用 React.createClass 方法来定义一个组件，我们可以定义一个 bonafide ES6 类来扩展 React.Component： 1 2 3 4 5 class Photo extends 这些，在组件的初始化状态也是一样的，可以使用 ES7 property initializers 定义： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Arrow 函数 React.createClass 方法用来在你的组件实例方法中执行一些额外的绑定工作，为了确保 this 关键字会指向组件实例： 1 2 3 4 5 6 7 // Autobinding ，我们可能想把大部分父组件的 props 传递给子组件，但不是所有。
移动端组件库
今天给大家推荐的是一个滴滴开源的移动端开发组件库：Pile.js。 Pile.js 是滴滴开发的基于 React 的移动端开发组件库。 轻量，易用，包含 52 个交互功能，支持多语言与自定义皮肤。 第二步：引用组件代码： ? 组件列表 ? 具体演示效果，可以扫描下方二维码，体验： ? 开源项目地址
组件库构建过程
最近在项目内部创建了一个vue组件库，希望通过组件库的形式，统一项目中组件的逻辑和样式，让代码的复用性更强。 这篇文章主要是梳理组件库的整个结构和构建过程。 结构 首先在这里介绍一下组件库的代码结构，上面是整体代码目录结构，每个目录的作用如下： packages：组件源码位置，每个组件作为一个子目录；同时提供packages/index.js作为全局组件的入口 同时，在packages根目录，index.js作为全局注册组件入口，会引入所有组件，然后调用Vue.component注册为全局组件。 ok，目录结构梳理清楚，但这也只是开发过程的一部分，至于最终的输出内容，还需要基于具体使用场景来编译，下面是目前组件库支持的使用方式和具体的编译方法。 webpack模块化原理-commonjs、webpack模块化原理-ES module、webpack模块化原理-Code Splitting），而通常作为按需加载来说，用户会有自己的webpack，那么组件库需要做的就是把
组件库使用BEM
bem的优势 最近在开发一个组件库，选择了BEM作为css的组织形式，主要考虑了以下三个方面的优势： 逻辑分层，容易理解。 BEM基于block、element、modify的组织形式，基本与组件的组织形式吻合。只要遵循了BEM的命名方式，对于开发和修改组件，哪些元素和状态已经存在，都可以直观的看出来。 反过来，通过html标记的BEM命名，可以直观地理解组件的功能和依赖关系。 强约束，便于团队协作。
web组件库lion
github： https://github.com/ing-bank/lion 官方文档： https://lion-web.netlify.app/ Lion 是一组高性能、可访问且灵活的 Web 组件 它们提供了一个无主见的白标签层，可以扩展到您自己的组件层 高性能：专注于在所有相关浏览器中实现出色的性能，具有最少的依赖项 可及性：旨在符合 WCAG 2.2 AA 标准，以创建每个人都可以使用的组件 灵活性：通过 Web Components 和 JavaScript 类提供解决方案，这些类可以使用、采用和扩展以满足所有需求 现代代码：Lion 以纯 es 模块的形式分发 公开函数/类和 Web 组件 这是有道理的，因为主要用例是扩展这些组件，如果您这样做，则不想覆盖现有样式。 => response.json()) .then(data => { // do something with the data }); </script> 使用web组件
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号