Touch

Touch

OffCanvas的offCanvasActive有BUG,页面offCanvas明明打开了,触发close方法的时候offCanvasActive值总为false,无法进入close方法

回复

笑话 发起了问题 • 1 人关注 • 0 个回复 • 102 次浏览 • 2017-03-03 17:54 • 来自相关话题

amaze-touch 如何AJAX请示远程JSON数据?

Amaze UI 小无 回复了问题 • 3 人关注 • 3 个回复 • 340 次浏览 • 2017-02-03 15:16 • 来自相关话题

Amaze UI Touch可以用php作为后台语言开发安卓app吗?

卡哇伊 回复了问题 • 2 人关注 • 2 个回复 • 286 次浏览 • 2017-01-21 15:08 • 来自相关话题

妹子UI touch的navbar 如何跟modal的对话框绑定起来

回复

笑话 发起了问题 • 1 人关注 • 0 个回复 • 177 次浏览 • 2017-01-20 17:18 • 来自相关话题

amaze-touch 如何绑定事件和添加事件处理程序?

Amaze UI 小无 回复了问题 • 2 人关注 • 1 个回复 • 166 次浏览 • 2017-01-13 11:47 • 来自相关话题

amaze-touch 如何添加本地资源(如图片、JS等)

代码宇宙 回复了问题 • 2 人关注 • 1 个回复 • 125 次浏览 • 2017-01-13 11:44 • 来自相关话题

touch根本不会用呀

linjun1185 回复了问题 • 2 人关注 • 1 个回复 • 223 次浏览 • 2017-01-11 14:40 • 来自相关话题

Touch Col组件中的内容如何水平居中

ycmrlq 回复了问题 • 3 人关注 • 3 个回复 • 143 次浏览 • 2017-01-10 15:54 • 来自相关话题

关于自定义图片标签的Tab如何设计

Amaze UI 玲儿 回复了问题 • 3 人关注 • 2 个回复 • 212 次浏览 • 2016-12-19 17:28 • 来自相关话题

想问一下Amaze UI Touch的转场动画要这么使用

Anrai 回复了问题 • 3 人关注 • 3 个回复 • 227 次浏览 • 2016-12-16 11:09 • 来自相关话题

amaze touch版 搜索框组建

Amaze UI 小无 回复了问题 • 4 人关注 • 3 个回复 • 234 次浏览 • 2016-11-14 12:06 • 来自相关话题

请教:如何做到页面跳转后回退 滚动条还在跳转之前的位置?

夕风色 回复了问题 • 2 人关注 • 1 个回复 • 259 次浏览 • 2016-10-14 10:38 • 来自相关话题

HOW TO PLAY WITH AMAZEUI-TOUCH

老配 发表了文章 • 8 个评论 • 1761 次浏览 • 2016-07-27 15:09 • 来自相关话题

全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader点击查看webpack-dev-serverESLint : 代码规范,质量检查:点击查看Babel : 根据官方文档配置就好:点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构好了,让我们来瞅一瞅有木有成功:运行webpack-dev-server --progress --colors浏览器打开:127.0.0.1:8100(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader 点击查看webpack-dev-serverESLint : 代码规范,质量检查: 点击查看Babel : 根据官方文档配置就好: 点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React --含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools  : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM: npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构. ├── package.json // npm配置文件 ├── README.md // README ├── webpack.config.js // webpack 配置文件 ├── .babelrc // babel 配置文件 ├── app // 源文件目录 │ ├── entry.js // 作为webpack的入口文件 │ ├── index.html // html │ ├── js // js 目录 │ ├── style // style 目录 │ ├── build // 打包好的文件可以放这里 第二部:安装基本的// 使用CMDER跑这些命令是极好的 npm init // 初始化npm,并且生成package.json npm install --save-dev webpack webpack-dev-server // 下载webpack npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel npm install --save-dev style-loader css-loader file-loader // 各种加载器 第三部: 配置项目所需:// 将下载好 Amaze UI Touch, React , React DOM npm install --save amazeui-touch react react-dom 第四部: 配置babel// 创建并且配置 .babelrc: touch .babelrc // 配置 { "presets": [ "es2015", "react" ] } 第五部:配置webpack// 各项配置的深入,请详看webpack的文档。 const webpack = require('webpack'); module.exports = { entry: './app/entry.js', // 入口 output: { // 输出 path: './app/dist', filename: 'bundle.js', }, devServer: { // webpack-dev-server inline: true, contentBase: './app', port: 8100, }, resolve: { extensions: ['', '.js', '.jsx'], }, module: { loaders: [ { // 配置babel加载 test: /\.js?$/, exclude: /node_modules/, loader: 'babel', }, { // 配置css加载,用sass的话,就配置sass的加载器就好 test: /\.css$/, loader: 'style-loader!css-loader' }, { // 配置字体文件加载 test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }, ] } }; 第六部:你的第一个项目:entry.js// 引入你的依赖 import React from 'react'; import ReactDOM from 'react-dom'; import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css import { Button } from 'amazeui-touch'; // 引入你需要的组件 // 你的第一个组件 class FirstTouch extends React.Component{ render() { return ( <div> <h1>Hello AMAZEUI-TOUCH</h1> <Button>first amazeui-touch touch</Button> </div> ) } }; // 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。 ReactDOM.render(<FirstTouch />, document.getElementById('root')); 好了,让我们来瞅一瞅有木有成功:运行 webpack-dev-server --progress --colors 浏览器打开: 127.0.0.1:8100 (我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接
[ 查看全部 ]
<p>全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。</p><p><strong>环境安装与前期准备</strong></p><p>我的基础环境:</p><ul><li>Win10</li><li>ATOM : GitHub出的开源的编辑器</li><li>CMDER : 命令行工具, windows下一个炒鸡好用的神器,<a href="http://cmder.net/ ">点击下载</a></li><li>Node.js :官网直接下载最新版安装即可,<a href="https://nodejs.org/en/">点击下载</a></li></ul><p>基本的配置需求:</p><ul><li>webpack: <a href="https://webpack.github.io/">点击下载</a></li><li>Gulp - 可选的</li><li>Amazeui-touch</li><li>React</li></ul><p><strong>npm:</strong></p><p><a href="http://www.alloyteam.com/2016/ ... gt%3B教程查看</a></p><p><strong>atom插件安装</strong></p><p>推荐两个插件:</p><ul><li>react 语法高亮,缩进,JSX语法识别</li><li>linter-eslint 实时检查语法</li></ul><p><strong>webpack安装配置</strong></p><ul><li>基础的css loaders, style-loader, file-loader和其他配置不谈</li><li>Babel: 编译ES6、ES7成ES5 : <a href="https://babeljs.io/">点击查看</a></li><li>hot-loader&nbsp;<a href="https://github.com/gaearon/rea ... gt%3B点击查看</a></li><li>webpack-dev-server</li><li>ESLint : 代码规范,质量检查:&nbsp;<a href="https://csspod.com/getting-sta ... gt%3B点击查看</a></li><li>Babel : 根据官方文档配置就好:&nbsp;<a href="https://babeljs.io/docs/setup/ ... gt%3B点击查看</a></li></ul><p><strong>教程</strong></p><ul><li><a href="https://segmentfault.com/a/119 ... gt%3B相关教程1</a></li><li><a href="https://egghead.io/lessons/rea ... gt%3B相关教程2</a></li><li><a href="https://blog.risingstack.com/u ... gt%3B相关教程3</a></li><li><a href="https://edspencer.net/2016/03/ ... gt%3B相关教程4</a></li></ul><p><strong>React</strong></p><p>核心部分当然还是React啦:</p><ul><li><a href="https://facebook.github.io/rea ... t%3Ba href="https://blog.lwxyfer.com/advanced-react/ ">解决部分问题方案</a></li><li><a href="https://github.com/airbnb/java ... gt%3B代码规范</a></li><li><a href="https://blog.risingstack.com/r ... gt%3B最佳实践</a></li></ul><p>核心内容:</p><ul><li>virtual DOM</li><li>JSX</li><li>components</li><li>props</li><li>state</li><li>lifecycle</li><li>event</li><li>undirectional data flow</li></ul><p>以前总结过一些内容:<a href="https://blog.lwxyfer.com/advan ... anced React</a>&nbsp;--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)</p><p><strong>Router</strong></p><p>官方给出足够多的文档和例子来学习和理解router:</p><p><a href="https://github.com/reactjs/react-router ">官方文档</a><br /><a href="https://github.com/reactjs/rea ... gt%3B官方教程</a></p><p><strong>浏览器</strong></p><ul><li>必须是chrome啦</li><li><a href="https://chrome.google.com/webs ... React Developer Tools </a>&nbsp;: 配合react开发</li></ul><p><strong>Gulp -- 非必选的</strong></p><p>Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。</p><ul><li><a href="http://gulpjs.com/">查看官网</a></li><li><a href="http://javascript.ruanyifeng.c ... gt%3B阮一峰大神的文章</a></li><li><a href="https://css-tricks.com/gulp-fo ... gt%3B其他教程1</a></li><li><a href="https://scotch.io/tutorials/au ... gt%3B其他教程2</a></li><li><a href="https://www.sitepoint.com/intr ... gt%3B其他教程3</a></li><li><a href="https://www.smashingmagazine.c ... gt%3B其他教程4</a></li><li><a href="https://teamtreehouse.com/libr ... gt%3B其他教程5</a></li><li><a href="https://github.com/nimojs/gulp-book">其他教程6</a></li><li><a href="http://www.hubwiz.com/course/5 ... gt%3B其他教程7</a></li></ul><p><strong>browser-sync 配置</strong></p><p><a href="https://addyosmani.com/blog/browser-sync/ ">配置1</a><br /><a href="http://www.vanamco.com/devicelab/">配置2</a></p><p>可以使用USB链接,设置本地服务器端口就可以访问了。</p><p><strong>sass -- 非必选</strong></p><p>touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可</p><ul><li><a href="http://sass-lang.com/">saas官网</a></li><li><a href="http://sass.bootcss.com/">saas中文站点</a></li><li><a href="http://www.w3cplus.com/sassguide/">saas教程</a></li><li><a href="https://github.com/HugoGiraude ... Bsaas指南</a> :本地安装即可</li><li><a href="http://zciwp.github.io/PPT/plu ... 3BPPT介绍</a>,可以看下</li></ul><p><strong>过程</strong></p><p>巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的<strong>基于webpack搭建React开发环境的过程</strong>,网上一搜一大堆,这里就不做过多的讲解了。</p><p>咱先看看版本:<code>node --version</code>,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:&nbsp;<code>npm --version</code>,推荐升级到最新版:<code>npm install npm@latest -g</code>,npm包的管理方式更加扁平化了。</p><p><strong>让我们荡起双桨</strong></p><p>下面以一个小例子来讲讲:</p><p>第一步:构建你的目录结构</p><pre><code>.
├── package.json // npm配置文件
├── README.md // README
├── webpack.config.js // webpack 配置文件
├── .babelrc // babel 配置文件
├── app // 源文件目录
│ ├── entry.js // 作为webpack的入口文件
│ ├── index.html // html
│ ├── js // js 目录
│ ├── style // style 目录
│ ├── build // 打包好的文件可以放这里
</code></pre><p>第二部:安装基本的</p><pre><code>// 使用CMDER跑这些命令是极好的
npm init // 初始化npm,并且生成package.json
npm install --save-dev webpack webpack-dev-server // 下载webpack
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel
npm install --save-dev style-loader css-loader file-loader // 各种加载器
</code></pre><p>第三部: 配置项目所需:</p><pre><code>// 将下载好 Amaze UI Touch, React , React DOM
npm install --save amazeui-touch react react-dom
</code></pre><p>第四部: 配置babel</p><pre><code>// 创建并且配置 .babelrc:
touch .babelrc
// 配置
{
"presets": [
"es2015",
"react"
]
}
</code></pre><p>第五部:配置webpack</p><pre><code>// 各项配置的深入,请详看webpack的文档。
const webpack = require('webpack');

module.exports = {
entry: './app/entry.js', // 入口
output: { // 输出
path: './app/dist',
filename: 'bundle.js',
},
devServer: { // webpack-dev-server
inline: true,
contentBase: './app',
port: 8100,
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{ // 配置babel加载
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
},
{ // 配置css加载,用sass的话,就配置sass的加载器就好
test: /\.css$/, loader: 'style-loader!css-loader'
},
{ // 配置字体文件加载
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&amp;.]+)?$/,
loader: 'file-loader'
},
]
}
};
</code></pre><p>第六部:你的第一个项目:entry.js</p><pre><code>// 引入你的依赖
import React from 'react';
import ReactDOM from 'react-dom';

import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css
import { Button } from 'amazeui-touch'; // 引入你需要的组件

// 你的第一个组件
class FirstTouch extends React.Component{
render() {
return (
&lt;div&gt;
&lt;h1&gt;Hello AMAZEUI-TOUCH&lt;/h1&gt;
&lt;Button&gt;first amazeui-touch touch&lt;/Button&gt;
&lt;/div&gt;
)
}
};

// 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。
ReactDOM.render(&lt;FirstTouch /&gt;, document.getElementById('root'));
</code></pre><p>好了,让我们来瞅一瞅有木有成功:运行&nbsp;<code>webpack-dev-server --progress --colors</code>&nbsp;浏览器打开:&nbsp;<code>127.0.0.1:8100</code>&nbsp;(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。</p><p>Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。</p><p>当然要开发一个完整的项目,现在的东西还远远不够。</p><p>就酱,完。</p><p><a href="https://blog.lwxyfer.com/how-t ... gt%3B原文链接</a></p>

浅谈基于AmazeUI Touch 的 Flex布局结构

夜店小新新 发表了文章 • 2 个评论 • 551 次浏览 • 2016-07-18 10:04 • 来自相关话题

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。
[ 查看全部 ]
<p>2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为&quot;弹性布局&quot;,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。</p><pre><code class="language-css">.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
</code></pre><p>让我们看看AmazeUI的布局是怎么选择的:</p><ul><li>Amaze UI Web基于 float,12 列响应式</li><li>Amaze UI Touch 基于flex,6 列流式</li></ul><p><strong>很多AmazeUI</strong><strong>的程序员在使用Touch</strong><strong>系统进行架构的时候,往往忽略了Flex</strong><strong>的布局,很多浏览器的兼容问题就会出现了。</strong>值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。</p><p>采用Flex布局的元素,称为Flex容器(flex container),简称&quot;容器&quot;。它的所有子元素自动成为容器成员,容器的六大属性</p><p>1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值</p><ul><li>row(默认值):主轴为水平方向,起点在左端。</li><li>row-reverse:主轴为水平方向,起点在右端。</li><li>column:主轴为垂直方向,起点在上沿。</li><li>column-reverse:主轴为垂直方向,起点在下沿。</li></ul><p>2、flex-wrap:默认情况下,元素都排在一条线(又称&quot;轴线&quot;)上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。</p><ul><li>nowrap(默认):不换行。</li><li>wrap:换行,第一行在上方。</li><li>wrap-reverse:换行,第一行在下方。</li></ul><p>3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。</p><p>4、justify-content:属性定义了项目在主轴上的对齐方式。<br />
1.png
</p><p>5、align-items:属性定义项目在交叉轴上如何对齐</p><ul><li>flex-start:顶边对齐。</li><li>flex-end:底边对其。</li><li>center:水平居中。</li><li>baseline: 项目的第一行文字的基线对齐。</li><li>stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。</li></ul><p>6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。</p><ul><li>flex-start:与交叉轴的起点对齐。</li><li>flex-end:与交叉轴的终点对齐。</li><li>center:与交叉轴的中点对齐。</li><li>space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。</li><li>space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。</li><li>stretch(默认值):轴线占满整个交叉轴。</li></ul><p>同时在排列上也有6个属性来对项目进行分析。</p><p>1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。</p><p>2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。</p><p>3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。</p><p>4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。</p><p>5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。</p><p>6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。</p><p>当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。</p>

OffCanvas的offCanvasActive有BUG,页面offCanvas明明打开了,触发close方法的时候offCanvasActive值总为false,无法进入close方法

回复

笑话 发起了问题 • 1 人关注 • 0 个回复 • 102 次浏览 • 2017-03-03 17:54 • 来自相关话题

amaze-touch 如何AJAX请示远程JSON数据?

回复

Amaze UI 小无 回复了问题 • 3 人关注 • 3 个回复 • 340 次浏览 • 2017-02-03 15:16 • 来自相关话题

Amaze UI Touch可以用php作为后台语言开发安卓app吗?

回复

卡哇伊 回复了问题 • 2 人关注 • 2 个回复 • 286 次浏览 • 2017-01-21 15:08 • 来自相关话题

妹子UI touch的navbar 如何跟modal的对话框绑定起来

回复

笑话 发起了问题 • 1 人关注 • 0 个回复 • 177 次浏览 • 2017-01-20 17:18 • 来自相关话题

amaze-touch 如何绑定事件和添加事件处理程序?

回复

Amaze UI 小无 回复了问题 • 2 人关注 • 1 个回复 • 166 次浏览 • 2017-01-13 11:47 • 来自相关话题

amaze-touch 如何添加本地资源(如图片、JS等)

回复

代码宇宙 回复了问题 • 2 人关注 • 1 个回复 • 125 次浏览 • 2017-01-13 11:44 • 来自相关话题

touch根本不会用呀

回复

linjun1185 回复了问题 • 2 人关注 • 1 个回复 • 223 次浏览 • 2017-01-11 14:40 • 来自相关话题

Touch Col组件中的内容如何水平居中

回复

ycmrlq 回复了问题 • 3 人关注 • 3 个回复 • 143 次浏览 • 2017-01-10 15:54 • 来自相关话题

关于自定义图片标签的Tab如何设计

回复

Amaze UI 玲儿 回复了问题 • 3 人关注 • 2 个回复 • 212 次浏览 • 2016-12-19 17:28 • 来自相关话题

想问一下Amaze UI Touch的转场动画要这么使用

回复

Anrai 回复了问题 • 3 人关注 • 3 个回复 • 227 次浏览 • 2016-12-16 11:09 • 来自相关话题

amaze touch版 搜索框组建

回复

Amaze UI 小无 回复了问题 • 4 人关注 • 3 个回复 • 234 次浏览 • 2016-11-14 12:06 • 来自相关话题

请教:如何做到页面跳转后回退 滚动条还在跳转之前的位置?

回复

夕风色 回复了问题 • 2 人关注 • 1 个回复 • 259 次浏览 • 2016-10-14 10:38 • 来自相关话题

HOW TO PLAY WITH AMAZEUI-TOUCH

老配 发表了文章 • 8 个评论 • 1761 次浏览 • 2016-07-27 15:09 • 来自相关话题

全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader点击查看webpack-dev-serverESLint : 代码规范,质量检查:点击查看Babel : 根据官方文档配置就好:点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构好了,让我们来瞅一瞅有木有成功:运行webpack-dev-server --progress --colors浏览器打开:127.0.0.1:8100(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。环境安装与前期准备我的基础环境:Win10ATOM : GitHub出的开源的编辑器CMDER : 命令行工具, windows下一个炒鸡好用的神器,点击下载Node.js :官网直接下载最新版安装即可,点击下载基本的配置需求:webpack: 点击下载Gulp - 可选的Amazeui-touchReactnpm:教程查看atom插件安装推荐两个插件:react 语法高亮,缩进,JSX语法识别linter-eslint 实时检查语法webpack安装配置基础的css loaders, style-loader, file-loader和其他配置不谈Babel: 编译ES6、ES7成ES5 : 点击查看hot-loader 点击查看webpack-dev-serverESLint : 代码规范,质量检查: 点击查看Babel : 根据官方文档配置就好: 点击查看教程相关教程1相关教程2相关教程3相关教程4React核心部分当然还是React啦:React解决部分问题方案代码规范最佳实践核心内容:virtual DOMJSXcomponentspropsstatelifecycleeventundirectional data flow以前总结过一些内容:advanced React --含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)Router官方给出足够多的文档和例子来学习和理解router:官方文档官方教程浏览器必须是chrome啦React Developer Tools  : 配合react开发Gulp -- 非必选的Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。查看官网阮一峰大神的文章其他教程1其他教程2其他教程3其他教程4其他教程5其他教程6其他教程7browser-sync 配置配置1配置2可以使用USB链接,设置本地服务器端口就可以访问了。sass -- 非必选touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可saas官网saas中文站点saas教程saas指南 :本地安装即可PPT介绍,可以看下过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的基于webpack搭建React开发环境的过程,网上一搜一大堆,这里就不做过多的讲解了。咱先看看版本:node --version,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM: npm --version,推荐升级到最新版:npm install npm@latest -g,npm包的管理方式更加扁平化了。让我们荡起双桨下面以一个小例子来讲讲:第一步:构建你的目录结构. ├── package.json // npm配置文件 ├── README.md // README ├── webpack.config.js // webpack 配置文件 ├── .babelrc // babel 配置文件 ├── app // 源文件目录 │ ├── entry.js // 作为webpack的入口文件 │ ├── index.html // html │ ├── js // js 目录 │ ├── style // style 目录 │ ├── build // 打包好的文件可以放这里 第二部:安装基本的// 使用CMDER跑这些命令是极好的 npm init // 初始化npm,并且生成package.json npm install --save-dev webpack webpack-dev-server // 下载webpack npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel npm install --save-dev style-loader css-loader file-loader // 各种加载器 第三部: 配置项目所需:// 将下载好 Amaze UI Touch, React , React DOM npm install --save amazeui-touch react react-dom 第四部: 配置babel// 创建并且配置 .babelrc: touch .babelrc // 配置 { "presets": [ "es2015", "react" ] } 第五部:配置webpack// 各项配置的深入,请详看webpack的文档。 const webpack = require('webpack'); module.exports = { entry: './app/entry.js', // 入口 output: { // 输出 path: './app/dist', filename: 'bundle.js', }, devServer: { // webpack-dev-server inline: true, contentBase: './app', port: 8100, }, resolve: { extensions: ['', '.js', '.jsx'], }, module: { loaders: [ { // 配置babel加载 test: /\.js?$/, exclude: /node_modules/, loader: 'babel', }, { // 配置css加载,用sass的话,就配置sass的加载器就好 test: /\.css$/, loader: 'style-loader!css-loader' }, { // 配置字体文件加载 test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }, ] } }; 第六部:你的第一个项目:entry.js// 引入你的依赖 import React from 'react'; import ReactDOM from 'react-dom'; import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css import { Button } from 'amazeui-touch'; // 引入你需要的组件 // 你的第一个组件 class FirstTouch extends React.Component{ render() { return ( <div> <h1>Hello AMAZEUI-TOUCH</h1> <Button>first amazeui-touch touch</Button> </div> ) } }; // 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。 ReactDOM.render(<FirstTouch />, document.getElementById('root')); 好了,让我们来瞅一瞅有木有成功:运行 webpack-dev-server --progress --colors 浏览器打开: 127.0.0.1:8100 (我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。当然要开发一个完整的项目,现在的东西还远远不够。就酱,完。原文链接
[ 查看全部 ]
<p>全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。</p><p><strong>环境安装与前期准备</strong></p><p>我的基础环境:</p><ul><li>Win10</li><li>ATOM : GitHub出的开源的编辑器</li><li>CMDER : 命令行工具, windows下一个炒鸡好用的神器,<a href="http://cmder.net/ ">点击下载</a></li><li>Node.js :官网直接下载最新版安装即可,<a href="https://nodejs.org/en/">点击下载</a></li></ul><p>基本的配置需求:</p><ul><li>webpack: <a href="https://webpack.github.io/">点击下载</a></li><li>Gulp - 可选的</li><li>Amazeui-touch</li><li>React</li></ul><p><strong>npm:</strong></p><p><a href="http://www.alloyteam.com/2016/ ... gt%3B教程查看</a></p><p><strong>atom插件安装</strong></p><p>推荐两个插件:</p><ul><li>react 语法高亮,缩进,JSX语法识别</li><li>linter-eslint 实时检查语法</li></ul><p><strong>webpack安装配置</strong></p><ul><li>基础的css loaders, style-loader, file-loader和其他配置不谈</li><li>Babel: 编译ES6、ES7成ES5 : <a href="https://babeljs.io/">点击查看</a></li><li>hot-loader&nbsp;<a href="https://github.com/gaearon/rea ... gt%3B点击查看</a></li><li>webpack-dev-server</li><li>ESLint : 代码规范,质量检查:&nbsp;<a href="https://csspod.com/getting-sta ... gt%3B点击查看</a></li><li>Babel : 根据官方文档配置就好:&nbsp;<a href="https://babeljs.io/docs/setup/ ... gt%3B点击查看</a></li></ul><p><strong>教程</strong></p><ul><li><a href="https://segmentfault.com/a/119 ... gt%3B相关教程1</a></li><li><a href="https://egghead.io/lessons/rea ... gt%3B相关教程2</a></li><li><a href="https://blog.risingstack.com/u ... gt%3B相关教程3</a></li><li><a href="https://edspencer.net/2016/03/ ... gt%3B相关教程4</a></li></ul><p><strong>React</strong></p><p>核心部分当然还是React啦:</p><ul><li><a href="https://facebook.github.io/rea ... t%3Ba href="https://blog.lwxyfer.com/advanced-react/ ">解决部分问题方案</a></li><li><a href="https://github.com/airbnb/java ... gt%3B代码规范</a></li><li><a href="https://blog.risingstack.com/r ... gt%3B最佳实践</a></li></ul><p>核心内容:</p><ul><li>virtual DOM</li><li>JSX</li><li>components</li><li>props</li><li>state</li><li>lifecycle</li><li>event</li><li>undirectional data flow</li></ul><p>以前总结过一些内容:<a href="https://blog.lwxyfer.com/advan ... anced React</a>&nbsp;--含大量链接(国内外的教程和文章等),与React相配合的东西太多了(:dog)</p><p><strong>Router</strong></p><p>官方给出足够多的文档和例子来学习和理解router:</p><p><a href="https://github.com/reactjs/react-router ">官方文档</a><br /><a href="https://github.com/reactjs/rea ... gt%3B官方教程</a></p><p><strong>浏览器</strong></p><ul><li>必须是chrome啦</li><li><a href="https://chrome.google.com/webs ... React Developer Tools </a>&nbsp;: 配合react开发</li></ul><p><strong>Gulp -- 非必选的</strong></p><p>Gulp是可选的:下面的链接随便看一个就能学会gulp,反正其实也是再用插件(-|-),详细的配置还是得看每一个插件的配置才行的。</p><ul><li><a href="http://gulpjs.com/">查看官网</a></li><li><a href="http://javascript.ruanyifeng.c ... gt%3B阮一峰大神的文章</a></li><li><a href="https://css-tricks.com/gulp-fo ... gt%3B其他教程1</a></li><li><a href="https://scotch.io/tutorials/au ... gt%3B其他教程2</a></li><li><a href="https://www.sitepoint.com/intr ... gt%3B其他教程3</a></li><li><a href="https://www.smashingmagazine.c ... gt%3B其他教程4</a></li><li><a href="https://teamtreehouse.com/libr ... gt%3B其他教程5</a></li><li><a href="https://github.com/nimojs/gulp-book">其他教程6</a></li><li><a href="http://www.hubwiz.com/course/5 ... gt%3B其他教程7</a></li></ul><p><strong>browser-sync 配置</strong></p><p><a href="https://addyosmani.com/blog/browser-sync/ ">配置1</a><br /><a href="http://www.vanamco.com/devicelab/">配置2</a></p><p>可以使用USB链接,设置本地服务器端口就可以访问了。</p><p><strong>sass -- 非必选</strong></p><p>touch使用sass编写css,这也是可选的,你可以直接用css,也可以sass。在webpack或者Gulp中为其配置编译即可</p><ul><li><a href="http://sass-lang.com/">saas官网</a></li><li><a href="http://sass.bootcss.com/">saas中文站点</a></li><li><a href="http://www.w3cplus.com/sassguide/">saas教程</a></li><li><a href="https://github.com/HugoGiraude ... Bsaas指南</a> :本地安装即可</li><li><a href="http://zciwp.github.io/PPT/plu ... 3BPPT介绍</a>,可以看下</li></ul><p><strong>过程</strong></p><p>巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢,那么就到了项目时间。上面都是提到的各种需要的东西。 至于详细的<strong>基于webpack搭建React开发环境的过程</strong>,网上一搜一大堆,这里就不做过多的讲解了。</p><p>咱先看看版本:<code>node --version</code>,官网下的话,一般下的是4.4.7长期支持版本的,更加稳定些嘛。 再看看NPM:&nbsp;<code>npm --version</code>,推荐升级到最新版:<code>npm install npm@latest -g</code>,npm包的管理方式更加扁平化了。</p><p><strong>让我们荡起双桨</strong></p><p>下面以一个小例子来讲讲:</p><p>第一步:构建你的目录结构</p><pre><code>.
├── package.json // npm配置文件
├── README.md // README
├── webpack.config.js // webpack 配置文件
├── .babelrc // babel 配置文件
├── app // 源文件目录
│ ├── entry.js // 作为webpack的入口文件
│ ├── index.html // html
│ ├── js // js 目录
│ ├── style // style 目录
│ ├── build // 打包好的文件可以放这里
</code></pre><p>第二部:安装基本的</p><pre><code>// 使用CMDER跑这些命令是极好的
npm init // 初始化npm,并且生成package.json
npm install --save-dev webpack webpack-dev-server // 下载webpack
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel
npm install --save-dev style-loader css-loader file-loader // 各种加载器
</code></pre><p>第三部: 配置项目所需:</p><pre><code>// 将下载好 Amaze UI Touch, React , React DOM
npm install --save amazeui-touch react react-dom
</code></pre><p>第四部: 配置babel</p><pre><code>// 创建并且配置 .babelrc:
touch .babelrc
// 配置
{
"presets": [
"es2015",
"react"
]
}
</code></pre><p>第五部:配置webpack</p><pre><code>// 各项配置的深入,请详看webpack的文档。
const webpack = require('webpack');

module.exports = {
entry: './app/entry.js', // 入口
output: { // 输出
path: './app/dist',
filename: 'bundle.js',
},
devServer: { // webpack-dev-server
inline: true,
contentBase: './app',
port: 8100,
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
module: {
loaders: [
{ // 配置babel加载
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
},
{ // 配置css加载,用sass的话,就配置sass的加载器就好
test: /\.css$/, loader: 'style-loader!css-loader'
},
{ // 配置字体文件加载
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&amp;.]+)?$/,
loader: 'file-loader'
},
]
}
};
</code></pre><p>第六部:你的第一个项目:entry.js</p><pre><code>// 引入你的依赖
import React from 'react';
import ReactDOM from 'react-dom';

import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css,也可以直接单独引入模块的css
import { Button } from 'amazeui-touch'; // 引入你需要的组件

// 你的第一个组件
class FirstTouch extends React.Component{
render() {
return (
&lt;div&gt;
&lt;h1&gt;Hello AMAZEUI-TOUCH&lt;/h1&gt;
&lt;Button&gt;first amazeui-touch touch&lt;/Button&gt;
&lt;/div&gt;
)
}
};

// 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。
ReactDOM.render(&lt;FirstTouch /&gt;, document.getElementById('root'));
</code></pre><p>好了,让我们来瞅一瞅有木有成功:运行&nbsp;<code>webpack-dev-server --progress --colors</code>&nbsp;浏览器打开:&nbsp;<code>127.0.0.1:8100</code>&nbsp;(我们在webpack-dev-server中设置的端口)。没有问题的话,你就会看到页面了,自己试一试吧。</p><p>Amaze UI Touch只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 对于每个组件的使用和配置,请看Amaze UI Touch 文档。</p><p>当然要开发一个完整的项目,现在的东西还远远不够。</p><p>就酱,完。</p><p><a href="https://blog.lwxyfer.com/how-t ... gt%3B原文链接</a></p>

浅谈基于AmazeUI Touch 的 Flex布局结构

夜店小新新 发表了文章 • 2 个评论 • 551 次浏览 • 2016-07-18 10:04 • 来自相关话题

2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 让我们看看AmazeUI的布局是怎么选择的:Amaze UI Web基于 float,12 列响应式Amaze UI Touch 基于flex,6 列流式很多AmazeUI的程序员在使用Touch系统进行架构的时候,往往忽略了Flex的布局,很多浏览器的兼容问题就会出现了。值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,容器的六大属性1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。2、flex-wrap:默认情况下,元素都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。4、justify-content:属性定义了项目在主轴上的对齐方式。 5、align-items:属性定义项目在交叉轴上如何对齐flex-start:顶边对齐。flex-end:底边对其。center:水平居中。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。flex-start:与交叉轴的起点对齐。flex-end:与交叉轴的终点对齐。center:与交叉轴的中点对齐。space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值):轴线占满整个交叉轴。同时在排列上也有6个属性来对项目进行分析。1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。
[ 查看全部 ]
<p>2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex是Flexible Box的缩写,意为&quot;弹性布局&quot;,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。</p><pre><code class="language-css">.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
</code></pre><p>让我们看看AmazeUI的布局是怎么选择的:</p><ul><li>Amaze UI Web基于 float,12 列响应式</li><li>Amaze UI Touch 基于flex,6 列流式</li></ul><p><strong>很多AmazeUI</strong><strong>的程序员在使用Touch</strong><strong>系统进行架构的时候,往往忽略了Flex</strong><strong>的布局,很多浏览器的兼容问题就会出现了。</strong>值得注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。让我们一起了解一下Flex布局的属性的取值。</p><p>采用Flex布局的元素,称为Flex容器(flex container),简称&quot;容器&quot;。它的所有子元素自动成为容器成员,容器的六大属性</p><p>1、flex-direction:属性决定主轴的方向,类似于规定了整个容器是按照从左到右(float:left)还是从右到左(float:right)或者由上到下,甚至由下到上。这个就是主轴的方向。他有4个值</p><ul><li>row(默认值):主轴为水平方向,起点在左端。</li><li>row-reverse:主轴为水平方向,起点在右端。</li><li>column:主轴为垂直方向,起点在上沿。</li><li>column-reverse:主轴为垂直方向,起点在下沿。</li></ul><p>2、flex-wrap:默认情况下,元素都排在一条线(又称&quot;轴线&quot;)上。flex-wrap属性定义,如果一条轴线排不下,换行的方式。</p><ul><li>nowrap(默认):不换行。</li><li>wrap:换行,第一行在上方。</li><li>wrap-reverse:换行,第一行在下方。</li></ul><p>3、flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。</p><p>4、justify-content:属性定义了项目在主轴上的对齐方式。<br />
1.png
</p><p>5、align-items:属性定义项目在交叉轴上如何对齐</p><ul><li>flex-start:顶边对齐。</li><li>flex-end:底边对其。</li><li>center:水平居中。</li><li>baseline: 项目的第一行文字的基线对齐。</li><li>stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。</li></ul><p>6、align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。</p><ul><li>flex-start:与交叉轴的起点对齐。</li><li>flex-end:与交叉轴的终点对齐。</li><li>center:与交叉轴的中点对齐。</li><li>space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。</li><li>space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。</li><li>stretch(默认值):轴线占满整个交叉轴。</li></ul><p>同时在排列上也有6个属性来对项目进行分析。</p><p>1、order:属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。</p><p>2、flex-grow:属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。</p><p>3、flex-shrink:属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。</p><p>4、flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。</p><p>5、flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。</p><p>6、align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。</p><p>当有了以上基础后,回过头来我们在欣赏AmazeUI Touch的布局[http://t.amazeui.org/#/docs/typography?_k=ehwub2],虽然API和jQuery版本很像,但整体布局理念完全是不一样的。所以在自定义一些属性的时候,请贯彻Flex精神。</p>
为企业移动开发而生,采用国际最前沿的“组件式开发”的先进设计理念,专注于移动端UI展现及交互体验效果,企业开发者可通过简单拼装,即可构建出与原生App相媲美的HTML5企业级应用。