0

我正在使用带有 angularjs2 的 Kendo ui

我正在使用剑道标签

下面是剑道标签的链接。

http://www.telerik.com/kendo-angular-ui/components/layout/tabstrip/

但是即使我给出底部边距,Tabstrip 也不会出现在屏幕底部。下面是代码。

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
          <template kendoTabContent>
            <p>
            Paris is the capital and most populous city of France. It has an area of 105 square kilometres (41 square miles) and a population in 2013 of 2,229,621 within its administrative limits. The city is both a commune and department, and forms the centre and headquarters of the Île-de-France, or Paris Region, which has an area of 12,012 square kilometres (4,638 square miles) and a population in 2014 of 12,005,077, comprising 18.2 percent of the population of France.
            </p>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'New York City'">
          <template kendoTabContent>
            <p>
              The City of New York, often called New York City or simply New York, is the most populous city in the United States. With an estimated 2015 population of 8,550,405 distributed over a land area of just 305 square miles (790 km2), New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world.
            </p>
            <p>
              A global power city, New York City exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment, its fast pace defining the term New York minute. Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
            </p>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tallinn'">
          <template kendoTabContent>
            <p>
          hi
            </p>
            <p>
            hello
            </p>
          </template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Sydney'" [disabled]="true"></kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})
class AppComponent {}

谁能帮助我如何实现这一点。

4

1 回答 1

0

因为在 angular 2 kendo-tabstrip 组件中没有为设计 css 渲染,所以你可以像这样改变你的样式:

styles: [`
    div[role="tabpanel"] p {
        margin: 0;
        padding: 8px;
    }
`]
于 2017-08-26T06:57:06.123 回答