Question

如何向元素添加Material设计元素？在我的情况下，我想将一个fab按钮添加到div，但最终结果看起来没什么应该的。这是我的代码：

const div = document.createElement('mat-card');
div.classList.add('mat-card');

有效，它创建了一张mat-card，但我想在里面添加一个fab-button：

div.innerHTML = 'Hat #34<br/>
                 <button mat-icon-button>
                   <mat-icon>favorite</mat-icon>
                 </button>`;

这没有任何css应用于它，所以它看起来像一个丑陋的旧按钮。任何人都知道我会怎么做才能让它发挥作用？

更新：

我煞费苦心地复制了现有的.....并没有奏效。我的意思是，确定它看起来很好，HTML说它是相同的，除了涟漪效果和类似的东西不起作用。它仍会触发点击事件...虽然不是很好......有关如何使其正常工作的任何建议（涟漪效应工作等）以下是我所做的：

const button = document.createElement('button');
button.setAttribute('_ngcontent-c14', '');
button.classList.add('mat-icon-button');
button.setAttribute('mat-icon-button', '');
button.addEventListener('click', (ev) => this.openJob(ev), false);

const buttonDiv = document.createElement('div');
buttonDiv.classList.add('mat-button-ripple');
buttonDiv.classList.add('mat-ripple');
buttonDiv.classList.add('mat-button-ripple-round');
buttonDiv.setAttribute('matripple', '');
buttonDiv.setAttribute('ng-reflect-trigger', '[object HTMLButtonElement]');
buttonDiv.setAttribute('ng-reflect-centered', 'true');
buttonDiv.setAttribute('ng-reflect-disabled', 'false');

const buttonOverlayDiv = document.createElement('div');
buttonOverlayDiv.classList.add('mat-button-focus-overlay');

const buttonSpan = document.createElement('span');
buttonSpan.classList.add('mat-button-wrapper');

const matIcon = document.createElement('mat-icon');
matIcon.setAttribute('_ngcontent-c14', '');
matIcon.classList.add('mat-icon');
matIcon.classList.add('material-icons');
matIcon.setAttribute('role', 'img');
matIcon.setAttribute('aria-hidden', 'true');
matIcon.innerHTML = 'favorite';

buttonSpan.appendChild(matIcon);
button.appendChild(buttonSpan);
button.appendChild(buttonDiv);
button.appendChild(buttonOverlayDiv);
div.appendChild(button);

Angular - 以编程方式添加Material Design元素

0 个答案: