Question

我正在尝试创建一个Angular-Material卡网格，其行为有点像Bootstrap网格。理想情况下，对于小屏幕宽度，卡片将是全宽度的，并且在较大断点处跳转到两列。

问题是A-M为每张卡创建了列。我还没想出如何为每个断点指定列数。

这是我正在使用的标记的基础，它在第一个断点处从行到列的卡布局：

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row">
  <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index">
    <md-card>

已经有similar question on SO，但是接受的答案并不令人满意，因为它使用自定义CSS并且卡片不是流体宽度。我没有找到其他类似的例子。

我想我可以使用Angular循环每两张卡片并创建堆叠套装，但这似乎是不必要的麻烦。我不得不认为Material提供了更好的解决方案。此外，这样的解决方案会在卡片高度不同的页面中留下空白。材料似乎面向类似砌体的柔性布局，我想坚持下去。

感谢。

Answer 1

您可以使用素材Grid-List，它允许自定义col-spans并在宽度更改时设置更改动画。

我调整了网站上的示例，并在内容中添加了md-card。请务必在layout-fill上添加md-card。您可以轻松调整样品的列数。

http://codepen.io/anon/pen/QypjWY

我还调整了你的5张卡样本。您需要知道卡的高度才能使用网格列表，但您可以轻松地在小屏幕上实现100％的高度。您可以为行使用比率或固定的CSS高度，然后以灵活的方式显示内容是您的卡工作。

<md-grid-list ng-app="app" layout-fill flex
    md-cols-sm="1"
    md-cols-md="2"
    md-cols-gt-md="5"
    md-row-height-sm="100%"
    md-row-height="600px"
    md-gutter="8px">
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index">
        <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

修改

如果您正在寻找某种交错的网格，那么您必须添加一个库：angular-deckgrid，它只提供网格布局，内容中的所有内容都是角度材质。与angular-masonry不同，此库没有任何依赖关系。如果您不担心添加jQuery等，那么您也可以使用angular-masonry。

<div ng-app="app" ng-controller="DeckController" flex layout="column"> <deckgrid class="deckgrid" flex source="data"> <md-card>

甲板布局的重要部分是CSS configuration。使用此功能，您可以配置列数及其宽度。我使用了角度材质sm断点的媒体查询来切换到单列布局。

.deckgrid::before { content: '4 .column.column-1-4'; font-size: 0; visibility: hidden; } .deckgrid .column { float: left; } .deckgrid .column-1-4 { width: 25%; } .deckgrid .column-1-1 { width: 100%; } @media screen and (max-width: 960px) { .deckgrid::before { content: '1 .column.column-1-1'; } }

http://jsfiddle.net/2afaok1n/39/

编辑2：

还有一个砖石版本，它不需要jQuery和一个简单的指令来使用它：angular-masonry-directive。这是一个例子，它与另一个类似。

http://jsfiddle.net/xjnp97ye/1/

Answer 2

如果我理解你的问题是正确的然后使用此代码并将 hello 替换为您喜欢的任何内容

<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
            <md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;">
                hello
            </md-grid-tile>
        </md-grid-list>

Answer 3

如果我理解正确的问题，这就像一个魅力：

gulp = require('gulp')
jshint = require('gulp-jshint')
sass = require('gulp-sass')
concat = require('gulp-concat')
uglify = require('gulp-uglify')
rename = require('gulp-rename')

gulp.task 'lint', ->
  gulp.src('js/*.js')
  .pipe(jshint())
  .pipe jshint.reporter('default')

gulp.task 'sass', ->
  gulp.src('scss/*.scss')
  .pipe(sass())
  .pipe gulp.dest('dist/css')

gulp.task 'scripts', ->
  gulp.src('js/*.js')
  .pipe(concat('all.js'))
  .pipe(gulp.dest('dist'))
  .pipe(rename('all.min.js'))
  .pipe(uglify())
  .pipe gulp.dest('dist')

gulp.task 'watch', ->
  gulp.watch 'js/*.js', [
  'lint'
  'scripts'
]
gulp.watch 'scss/*.scss', [ 'sass' ]
  return

gulp.task 'default', [
  'lint'
  'sass'
  'scripts'
]

具有多个断点的Plunker :(调整内部窗口的大小，而不是浏览器窗口的大小） http://pastebin.com/ys788rLc

更新了plunker以显示不同高度的卡片已经制定了2个指令，因此所有卡的最大高度都保存在内存中，并且这个卡适用于所有卡。

Answer 4

<div  ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33">
<md-card>

  <md-card-title >
    <md-card-title-text >
      <span class="md-headline">Demo Title {{i}}</span>
      <span class="md-subhead">Demo Description</span>
    </md-card-title-text>    
  </md-card-title>
</md-card>
</div>

选中此示例：http://codepen.io/ktn/pen/jqNBOe

如何创建响应式（变化列数）Angular-Material卡网格

4 个答案: