简体   繁体   English

角材料中的w夫的网格视图

[英]grid view for a widger in angular material

I am trying to set up a grid view for a widget I'm building with angular matirial. 我正在尝试为我要用角材料构建的小部件设置网格视图。

Basically I want a side bar with fixed width on the left, and on the right the content with three sections in a column: a header with fixed height (60px), a content which should fill the widget, and a footer with fixed height (60px); 基本上,我希望左侧的边栏具有固定的宽度,右侧的内容是一列中包含三个部分的内容:具有固定高度(60px)的页眉,应填充小部件的内容和具有固定高度的页脚( 60px);

Here is a plunker I have setup. 这是我安装的一个矮人。 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: 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: JS:

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

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

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

    });

Right now my content view does not appear at all (width of 0). 现在,我的内容视图完全不显示(宽度为0)。 I think I am missing something with angular material, but what? 我想我缺少一些棱角分明的东西,但是呢? Also I added draggable and resizable options from jquery-ui but I dont think that is the problem. 我也从jquery-ui添加了可拖动和可调整大小的选项,但我不认为这是问题所在。

Thanks for the help. 谢谢您的帮助。

Edit 1: Just a typo, the plunker is fixed and working, hope it would help someone. 编辑1:只是拼写错误,the头是固定的,正在工作,希望它能对某人有所帮助。

You made a typo. 你打错字了。

In the div which has class my-main change layot="column to layout="column" . The same mistake is made in the div which has class my-sidebar . 在具有my-main类的div ,将layot="column更改为layout="column"在具有my-sidebardiv中也犯了同样的错误。

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM