angular material 中 widger 的网格视图

Question

我正在尝试为我使用 angular matirial 构建的小部件设置网格视图。

基本上我想要一个左侧固定宽度的侧边栏，右侧的内容在一列中包含三个部分：一个 header 固定高度（60px），一个内容应该填充小部件和固定高度 (60px) 的页脚；

这是我设置的插件。 Plunker

<!DOCTYPE html>
<html ng-app="main">

  <head>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div id="widget" class="widget-container box-shadow">
            <div layout="row" layout-fill flex>
                <div class="my-main" layot="column" layout-fill flex>
                    <div class="my-header" ></div>
                    <div class="my-content" flex></div>
                    <div class="my-footer" ></div>
                </div>
                <div class="my-sidebar" layot="column" ></div>
            </div>
        </div>


    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


    <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

    <script src="script.js"></script>

  </body>

</html>

CSS:

*{
    direction: rtl;
}

.widget-container{
    position: absolute;
    top:20%;
    left: 30%;
    width: 40%;
    height: 40%;
}

.box-shadow{
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.my-main{
    width: 100%;
}
.my-header{
    background-color: brown;
    width:60px;
}

.my-content{

    background-color: blue;
}

.my-footer{
    background-color: chartreuse;
    width:60px;
}

.my-sidebar{
    width: 60px;
    background-color: aqua;
}

JS:

angular.module("main", ["ngMaterial"]);

angular.module("main")
    .run(function (){

        $("#widget").draggable();
        $("#widget").resizable();       

    });

现在我的内容视图根本没有出现（宽度为 0）。我想我错过了 angular material 的东西，但是什么？我还从 jquery-ui 添加了可拖动和可调整大小的选项，但我认为这不是问题所在。

感谢您的帮助。

编辑 1：只是一个打字错误，plunker 已修复并可以正常工作，希望它能对某人有所帮助。

Answer 1

你打错了。

在 div 中有 class my-main 将 layot="column 更改为 layout="column"。同样的错误出现在 div 里面有 class my-sidebar.

angular.module("main", ["ngMaterial"]);

angular.module("main")
    .run(function (){

        $("#widget").draggable();
        $("#widget").resizable();       

    });

*{
    direction: rtl;
}

.widget-container{
    position: absolute;
    top:20%;
    left: 30%;
    width: 40%;
    height: 40%;
}

.box-shadow{
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.my-main{
    width: 100%;
}
.my-header{
    background-color: brown;
    width:60px;
}

.my-content{

    background-color: blue;
}

.my-footer{
    background-color: chartreuse;
    width:60px;
}

.my-sidebar{
    width: 60px;
    background-color: aqua;
}

<!DOCTYPE html>
<html ng-app="main">

  <head>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <div id="widget" class="widget-container box-shadow">
            <div layout="row" layout-fill flex>
                <div class="my-main" layout="column" layout-fill flex>
                    <div class="my-header" ></div>
                    <div class="my-content" flex></div>
                    <div class="my-footer" ></div>
                </div>
                <div class="my-sidebar" layout="column" ></div>
            </div>
        </div>


    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


    <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

    <script src="script.js"></script>

  </body>

</html>

angular material 中 widger 的网格视图

grid view for a widger in angular material

javascript

angularjs

angular-material