CODEWITHSUNDEEP
angularjsangular-material
FunkySayu
FunkySayu

Reputation: 8061

Position exactly a md-grid-tile in a md-grid-list

I would like to represent a floor (with a variable number of rooms). For example, I have this data set :

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}
    }
]

For this example, the result would looks like this :

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

By using a md-grid-list and some md-grid-tile I do not have any way to position exactly a bloc (with the size attribute as md-rowspan and md-colspan).

My workaround would be to create fake md-grid-tile in order to setup the layout as I want. However, this solution is definitely not the best and I'm not even sure it can work correctly.

Is there any good way to place my grid tiles on a specific position ?

Upvotes: 1

Views: 510

Answers (1)

Mike Feltman
Mike Feltman

Reputation: 5176

I played around with this is a bit and it seems feasible. I haven't worked out all of the logic, but this should get you somewhat close:

<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>

I think basically what's missing is that you have to examine your rooms, figure out the outer dimensions, translate the positions to rows & columns spanned, insert "empty rooms" in the blank space and use a different css class on the "empty rooms" so they aren't visible.

Upvotes: 1

Related Questions