Angular有像extjs这样的flex布局吗?

时间:2013-09-11 03:35:03

标签: angularjs extjs

ExtJS有一个非常有用的布局机制,叫做flex。它的工作原理是对行或列中的所有内容求和。然后使用flex值除以所有flex值的总和来分隔空间。这导致如下布局:

Flex layout

红色框是一个hbox布局,块E和F具有总和为3的给定弹性值,因此E得到屏幕宽度的1/3,而F得到2/3rds。

Blue box是另一个hbox布局,其中所有4个(A-D)具有相同的flex,因此每个都获得25%的空间。

未显示的是周围的vbox布局,其中蓝色框的flex为22,红色框的flex为78.

Angular中有这种布局吗?如果没有,你会怎么把它放在Angular中?


基于以下部分答案的其他信息:

我希望能够用Angular替换extjs。要做到这一点,我需要一些我在extjs中有的功能,我不知道它存在于Angular中。我已经找到了观察屏幕尺寸的方法,改变以调整整体显示尺寸,但我还没有看到一个很好的例子,它基本上是对这个flex值的组成指令进行内省,并根据尺寸设置它们的大小改变容器的事件。 Flex不能在div内部工作,它在div的容器内工作,因为它必须遍历容器中的所有div才能正确划分空间。我还没有看到这样做的角度指令。

我没有使用Angular的实际开发经验(我已经看过http://egghead.io中的许多视频,我已阅读文档和教程,听过这个播客:JSJ-Angular)所以我不知道这是否容易解决,或难以解决,或者有人已经解决了。这种灵活的布局非常酷且易于使用,实际上对于整页应用程序,我不确定是否有更简单的方法来布局它们以便它们保持全屏并且具有屏幕尺寸变化的可塑性。网格系统对某些东西很有用,但它们没有解决弹性系统所处理的问题。

我正试图看看是否有办法从extjs跳到Angular而不会让我的生活变得困难。


其他已发现的信息:

现在看来flex正在以CSS display: flexdisplay: inline-flex的形式成为一种显示类型(目前有前缀)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

有趣的是看到插图称之为Holy Grail Layout example。当然IE不会正确或及时地实现它,但我的客户不介意使用Chrome,如果它完成了工作。

2 个答案:

答案 0 :(得分:6)

原来有人创造了一个,它完全符合我的要求。

http://ngmodules.org/modules/flexy-layout

答案 1 :(得分:3)

你错过了这一点。 Angular只是JS库,可以帮助您:

  • 模块化您的代码
  • 允许您异步加载内容
  • 使用“magic”(双向绑定)更改内容

它没有描述您网站的风格。您必须自己动手或使用流行的流畅/响应式CSS框架之一,即:

选择自己,然后申请到您的网站。使用它也可以使你的设计独立于JS(非常糟糕)和JS框架(这是地狱的第9个圆圈)。