Question

我想知道是否有人在对Angular Material组件进行大量修改方面取得了哪些成功？

例如，我尝试修改其简单的表单字段组件https://material.angular.io/components/form-field/overview 看起来和行为就像我使用纯html / css：

创建的自定义输入

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
  <span class="input-wrapper">
    <input class="gs-ng-input" type="text"  required>
    <label>Name</label>
  </span>
</div>

</body>
</html>

CSS

.container {
  padding: 50px;
}

.input-wrapper {
  border: 1px solid #000;
  display: inline-block;
}

.gs-ng-input, .gs-ng-input:focus {
  border: none;
  outline: none;
  width: 338px;
  height: 42px;
  font-size: 25px;
  padding-left: 10px;
}

.input-wrapper:focus-within {
  border: none;
}

.input-wrapper {
  box-sizing: border-box;
  position: relative;
}

.input-wrapper::before, .input-wrapper::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.input-wrapper::before, .input-wrapper::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.input-wrapper::before, .input-wrapper::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.input-wrapper::before {
  border-top: 2px solid #9bdaf1;
  border-bottom: 2px solid #9bdaf1;
  -webkit-transform: scale3d(0, 1, 1);
          transform: scale3d(0, 1, 1);
}

.input-wrapper::after {
  border-left: 2px solid #9bdaf1;
  border-right: 2px solid #9bdaf1;
  -webkit-transform: scale3d(1, 0, 1);
          transform: scale3d(1, 0, 1);
}

.input-wrapper:focus-within::before, .input-wrapper:focus-within::after {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

.input-wrapper:focus-within {
  box-shadow: 0 0 4px 0 rgba(0, 191, 231, 0.4);
  transition: box-shadow .6s ease-in;
}

.input-wrapper label          {
  color:#999; 
  font-size:25px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:10px;
  top:7px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.input-wrapper:focus-within  label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

.input-wrapper input:valid + label {
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

https://jsfiddle.net/za2f6r3L/

修改Angular Material组件的结构和样式

0 个答案: