小编mcm*_*hfy的帖子

我对angular-material2组件非常满意,但有一些我不理解的奇怪行为,并且他们没有适当的文档,特别是对于丰富和定制他们的组件.

我的项目看起来像:

.src
  --app
    --components
      --login-component
           login-component.html
           login-component.scss
           login-component.js
      --login-component
            home-component.html
            home-component.scss
            home-component.js
       --and so on ...
    app.component.html
    app.component.scss
    app.component.ts
    app.module.ts
    app.routing.ts
    --assets
    --environments
    --scss
      styles.scss
      _material2-theme.scss
      _variables-scss
      _utilities.scss
      _reset.scss
   favicon
   index.html
   and so on ....

在angular-cli.json中,我修改了样式以查看scss/style.scss

...
"styles": [
        "scss/styles.scss"
      ]
...

_material2-theme.scss看起来像:

//////////////////////* THEMES */ Custom Blue Theme*/
@import '~@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-light-blue);
$app-accent:  mat-palette($mat-light-blue, A200, A100, A400);
$app-theme:   mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);

/*default palette forground/background*/
$light-foreground-palette: map-get($app-theme, foreground);
$light-background-palette: map-get($app-theme, background);

$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, …

我对Angular很新,所以我需要的是spinner每次http请求完成时显示.

我有很多组件:

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>

每个人都有一个获取或保存一些数据的http请求,所以当我发出http请求时,我想显示我的<loading></loading>组件,所以我认为用一个http请求将我的加载组件注入到每个其他组件中是不好的做法.我可以添加一个过滤器或角度的东西,允许我<loading>在每个有http请求的组件中自动加载组件吗？

此外,当http请求完成时,我想显示"完成"或某些消息.

如果有人能为我提供解决方案,我将非常感激,ty.

我有两个单独的表,我在每个tr上使用焦点+悬停功能同时在两个表上工作得很好,我的问题是td高度,因为如果来自拳头表的td的描述更大将显示在两行中相同的td和td的高度将被修改,但仅限于第一个表td.如何从第一个表中记住td的高度,并在第二个表的td上添加该高度,以便使两个td具有相同的大小.在我的例子中,只显示前两个tr,其他两个显示不正常,因为第一个表td的描述.

小提琴示例:http: //jsfiddle.net/Ksb2W/45/

   for bounty  please check this example to see the difference on chrome and ie8:

http://mainpage.ueuo.com/

谢谢.

我有一个表,其中最后一列包含操作按钮,打开表下的另一部分.打开该部分时,正文页面保留在按下操作列按钮的位置.我需要使用一个jQuery,最好使用.animate,它将.html页面滚动到表格下面的已打开部分.

小提琴示例:http: //jsfiddle.net/Ksb2W/110/

如果有人可以帮助我.谢谢.

如何显示所有textarea行而不是具有垂直滚动.我已经尝试使用min-height和max-height和height:css但不起作用.

.form-control{
    width:400px;
    min-height: 100px;
    max-height: 900px;
    height: auto;}

我真的不知道是否可以用css做到这一点.

也许可以使用本机javascript,所以我尝试这样的事情

function expandtext(expand) {
    while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
        console.log("display all rows!")>
    }
}

我在这里找到了一些不错的东西,但它只增加和减少行,所以如何在不使用滚动的情况下显示所有textarea行.不需要固定高度的解决方案,需要动态或其他仅适用于Chrome浏览器的解决方案或仅适用于像Object.observe()这样的firefox.

演示

function expandtext(expand) {
  while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
    console.log("display all rows!") >
  }
}

body {
  padding: 20px;
}
.form-control {
  width: 400px;
  min-height: 100px;
  max-height: 900px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" …

我的导航菜单有问题,我已经应用了pie.js(允许你在ie6-8浏览器上使用css3的库).一见钟情,但是如果我们会在菜单上稍微玩一下,会出现错误的行为:(.要接收这种奇怪的行为,你必须在IE8的下拉菜单上左右移动光标一点点.这是通过我调用js库的函数.

$(document).ready(function(){
    if (window.PIE) {
        $('.aahov,ul#menu,ul#menu li ul').each(function(){
            PIE.attach(this);
        });
    }

});

请查看此示例:http://mainpage.ueuo.com

...并且不要忘记,仅在IE8浏览器上...

谢谢.

我创建了一个容器，如果填满了，我想应用一些“波浪动画效果”，但我有点卡住了，因为我不知道该怎么做：有人可以帮我处理那些波浪效果动画吗？

body {
  background-color: #015871;
}

.container {
  position: relative;
  width: 700px;
  height: 300px;
  margin: 100px auto;
}

.shape {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-top-right-radius: 0;
  transform: rotate(-45deg);
  float: left;
  margin-top: 50px;
  margin-left: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  position: relative;
}

.frame {
  position: absolute;
  transform: rotate(225deg);
  background-color: #00eaff;
  bottom: -80px;
  left: -80px;
  right: 0;
  height: 10px;
  width: 200%;
  animation: fill-up 1s ease infinite;
}

@keyframes fill-up {
  to {
    height: 300px;
  }
}

<div class="container"> …

我有这个函数,只有在父类没有类时才应该调用它cooling.

function inputWidth() {
        $('input[disabled="disabled"]').removeAttr("disabled").prop("readonly", true);
        $('input[type!="submit"]').focus(function(){
            if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({
                    width: 350
                }, 'slow');
                $(this).parent().addClass('cooling');
            }
        }).blur(function(){ /* lookup the original width */
            var w = $(this).attr('data-default');
            $(this).animate({
                width: w
            }, 'fast');
            $(this).parent().removeClass('cooling');
        });
   };

我正在使用材料组件，我想知道是否可以将下拉选择的大小设置为与mat-form-field的大小完全相同。

默认组件如下：

我想对其进行修改，以使下拉列表的大小与mat-form-field完全相同，如下所示：

但我不知道如何修改下拉容器的宽度和位置，请问如何修改宽度和位置。

这是该组件的一个小示例：

https://stackblitz.com/angular/rllajkqybnmy

我想在input：focus上拥有一些CSS属性，该怎么办？我的情况是；当输入获得焦点时，我想显示另一个div，那么如何仅使用CSS做到这一点？

在悬停时，我可以使用“>”来做到这一点，但是不能将焦点放在工作上，我也不明白为什么:(

所以这是我的代码：

<div class="containerTooltipXxx">
 <p class="paragraphClass">
     Some text...<br /><input type="radio" /><br />More text...
     </p><div class="blocks">
<label>Field</label>  <input></input></div>
</div>




  .containerTooltipXxx{
        padding: 20px; 
        position: relative;
        float: left;
        display: inline-block;
        border: 2px solid lime;
        margin: 50px;
    }

    .paragraphClass{display: none;}

.containerTooltipXxx:hover > .paragraphClass, .containerTooltipXxx:focus > .paragraphClass{
        display: block;
        position: absolute;
        top:-5px;
        left: 50px;
        background: red;
        opacity:.9;
    }

非常重要，无法更改html层次结构。谢谢。

小提琴