Grid Angular Materialはどのように機能しますか？

Question

私はマテリアルデザインを使用して、このコードを試してみてください。

tiles = [ 
    {text: 'One', cols: 1, rows: 2, color: 'lightblue'} 
    ]; 

それが何を意味するのでしょうか？それは1列で2行を表示するのですか？ https://material.angular.io/components/grid-list/examples

md-grid-listコンポーネントはプロパティcols="4"を指定することによって、あなたのグリッドがあります列数を定義します。

Answer 1

角度は、あなたの質問に答える美しい例があります。次に、内側にmd-grid-tileのコンポーネントのリストを入力します（角度使用の例ではngForが使用されます）。

あなたは行列5v7を構築したいのであれば、その後、試してみてください。

<md-grid-list cols="7" rowHeight="100px"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 
    {{tile.text}} 
    </md-grid-tile> 
</md-grid-list> 

と

@Component({ 
    selector: 'grid-list-dynamic-example', 
    templateUrl: 'grid-list-dynamic-example.html', 
}) 
export class GridListDynamicExample { 
    tiles = [ 
    {text: 'One', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'Two', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: 'etc', cols: 1, rows: 1, color: 'lightblue'}, 
    {text: '...', cols: 1, rows: 1, color: 'lightblue'}, 
    ]; 
} 

Answer 2

最初のは、HTML

<md-grid-list cols="4" rowHeight="100px"> 
    <md-grid-tile 
     *ngFor="let tile of tiles" 
     [colspan]="tile.cols" 
     [rowspan]="tile.rows" 
     [style.background]="tile.color"> 
    {{tile.text}} 
    </md-grid-tile> 
</md-grid-list> 

を見てみましょう、私はそれを打破してみましょう

cols属性で、グリッド内の列数を設定します。従って、この場合、各行は4つの列に分割される。以下に示すように

次のものがグリッドにタイルを通過している：ここ

tiles = [ 
{text: 'One', cols: 3, rows: 1, color: 'lightblue'}, 
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, 
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, 
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, 
]; 

タイトル内の各オブジェクトは、角度材料のグリッド内のアイテムに対応します。 rows属性を使用して各アイテムの高さを設定します。デフォルトでは、1行の高さは100pxです。だから、rows: 2のアイテムの場合、そのアイテムの高さは200ピクセルになります。

参考：Angular grid-list documentaionと https://material.angular.io/components/grid-list/examples