Угловая обёртка компонентов портит стили Bulma - PullRequest
Новая
       9

Угловая обёртка компонентов портит стили Bulma

0 голосов
/ 29 июня 2018

Я немного запутался, как решить эту проблему с помощью стилей моего приложения Angular, используя Bulma. Я думаю, что суть проблемы в этом кусочке Sass: 

%block
  &:not(:last-child)
    margin-bottom: 1.5rem

=block
  @extend %block

Когда у меня есть (скажем) две вкладки рядом друг с другом, они получают 1,5-граммовый запас разделения. Но если я создаю компонент с одинаковым содержимым вкладки и помещаю два компонента рядом друг с другом, заполнение пропадает, по-видимому, из-за того, что все, что он делает, не удерживается, когда содержимое изолируется в оболочке компонента Angular.

Демонстрация Stackblitz

app.component.html 

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<tabs-component></tabs-component>
<tabs-component></tabs-component>

tabs.component.html 

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

Отображаемый результат:

tabs not being separate

1 Ответ

0 голосов
/ 29 июня 2018

Ваша прибыль сокращается. Вы можете добавить классы к его хосту и удалить оболочку div. Это можно сделать, используя @HostBinding();

Компонент: 

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'tabs-component',
  templateUrl: './tabs.component.html'
})
export class TabsComponent  {
 @HostBinding('class') classess = 'tabs is-medium'; 
}

HTML: 

<ul>
  <li><a href="javascript:void(0);">Foo</a></li>
  <li><a href="javascript:void(0);">Foo</a></li>
</ul>
...