1 Introduction In the past 2 years I’ve been working intensively on mobile applications, mostly hybrid, and mostly with AngularJS. In my quest to find a good UI framework that integrates with AngularJS, I came across the following options: IonicFrame…

阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 UI Framework - 文档页 05 - Vue3 UI Framework - Button 组件 ️ 06 - Vue3 UI Framework - Dialog 组件 ️ 07 - Vue3 UI Framework - Switch 组件 ️ 08 - Vue3 UI Framew…

本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic is both a CSS framework as well as a JavaScript UI library. If you’re an AngularJS developer you will be right at home as Ionic uses AngularJS Extensio…

官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件. 您也可以进行结构化设计,比如,这里就不进行了. |-lib |-Button |- Button.vue |- Button.ts |_ Button.scss 需求分析 惯例先行需求分析 多种类基础 Button,包含警告.成功.危险等 允许设置 Button 为禁用状态 不止有传统 Butt…

写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前端时代,最近在面试前端工程师的过程中,有感而发,技术更新迭代快,学习成本高.浏览了各大博客论坛,千差万别,比较混乱.最终决定参考 Element UI 的设计风格,主题色选择紫色(受到 MaterialDesignInXamlToolkit 的影响),写一套基于 Vue3 的 UI 框架库和对应的官…

顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的视图 Home.vue,首页 Document.vue,文档页 再配置一下 router.ts 来实现跳转 import { createWebHistory, createRouter } from 'vue-router' import Home from './views/Home.vue'…

为了更好的提升用户体验,我们这里再做一个很常用的开关组件 switch 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 switch 组件应分为选中/未被选中,两种状态 可以通过点击变更选中状态 不同的选中状态有不同的颜色,且有滑块处于不同的端 可以指定不同的尺寸 可以自定义颜色 可以设置为禁用 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 value 默认选择状态 boolean false / true false size 尺寸 string midd…

接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 textarea 时,可以自定义行高,但是当类型为 input 时,行高恒为 1 可以自定义外边框的颜色 可以设置为禁用 那么可以得到如下参数表格 参数 含义 类型 可选值 默认值 value 绑定值 string 字符串 必填 theme 类型 string input / textarea in…

接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 heads 表头 Array 数组,每一项包含两个 string 字段:name.identifier 必填 datas 表数据 Array 数组,每一项包含与 heads 相同数量的 string 字段 必填 bordered 是否有边…

标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时,下划线应当有动画效果 应当允许更换颜色 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 direction 方向 string row / column row selected 默认选中 string 子项的 name 必填 color 颜色 string 任意合法颜色值 #d3c…

卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 允许用户自定义内容 允许更换颜色 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 color 颜色 string 任意合法颜色值 #d3c8f5 骨架 所以很容易能够得到如下骨架代码: <template> <div class="j…

基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,scss 中类的命名都是 jeremy-x 这样的形式,这是为了用选择器来做到统一配置. 如何配置 我们在 src/lib 目录下,创建一个 jeremy.scss 的文件,编写如下代码: [class^="jeremy-"],[class*=" jeremy-"]* {…

为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown 的支持,虽然即便这样做依然无法和 JeremyPress 或者 VuePress 相比,但是至少不用纠结于原生 html 了,能够在一定程度上解决排版问题. 我们需要增加一个 plugins 文件夹,并且在此文件夹下创建一个 md.ts 的文件,代码如下: import path from 'pa…

项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages 上 返回阅读列表点击 这里 项目配置 常见的模式有三种,即 History 模式 Hash 模式 Memory 模式 在我们的项目中采用的是 vue-router, vue-router 有两种模式, 即 History 和 Hash 模式. 三者的区别与联系这里不再赘述,感兴趣的小伙伴可以自行查询. 为了简单快捷的部署,这里我们采用 Hash 模式将项目官网部署到 GitHub Pages 注意 不同的模式…

顶部边栏比较简单,而且首页和文档页都需要,所以我们先从顶部边栏做起 前文回顾点击 这里 返回阅读列表点击 这里 初始化 首先,在 components 文件夹下,创建一个 vue 组件,命名为 Topnav.vue ,然后快速创建 vue 模板,代码如下: 点击查看代码 <template> <div> </div> </template> <script lang="ts"> export default { } </…

官网的首页做完了,接下来开始做官网的文档页 返回阅读列表点击 这里 路由设计 先想想我们需要文档页通向哪些地方,这里直接给出我的设计: 所属 子标题 跳转路径 文件名(*.vue) 指南 介绍 /document/introduction Introduction 指南 安装 /document/install Install 指南 快速上手 /document/start Start 组件 Button /document/button Button 组件 Dialog /document/d…

做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放置标题.内容.操作 有两个基本操作:确定.取消 卡片后应放置淡黑色遮罩层,遮住原本网页内容 可以自定义是否允许取消 右上角提供小叉叉来允许关闭 允许通过点击遮罩层来关闭 所以,我们能够得出如下的参数表格 参数 含义 类型 可选值 默认值 visible 是否可见 boolean false / tr…

Aura (obsolete) This document is still good for a high level overview, with contact information, but many technical details are now obsolete; see the main Aura index for more details.   Project Goals   The goal is to produce a new desktop window mana…

Aura (obsolete) This document is still good for a high level overview, with contact information, but many technical details are now obsolete; see the main Aura index for more details.   Project Goals   The goal is to produce a new desktop window mana…

Table A-1  Device frameworks Name First available Prefixes Description Accelerate.framework 4.0 cblas, vDSP Contains accelerated math and DSP functions. See Accelerate Framework. Accounts.framework 5.0 AC Contains interfaces for managing access to a…

-------------------------------------------------------------------------------------------------------- Intel's App Framework The JavaScript library for mobile HTML5 app development App Framework is built from the grounp up to be light and excel on…

WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium 与 React Native 都是解决性能作为探索的出发点. 性能慢与快的分水岭   慢与快的标准,是按照每秒大于等于 60 FPS(60 帧每秒) 的理论,而为什么是 60 FPS,这不多描述. 按此理论,那么「每帧」里所有的操作都必须在 16ms 完成. WebView 里 UI 性能慢的原因…

Simple, lightweight front-end UI framework Get Start : http://www.bookcss.com Introduce Hbook focus on the front-end development and promotion, adhere to share, open the spirit of the Internet; if you and I have the same goal, I am willing to go hand…

欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么都面临两种选择:要么自己来创建这些组件,要么使用现有的组件功能. 自行开发这些组件是复杂并耗时的,通常会花费大量的时间来独自完成这些组件,这也正是UI库和框架存在的意义.现存的这些库简化了创建UI组件的过程.你可以直接利用现有的框架,并自定义它们来满足自己的需求. 目前正在广泛使用的框架之一就是jQ…

前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbadge的网址如下:https://trailhead.salesforce.com/en/content/learn/superbadges/superbadge_lcf 通过步骤安装相关的app exchange即可安装相关的表结构以及初始化数据,详细可以看这个superbadge的细节描述.安装以…

https://www.codeproject.com/Reference/788434/List-of-rd-Party-NET-UI-Reporting-Components Introduction This is a resource collection. Anyone is welcome to edit this page. This a list of quick reference of 3rd party UI components for .NET developments…

WTL都算不上什么Framework,就是利用泛型特性对Win API做了层封装,设计思路也没摆脱MFC的影响,实际上用泛型做UI Framework也只能算是一次行为艺术,这个思路下继续发展就会变得没法用了,比如 代码过于复杂,编译太慢,出错不好调试等问题难以解决. 而且封装得也不完全,还是随处可见 HWND HDC之类的东西. 用途主要是写一些很小的程序,或者作为其他UI框架的后端实现部分,比如我写过一个小框架用来做安装卸载程序,非常小,其中创建管理窗口部分是用WTL的.MFC是更高级点的W…

1:View中的field对应于model中的attribute. 2:custom controller具有更长的生存时间,能够在view中共享一些数据. 3:window是component的一个interface 4:一个component是一个应用 5:component能重用一些veiw等. 6:view controller 能控制相应view的行为. 如:Navigation, 7:inbound和outbound是一个方法,能够控制当用户进入或离开view时发生什么. 8: co…

https://github.com/microsoft/microsoft-ui-xaml/blob/master/docs/roadmap.md 微软更新太快了.是不是要把开发人员折磨死.... Windows UI Library RoadmapWinUI is the native UI platform for Windows 10. This document outlines the prospective roadmap for WinUI through 2019 and in…

ps:http://waf.codeplex.com/wikipage?title=Model-View-ViewModel%20Pattern&referringTitle=Documentation Model-View-ViewModel Pattern Common abbreviations: M-V-VM or MVVM Introduction Separating user interface code from everything else is a key principl…