Bootstrap已经是公认的主流CSS框架了，我们还需要了解其他的CSS框架么？...Material Design(原质化设计) 由 Google 创建和设计，Material Design 是一种设计语言，结合成功设计的经典原理以及创新和技术。...实际的效果 虽前面讲的可能复杂了，抛开文字看看效果，这就是Material Design的效果 materializecss代码举例 举个多选的例子吧 这里就只贴一下那个多选框需要的代码 它实现的机制和...Bootstrap的js组件一样（单从这个多选框它更像select2），需要引入一个JS，然后自动绑定这个类的select，隐藏它并创建假的更好看的一组标签来实现用户交互功能，在用户交互之后更新这个select...并没有很神奇的高科技，甚至可以说使用JQuery操作Dom有点过时，但这并不能掩盖它的优点，更好看，更好的交互体验。
Material Design for Bootstrap (MDB) ?...Material Design for Bootstrap MDB 建立在 Bootstrap 之上，并提供了开箱即用的材料设计外观。...它具有出色的 CSS 库，并且与大多数流行的 JavaScript 框架（如 jQuery、Angular、React 和。Vue.js）兼容。其核心库是完全免费使用的。...Material Design Lite Framework (MDL) ?...material design light framework Google 的 Material Design Lite 框架是最流行的 CSS 框架之一，可为你的网站添加 Material Design
Materialize Google 的 Material Design 的粉丝肯定喜欢 Materialise。该框架基于流行的设计语言，包括大量基于 CSS 和 JavaScript 的元素。...它聚焦于微交互，以使用户界面更加友好。值得注意的是，Materialise 还支持自定义主题。 官网：https://materializecss.com/ Pure.css ?...Pure.css Pure.css在压缩后仅为3.8KB，以移动优的先理念为中心。它是模块化的，所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。...Foundation 也有自己的 JavaScript 插件API。最后，该框架附带了ARIA属性和角色，用于构建具有可访问性的站点。...原文：https://1stwebdesigner.com/modern-css-frameworks-to-speed-up-the-design-process/
Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。...通过Vue Material和Vue 2.0建立精美的app应用。...中文文档：http://vuematerial.materializecss.cn/#/github 地址：https://github.com/vuematerial/vue-material ---...基于 Vue.js 构建的 Bootstrap 组件，该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。...由Vue编写的基本UI组件的轻量级集合，并受Material Design的启发。
总的来说是一个可以快速构建、具有高性能、良好交互、美观的UI表格控件。...该项目还提供了采用C++编译好的简单示例，大家可以基于此进行封装，使用任何编程语言集成到自己的应用中去。 这个项目的使命：是希望让每个人、每台设备都能本地开发、部署、运行AI模型。...支持的组件有：多选框、分割线、按钮、文本框、单选按钮、输入框、Tab控件、右键菜单、列表、进度条。 组件只能一键统一更换，不能随意自定义设置主题，有更多需求的，可以根据源码自行修改。...4、适合Windows桌面、Material Design设计风格、WPF美观控件库 这是一个适用于Windows桌面，全面且易于使用的控件库，遵循Google推测的Material Design设计风格...优化多部分流式文件上传性能：减少25%的CPU使用量、50%内存。
2、引入material兼容包 使用Chip时需要先引入兼容包，可分为两种情况， 一种是新建项目；一种是在现有的项目中引入 Chip. （1）、新建的项目 引入兼容包 implementation 'com.google.android.material...，但点击后有选中状态 通常用在 ChipGroup 中 , 通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选 <com.google.android.material.chip.Chip...Kotlin版代码 //ChipGroup中设置选中监听-- 只有单选的chipGroup才可以使用 chipGroup2.setOnCheckedChangeListener { chipGroup...--- 含示例代码 https://material.io/develop/android/components/chip/ https://medium.com/material-design-in-action.../50289355/google-material-design-library-error-program-type-already-present-android-suppo
, 因为22中引入了Material Design风格的Dialog(5.0引入的Material Design), 当然, 如果你用Android Studio, 这点基本无需担心. dependencies...右侧是Material Design风格 好, 接下来进入正文. 我们构建一个最简单的弹窗....然后就是AlertDialog是非常便于放入各种条目的, 比如单选和多选....但是注意, 这之间会起冲突, 比如之前的builder.setMessage("message");和设置单选多选条目不能同时存在. 下方展示代码和效果图....单选多选条目展示 ---- 内容补充 补充: 我们现在来说一个比较复杂的, 也比较有意思的. 就是在弹窗中填充自定义view.
实现Material Design指南的视觉，行为和运动丰富的小部件。 应用程序结构和导航 按钮 输入和选择 对话框，弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中的更多小部件。...在这种情况下，假定每个项目将具有不同的背景色，并且背景色将与白色形成鲜明对比。...MaterialApp 一个方便的小部件，它包装了许多实现Material Design的应用程序通常需要的小部件。 ? ? ?...Radio 单选按钮允许用户从一组中选择一个选项。 如果您认为用户需要并排查看所有可用选项，请使用单选按钮进行排他选择。 ? Switch On/off开关切换单个设置选项的状态。...Chip 一个Material Design芯片。 芯片代表小块中的复杂实体，如联系人。 ? Tooltip 工具提示提供的文本标签可帮助解释按钮或其他用户界面操作的功能。
###2.RecyclerView Animators一个非常强大的开源动画库，开发者可以用来创建各种效果，可实现RecyclerViewItem的各种炫酷动画效果 https://github.com...Android-FilePicker：用于Android设备选择文件或者目录，一个Material design风格的文件选择工具 https://github.com/nbsp-team/MaterialFilePicker...###4.一款仿微信的图库选择图片效果,实现了第一张图片拍照，多选，单选照片功能 https://github.com/donglua/PhotoPicker ?...###6.Android开发需要收集的各种工具类大集合(updating...)...喜欢的童鞋麻烦给我点个赞，谢谢咯！
你甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。...表格组件具有许多内置功能，比如说，单元格省略号、固定/灵活的列大小调整、自定义过滤等等。...EpicSpinners是一组易于使用的纯css打造的网页Loading效果，并且同时整合了Vue组件可以方便的在Vue项目中进行使用，由于是纯css打造，你可以在任意网页项目中自行整合并使用！...Vue Material Design Icons 地址：https://github.com/robcresswe... 一个作为单文件组件的SVG Material Design图标集合。...此外，这个库是一个Vue单文件组件的集合，用于渲染Material Design图标。此外，它还包括一些CSS，有助于使图标的缩放更容易一些。
不到万不得已的时候千万别引入前端UI框架，因为HTML5和CSS3已经能实现绝大多数的功能，比如上期的《CSS实现最简洁的开关》只用了不到50行css就实现了带动画的material design风格的开关...今天教大家用纯css实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和标签页差不多，逻辑上都是一种单选面板，只不过折叠菜单一般是垂直堆叠的，标签页是横着排列。...标签页： 既然是单选的，就可以用单选按钮来实现。...首先这些单选按钮组的父元素用，因为可以监听按钮组的变化，同时还能通过name属性直接得到RadioNodeList列表和变化值，非常方便，不用设置其他的css选择器了。...属性要一致，然后通过form[name]得到单选组，form[name].value就是当前选中的按钮的value，也就是折叠按钮的标题，每个后面跟着一个就是菜单展开的内容。
项目地址 简介 Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数...组件库 差不多就能写出来 如果对项目有兴趣 可以fork或克隆项目 自行研究 有问题或BUG欢迎提issues 文档 在线DEMO 表单组件 Input 输入框 Button 按钮 Radio 单选框...from 'vue-form-maker' import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css';...="options"/> // 或者 在HTML文件中直接引用 使用的是...dist目录中的vue-form-maker.js
MUI Core 包含 4 个用于更快构建和交付 UI 的基础库： Material UI: Material UI 是一个实现了 Google Material Design 的 React UI...(来源： Material UI) Joy UI: Joy UI 是一个使用 React 构建的漂亮设计的 UI 组件库，旨在为开发过程带来乐趣。...(来源： Base UI) MUI System: MUI System 是一组 CSS 实用程序的集合，用于使用 MUI 组件库快速布局自定义设计。...React Bootstrap 提供了一个组件库，这些组件具有易于使用的功能、状态管理和默认可访问性，使其成为开始构建应用程序 UI 的不错选择。...blueprintjs/select - 在应用中支持单选或多选的 Select 组件。 blueprintjs/table - 交互式表格组件。
自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚！...菜单（Menus） Material Design链接：菜单 ? 菜单 菜单的形式是在短暂的动作条上展示选项列表。 菜单出现在与按钮，操作或其他控件的交互中。...菜单显示的是一个一行只有一个选项的选项列表。 如果不适用于某个情景，菜单项可能被禁用。 情景中的菜单应该根据app的当前的状态动态地更改其中的菜单选项。...菜单栏通常使用单个单词作为标签，如“文件”，“格式”和“编辑”。其他上下文可能需要更长的标签。 禁用菜单选项 菜单显示一组一致的菜单项。...具有动态内容的菜单可能具有其他行为，例如：将先前使用的字体放在菜单的顶部；订单可以根据用户操作进行更改。 菜单嵌套 菜单项可以显示嵌套的子菜单。
简要教程 jquery.popup.js是一款支持animate.css动画效果的弹出层模态窗口插件。你可以在初始化插件时，配置模态窗口打开和关闭时的CSS3，使用非常炫酷和方便。 ?...使用方法 在页面中引入下面的文件。......动画的jquery弹出层插件的github网址为：https://github.com/romamaslennikov/jquery.popup.js 推荐阅读： 【公共UI】纯CSS3 Material...Design风格单选框和复选框 纯CSS3彩色进度条动画开发源码 CSS3 animation属性 实现地球转动 【程序员装B系列】八种CSS3按钮动画特效 【前端小技巧】CSS3实现环形进度条 每晚不见不散
Attributes: 以下属性通常与一起使用： icon：如果存在，则删除按钮的最小宽度样式。...您也可以像使用普通DOM元素一样使用CSS设置按钮的样式，尽管这也会影响禁用状态： /* Make #myButton green with yellow text */ #myButton { background...material-ripple { color: blue; } 纹波的不透明度不能通过CSS自定义。...也可以看看： 例子： dart-lang/io_2017_components_codelab repo 其他资源： Material design codelab Inputs: disabled bool...MaterialFabComponent Selector: 材料FAB是一个浮动操作按钮。 它是圆的，并且与MaterialButton的行为大致相同。
简要教程 这是一款使用纯CSS3制作的MaterialDesign风格单选框和复选框插件。...该插件只需引入指定的CSS文件，然后配合特定的HTML结构，就可以生成漂亮的MaterialDesign风格单选框和复选框。 ? 使用方法 在页面中引入下面的文件。... Click to check 单选框radio。
与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline : CSS1 内联对象的默认值。...旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。..._top"、"_blank"、"_selft"具有特殊意义的名称。...A.使用utf-8编码 B.将阿拉伯文转为图片并嵌入到文档内 C.使用GBK编码 D.使用iso-8859-2编码 【正确答案】A 【答案解析】A。...---- 以下都是多选题 ---- 多选题 （共计 8 题，总计 16分） 11、(多选题)在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？
Flutter默认提供了DatePicker日期选择器，如果对样式没有特殊的要求，那么可以使用它来进行时间的选择，默认的样式如下所示。...使用示例代码如下： import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; import 'dart:async...不管，为了快速的进行开发我们可以选择一些第三方的组件库，如flutter_custom_calendar，此库具有如下的功能： 支持公历，农历，节气，传统节日，常用节假日 日期范围设置，默认支持的最大日期范围为...1971.01-2055.12 禁用日期范围设置，比如想实现某范围的日期内可以点击，范围外的日期置灰 支持单选、多选模式，提供多选超过限制个数的回调和多选超过指定范围的回调。...比如实- 现进度条风格的日历，实现日历的各种标记 支持周视图的展示,支持月份视图和星期视图的展示与切换联动 如下是部分效果图： 实际使用时，我们需要根据样式对该库进行二次开发，首先，新建一个date_picker_widget.dart
Flutter日历插件，支持自定义日历，月视图/周视图切换、点击拦截、单选（切换月自动选）、多选（散选/聚选） .------------------------------------------...，切换月/周自动选 [✔] 多选,散选/聚选 1.如何使用....// controller.isMultiple // 单选下 // 当月份改变时，是否自动选中对应的月份的同一天 // controller.isAutoSelect...// 当前选中的日期 // controller.selectedDate; // 多选 // 是否散选，否则为连续选中 // controller.isDispersion...@override double get childHeight=>{...}; } 2.使用它. import 'package:flutter/material.dart'; import
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
