Positioniere genau ein md-grid-fliese in einer md-grid-list

Ich möchte eine Etage darstellen (mit einer variablen Anzahl von Zimmern). Zum Beispiel habe ich diesen Datensatz haben:Positioniere genau ein md-grid-fliese in einer md-grid-list

var rooms = [ 
    { 
     name: 'Room 1', 
     position: {x: 0, y: 0}, 
     size: {x: 2, y: 1} 
    }, 
    { 
     name: 'Room 2', 
     position: {x: 2, y: 0}, 
     size: {x: 2, y: 1} 
    }, 
    { 
     name: 'Room 3', 
     position: {x: 0, y: 1}, 
     size: {x: 1, y: 2} 
    }, 
    { 
     name: 'Room 4', 
     position: {x: 3, y: 1}, 
     size: {x: 1, y: 2} 
    } 
]

In diesem Beispiel wäre das Ergebnis sieht wie folgt aus:

+-------------------+-------------------+ 
|     |     | 
|     |     | 
|  Room 1  |  Room 2  | 
+---------+---------+---------+---------+ 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
|   |     |   | 
| Room 3 |     | Room 4 | 
+---------+     +---------+

Durch einen md-grid-list verwenden und einige md-grid-tile ich habe keine Möglichkeit, genau zu positionieren, ein Block (mit dem size Attribut als md-rowspan und md-colspan).

Meine Problemumgehung wäre gefälschte md-grid-tile zu erstellen, um das Layout einzurichten, wie ich will. Allerdings ist diese Lösung definitiv nicht die beste und ich bin mir nicht einmal sicher, ob sie richtig funktionieren kann.

Gibt es eine gute Möglichkeit, meine Gitterkacheln an einer bestimmten Position zu platzieren?

Quelle

2016-05-04 FunkySayu

Ich spielte mit diesem ist ein bisschen und es scheint machbar. Ich habe nicht die gesamte Logik ausgearbeitet, aber das sollten Sie etwas nahe kommen:

<html> 

<head> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" /> 
    <style> 
     .red { 
    background: #ff8a80; } 
    </style> 
</head> 

<body ng-app="app" ng-controller="roomController as ctrl"> 

    <md-grid-list md-cols="5" md-row-height="4:3" md-gutter="12px"> 
     <md-grid-tile ng-repeat="room in ctrl.rooms" md-colspan="{{room.size.x}}" md-rowspan="{{room.size.y}}" class="red">{{room.name}} 
     </md-grid-tile> 
    </md-grid-list>  

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js "></script> 
    <script> 
     angular.module("app",["ngMaterial"]).controller("roomController",roomController) 

    function roomController() { 
     var vm = this 
     vm.rooms = [ 
      { 
       name: 'Room 1', 
       position: {x: 0, y: 0}, 
       size: {x: 2, y: 1} 
      }, 
      { 
       name: 'Room 2', 
       position: {x: 2, y: 0}, 
       size: {x: 2, y: 1} 
      }, 
      { 
       name: 'Room 3', 
       position: {x: 0, y: 1}, 
       size: {x: 1, y: 2} 
      }, 
      { 
       name: 'Room 4', 
       position: {x: 3, y: 1}, 
       size: {x: 1, y: 2} 
      } 
     ] 

     return 
    } 
    </script> 
</body> 

</html>

Ich denke, im Grunde, was fehlt ist, dass Sie Ihr Zimmer prüfen haben, herauszufinden, die äußeren Abmessungen aus, übersetzen, die Positionen zu Zeilen & Spalten überspannt, fügen Sie "leere Räume" in den leeren Raum und verwenden Sie eine andere CSS-Klasse auf die "leere Räume", so dass sie nicht sichtbar sind.

Quelle

2016-05-04 17:56:51

Also die allgemeine Idee wäre, meine Räume nach der "y" -Position zu sortieren, zu prüfen, ob es etwas leeren Raum gibt und sie mit einem 1x1 ng-Gitter-Kachel zu füllen. Ich bin mir nicht sicher, ob es gut zu allen Räumen passt, aber im Moment habe ich kein Beispiel für ausgabefähige Layouts. Also ich denke, du hast Recht :) – FunkySayu

Sie müssen den leeren Raum überhaupt nicht tun. Ich bin mir da nicht sicher, aber ich denke, weil ich sonst keinen Weg sehe, leeren Raum zu erzwingen. –

Positioniere genau ein md-grid-fliese in einer md-grid-list

Antwort

Verwandte Themen