文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

如何编写轻量级 CSS 框架

如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。...当然，好的 UI 设计也是框架成功的一部分。 模块划分 编写框架的第一步就是要确定框架应该包含哪些模块。因为是轻量级框架，所以模块肯定没有重量级框架那么全面，只有核心的一些组件。...通过比较一些轻量级框架以及工作总结，大致常用的模块包括栅格、媒体、按钮、排版、表单、表格、面板以及辅助工具。...在常用的这几个组件中，需要重点关注的是栅格、表单及面板，媒体组件也很重要，但是自由发挥的空间不大，我直接用了 Bootstrap 的媒体组件。 命名策略 首先是类命名的层次与结构。...在此说一下表单中 checkbox 的结构调整，先看一下 Bootstrap 的 checkbox 结构。 <!

2.5K100
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    微信小程序-如何获取用户表单控件中的值

    form 表单获取表单组件的值 这是最普遍通用的一种方法,所有用户输入的组件放置在form内,当点击form表单中form-type为submit的button组件时 它会将表单组件中的value值进行提交...,但此时需要在表单组件中加上name来作为key 如下 UI 所示: ?...form表单,获取表单中控件的值,是通过在switch,radio-group,checkbox-group,slider,input组件中添加name属性,从而通过button中的formType结合...,此方法不局限于form表单,比较灵活,先初始化表单,然后给表单组件绑定bindchange事件 当表单组件checked,或input发生改变时,就会触发change事件,然后通过事件对象就可以拿到表单组件的值...form结合button组合的方式,这种方式有局限性,所有的表单组件都需要在form内,通过在表单组件内设置name值的方式获取表单组件中的值(必须要设置,否则拿到表单组件的值就是`undefined`

    9.3K12

    React-组件-TaggedTemplateLiterals

    前言React-组件-TaggedTemplateLiterals是一项强大的React技术，它结合了React组件和模板文字标记。这种方法允许您在编写React组件时更灵活地处理模板文字字符串。...通常，React组件内的JSX用于渲染UI，但Tagged Template Literals使您能够在组件中定义带有占位符的模板文字，并通过标记函数处理它们。...这种方法的优势在于您可以将动态数据嵌入到模板文字中，同时保持React组件的可读性和可维护性。您可以使用Tagged Template Literals来构建更复杂的UI结构，使组件更具通用性。...总之，React-组件-TaggedTemplateLiterals是一种扩展React开发工具箱的方式，可以提高您的组件开发效率，并使您能够更轻松地处理动态内容和UI结构。...图片总结结论我们可以拿到模板字符串中所有的内容我们可以拿到模板字符串中所有非插入的内容我们可以拿到模板字符串中所有插入的内容所以我们就可以对模板字符串中所有的内容进行单独的处理图片最后本期结束咱们下次再见~ 关注我不迷路

    40221

    如何优雅的设置UI库组件的属性？

    UI库提供了很多组件，组件又带有很多属性，有一些常用属性我们可以记住并且手撸，但是有些不常用的属性，或者需要设置多个属性，这样的情况下写起来就麻烦了，有时候还要打开帮助文档看看属性是怎么设定的，需要设置什么样的属性值...js的对象和模板代码，支持 json 格式； 大部分属性值都可以通过鼠标点击的方式生成，少数的需要手敲； 工作量比较大、精力有限，目前仅支持 element-plus 的部分组件，理论上可以支持任何UI...库，只是设置属性有点太繁琐了，需要时间进行学习、掌握和理解，把相关属性合在一起，还有调试演示代码等工作。...小类原则 按照UI库提供的组件 按照功能，“原子”级别 按照值的类型，比如数组和非数组。...基础属性 表单里的组件共有的属性： 基本上表单里的组件都需要这几个属性，所以拿出来作为基础属性，一起设置。 扩展属性按照分类分别设置。

    2.4K10

    基于Ant Design Vue封装一个表单控件

    改一下组件内部代码即可，调用组件的代码并不需要修改。这样还怕升级了吗？ 可以跨UI，甚至跨框架。之前看了一下element，本来想用的，但是不支持vue3.0只好作罢。...element的使用方式也是大同小异，那么我基于element也封装一套组件，保证外部使用方式一致，那么是不是可以做到UI随便切换了呢？ 便于项目升级。...为啥还要折腾 首先antdv 是一个非常强大UI库，提供了很强大的功能和漂亮的UI，使用方面也是非常的灵活，不仅有Form表单，还有各种Data Entry组件，非常灵活。...表单 好了，准备工作都做好了，我们可以开始for循环了。 找了半天，antdv没有提供单纯的table，只好手动找class了，于是代码变成了这样。...为啥不直接用antdv提供的 Form 表单？ 这个嘛，思路不太一样。好吧，其实是官网的代码，在本地还没有调试成功，等研究明白了还是会用的。

    3.5K30

    Flet 教程！手把手教你打造应用程序登录页面

    本期就带你从 0 到 1 搭建可交互注册界面，零基础也能快速掌握跨平台 UI 开发。无需复杂前端知识，用熟悉的 Python 即可实现响应式表单！...一、表单组件全解析要打造登录页面，表单组件是基础。下面就来详细解析各个表单组件的用法。1. TextField 组件TextField 组件可帮我们创建输入框，像用户名和密码输入框都能用它。...Checkbox 组件Checkbox 组件能实现协议勾选功能，让用户勾选是否同意相关协议。...agree = ft.Checkbox(label="我同意相关协议")label 设置勾选框旁边的文字说明。3....事件处理函数不生效检查事件绑定是否正确，比如 on_click 是否正确绑定了对应的函数。另外，函数的参数是否正确，事件处理函数一般需要接收一个事件参数 e。3.

    48510

    框架究竟解决了啥问题？我们可以脱离它们吗？

    声明式编程 声明式编程是一种在不指定控制流的情况下定义逻辑的范例。我们描述的是结果需要是什么，而不是我们需要采取什么步骤。...`: null; } 列表渲染 还有一个比较常见的就是列表处理，它是 UI 里非常的关键部分，为了有效地工作，它们需要是响应式的，而不是在一个数据项发生变化时更新整个列表。...组合表单和响应式 通过组合表单的高性能选择器稳定性和 CSS 响应性，我们可以实现更复杂的 UI 逻辑： 组件样式的万能机制。 表单的优点 表单是内置在 Web 平台中的原生 API，大部分功能都是稳定的。...使用稳定的选择器会让 UI 自动化测试更简单：我们可以使用嵌套 API 作为一种稳定的方式来和 DOM 挂钩，而不用管它的布局和层次结构是怎么样的。

    9.1K30

    写表单你还在复制粘贴吗？推荐你使用基于Vant-UI二次封装的数据驱动式表单自动生成组件

    前言 在使用Vue写移动端开发的时候，难免会遇到需要写很多的表单，所以我在现在的项目里面集成了有赞的Vant-ui组件库，但是感觉Vant-ui对于表单组件的调用方式有点繁琐，实在不愿意去干这么一样的事情...，就封装了一个基于Vant-ui的数据驱动式表单自动生成组件。...具体怎么玩，我们下面一起来看看吧~ 正文 组件现在的状态 目前已经集成的组件如下： Address、Checkbox、DatePicker、Input、Radio、Select、Text、Switch、...字段名 说明 类型 默认值 v-model(value) 获取组件处理完成的数据 object {} model 数据模型(具体类型参考后续文档) object {} disabled 是否禁用表单...slot，用于替换当前行的表单组件，会为该slot传入该组件的原始数据，每个slot的name为当前行的key 注：该slot不继承所有校验规则 <template

    2.3K20

    React入门五：事件处理

    有状态组件和无状态组件 无状态组件：函数组件 有状态组件：类组件 状态（state）既数据 函数组件没有自己的状态，只负责数据展示（静） 类组件有自己的状态，负责更新UI，让页面 “动”...事件绑定this指向 5.1 箭头函数 利用箭头函数自身不绑定this的特点。...表单处理 6.1 受控组件 HTML中的表单元素是可输入的，也就是有自己的可变状态 而，React中的可变状态通常保存在state中，并且只能通过setState()方法来修改 React将state与表单元素值...value绑定到一起，由state的值来控制表单元素的值 受控组件：其值受到React控制的表单元素 步骤： 1....示例： 复选框(操作checked) checkbox" checked={this.state.check} onChange={this.handleChecked}> 多表单元素优化

    2.4K30

    产品必懂技术术语（前端类）

    组件和组件库 组件 单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。...1)可以排序的表格 2）可以展开的表格 3）自带搜索的表格 注：现在市面上看到的UI,一般都是经过组合封装的，UI主题样式一般跟公司、项目有关。所以目前最多的叫法是“组件”。...组件库 多个组件通过一定的方式封装起来，可以提供给多个项目使用的同一套代码组件，就叫组件库。多个项目使用一套组件库，不仅可以让类似项目保持相同的UI主题，还能避免开发重复造轮子，提高开发效率。...使用不同的js框架，代码的写法几乎不一样，对应的组件库也不一样。 react->ant design vue->element 所以如果想把项目换一种框架来写，成本是相当高的。...因为浏览器同时还规定，提交表单不受同源政策的限制。（注：以上例子来自阮一峰老师） ❞ 为了保证用户信息的安全，1995年开始，所有浏览器都遵循了“同源策略”。

    2.3K41

    JeecgBoot 3.5.1 版本发布，开源的企业级低代码平台

    JeecgBoot引领低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE)， 帮助解决Java项目70%的重复工作，让开发更多关注业务。...Expected Function, got Array... #4507所属部门树操作全部勾选不生效 #394微服务之间调用免Token方案的问题 #4683使用online表单开发，代码生成选择vue3...#4550在表单中使用v-model:value绑定JSelectDept组件时无法清除已选择的数据！...精美，针对常用组件做了封装：时间、行表格控件、截取显示控件、报表组件，编辑器等等查询过滤器：查询功能自动生成，后台动态拼SQL追加查询条件；支持多种匹配方式（全匹配/模糊查询/包含查询/不匹配查询）；数据权限...、数字校验、金额校验、时间空间等);提供单点登录CAS集成方案，项目中已经提供完善的对接代码表单设计器，支持用户自定义表单布局，支持单表，一对多表单、支持select、radio、checkbox、textarea

    1.5K10

    从后端到前端之Vue（六）表单组件 HTML5原生的表单和表单元素Vue组件的基础知识表单元素组件辅助工具开源

    组件的特点和优势 　　我们为啥要做表单组件呢？首先要看看组件的优势了，优势都有哪些呢？封装和复用、切换表单元素的形式、适配各种UI。 复用和封装 　　等等，原生的表单元素不是也可以复用吗？...当然不是翻来覆去的手敲，而是做成组件！ 　　比如：复选改单选，单选改下拉列表框。通过表单元素组件，改一下就可搞定。 适配器 　　现在vue有好多好多UI组件，用哪个好呢？...现在我们可以基于原生html封装一个表单控件，那么以后呢？是不是可以针对其他UI组件封装一个表单元素控件呢？然后只要能够保证接口不变，那么我们依赖这个组件写的代码就不需要改变。 　　...最终要实现——换UI就换UI，不影响业务逻辑的代码。 　　现在看看写表单组件是不是很有必要了呢？ 组件的双向绑定 　　对于表单元素，还有一个需要注意的地方，那就是数据的双向绑定！...选择类的表单元素组件 　　选择类指的是多选组（checkbox）、单选组（radio）、复选框（checkbox）以及下拉列表框。

    5.8K10

    jeecg一个开源的java开发脚手架

    activiti，并实现了只需在页面配置流程转向，可极大的简化jbpm工作流的开发；用jbpm的流程设计器画出了流程走向，一个工作流基本就完成了，只需写很少量的java代码； 8.UI标签库，...,表单挂靠,业务流转 10.查询过滤器：查询功能自动生成，后台动态拼SQL追加查询条件；支持多种匹配方式（全匹配/模糊查询/包含查询/不匹配查询）； 11.多数据源：及其简易的使用方式...，支持用户自定义表单布局，支持单表，一对多表单、支持select、radio、checkbox、textarea、date、popup、列表、宏等控件 JEECG 适用范围 JEECG智能开发平台...UI标签实现功能：数据datagrid,表单校验,Popup,Tab等，实现JSP页面零JS，开发维护非常高效 技术点四：在线流程定义，采用开源Activiti流程引擎，实现在线画流程,自定义表单...,表单挂接,业务流转，流程监控，流程跟踪，流程委托等 技术点五：自定义表单,支持用户自定义表单布局，支持单表、列表、Select\Radio\Checkbox\PopUP\Date等特殊控件

    77730

    OneCode3.0-RAD 可视化设计器 配置手册

    conf.js 中为各类组件定义了属性模板，包括列表组件、表单组件、容器组件等。...}4. conf_widgets.js - UI组件配置conf_widgets.js 定义了设计器左侧工具箱中的组件结构、分类和初始属性。...4.1 组件分类结构组件按照功能和类型进行分组，常见的分类包括：布局组件表单组件列表组件导航组件移动组件聚合模块4.2 组件定义格式每个组件定义包含以下核心属性：属性类型说明idString组件唯一标识符...组件初始属性4.3 常见组件配置示例4.3.1 移动导航组件{ id: 'xui.UI.MTabs', key: 'xui.UI.MTabs', comment: '移动TAB导航',...caption": "item 2", "id": "b", "imageClass": "xui-icon-number2"} ], value: 'a' }}4.3.2 表单布局组件

    24610

    Material-UI 从零开始掌握React组件库的设计精髓

    有这么几个原因：组件丰富度 - 从基础的按钮、表单到复杂的数据表格、导航栏，应有尽有高度可定制 - 不喜欢默认样式？没问题！...Material-UI提供了强大的主题定制能力响应式设计 - 组件天生支持各种屏幕尺寸，省去了大量适配工作活跃的社区 - 遇到问题时，很容易找到解决方案无障碍性 - 组件默认支持键盘导航和屏幕阅读器我曾经尝试过几个不同的...setDrawerOpen] = useState(false);return ( setDrawerOpen(true)} > 我的应用 );}```表单组件...Material-UI的表单组件不仅美观，而且自带状态管理和验证功能：```jsximport { useState } from 'react';import TextField from '@mui...按需导入组件不要从整个库导入，而是导入具体组件：```jsx// 不推荐 - 导入整个库import { Button, TextField } from '@mui/material';// 推荐 -

    37710

    Chakra UI React组件库入门指南

    与其他UI库相比，Chakra UI有几个突出特点：简单易用：API设计直观，学习曲线平缓可定制性强：主题系统允许你轻松自定义组件外观响应式设计：内置的响应式工具使移动适配变得超简单黑暗模式支持：无需额外工作即可实现明暗主题切换可访问性...但最让我心动的还是它的开发体验 —— 用了Chakra后，我的开发效率至少提升了30%（不夸张！）。安装与设置好了，如果你已经迫不及待想尝试Chakra UI了，那就跟我一起来设置吧！...Button：按钮组件，支持多种变体和大小Input：文本输入框Select：下拉选择框Checkbox：复选框RadioGroup/Radio：单选框组jsx组件不会因为customProp的变化而重新渲染样式```实战案例：构建一个登录表单让我们用Chakra UI构建一个完整的登录表单...、表单验证、加载状态和提交反馈。

    37310

    AI + 低代码 技术解密（八）：UI 组件库

    该库包括表单控件、数据网格、对话框、布局组件和专用交互式元素，旨在在 VTJ 生态系统中无缝工作。有关如何将这些组件集成到可视化设计器中的信息，请参阅设计器和渲染器 。...有关图表特定组件的详细信息，请参阅图表和可视化 。包体系结构​UI 组件库组织为一个模块化系统，其中组件可以独立工作或相互集成以创建复杂的用户界面。...UI 组件包结构核心组件类别​表单和输入组件​该库提供了一组丰富的表单组件，这些组件使用 VTJ 特定的功能扩展了 Element Plus。...与 UI 组件的网格集成对话框和模态组件​XDialog 组件提供了整个 UI 库中使用的模态基础，具有一致的样式和行为模式。...每个组件都有相应的材质描述，用于定义其属性、事件和配置选项。组件材料结构Material System 允许从组件调色板中拖动组件，并在设计器中直观地进行配置。

    22900
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券