Использование Ibm-Carbone-стилей

Question

Я решил использовать https://angular.carbondesignsystem.com/?path=/story/welcome--to-carbon-angular этот стиль внутри моего интерфейса.

Я взял «Аккордеон» из списка и попытался внедрить его в свой проект.

Внутри моего углового проекта я создал компонент с именем table. В корневой папке я создал папку историй, а внутри историй я создал index.js.

Что мне нужно? Мне нужно иметь TableComponent и внутри этого компонента для вызова storybook (index.js).

Прямо сейчас я запускаю npm run storybook и получаю сборку историй из index.js, но без стилей, и когда я нажимаю на каждую кнопку, она не скрывает содержимое. Посмотри на экран https://imgur.com/a/m4NiGbR

2 вопроса, в которых мне нужна помощь.

1. Как связать стили с этой историей?
2. Как реализовать эту историю внутри TableComponent?

index.js

import { storiesOf, moduleMetadata } from '@storybook/angular';
import { withNotes } from '@storybook/addon-notes';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';

import { AccordionModule } from 'carbon-components-angular/accordion/accordion.module';
import { TableComponent } from '../src/app/table/table.component';

storiesOf('Accordion', module)
 .addDecorator(
   moduleMetadata({
      imports: [AccordionModule],
   })
  )
 .addDecorator(withKnobs)
  .add('Basic', () => ({
    template: `
    <ibm-accordion>
      <ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Test message</ibm-accordion-item>
            <ibm-accordion-item title="Section 2 title" (selected)="selected($event)">Test message 2</ibm-accordion-item>
            <ibm-accordion-item title="Section 3 title" (selected)="selected($event)">Test message 3</ibm-accordion-item>
            <ibm-accordion-item title="Section 4 title" (selected)="selected($event)">Test message 4</ibm-accordion-item>
        </ibm-accordion>
    `,
props: {
  items: [
    {
      content: 'one',
    },
    {
      content: 'two',
    },
    {
      content: 'three',
    },
    {
      content: 'four',
    },
  ],
  selected: action('item expanded'),
},
}))

.add('Skeleton', () => ({
    template: `
   <div style="width: 500px">
       <ibm-accordion skeleton="true">
    <ibm-accordion-item expanded="true"></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
    <ibm-accordion-item></ibm-accordion-item>
  </ibm-accordion>
        </div>
`,
 })); 

.storybook / config.js (папка в корневой папке проекта внешнего интерфейса)

import { configure } from '@storybook/angular';
import '../src/styles.scss';

function loadStories() {
 require('../stories/index.js');
}

configure(loadStories, module);

.storybook / tsconfig.json

{
  "extends": "../tsconfig.json",
   "exclude": [
   "../src/test.ts",
   "../src/**/*.spec.ts",
   "../projects/**/*.spec.ts",
   "**/*.stories.ts"
   ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ]
}

Answer 1

Во-первых, структура вашего проекта выглядит немного необычно.Вам не нужно создавать истории или использовать сборник рассказов, если это не то, что вам действительно нужно в вашем проекте.carbon-components-angular использует его для демонстраций.

Дайте carbon-angular-starter хорошую базу для проектов любого размера.Мы используем его и рекомендуем для внутреннего использования.

В пользовательских таблицах

Если вы хотите поместить не строковые значения в ячейки (как здесь), вы должны использовать пользовательскиешаблоны и предоставьте для них данные (при необходимости).

Для шаблона вашего компонента необходимо:

Your table:
<ibm-table [model]="model"></ibm-table>

<!-- example template: -->
<ng-template #customTableItemTemplate let-data="data">
    <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>
</ng-template>

Код вашего компонента нуждается в следующем:

customTableItemTemplate: TemplateRef<any>; // provides access to template based on #customTableItemTemplate

this.customModel.data = [
    [new TableItem({data: "asdf"}), new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate})],
    [new TableItem({data: "csdf"}), new TableItem({data: "swer"})],
    [new TableItem({data: "bsdf"}), new TableItem({data: {name: "Alice", surname: "Bob"}, template: this.customTableItemTemplate})],
    [new TableItem({data: "csdf"}), new TableItem({data: "twer"})],
 ];

let-data="data"дает вам доступ к данным из new TableItem({data: {name: "Lessy", link: "/table"}, template: this.customTableItemTemplate}), и вы можете просто получить к ним доступ с помощью data.myProperty, как в <a [routerLink]="data.link">{{data.name}} {{data.surname}}</a>

В вашем случае шаблон будет содержать что-то вроде:

<ng-template #customTableItemTemplate>
      <ibm-accordion>
            <ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Test message</ibm-accordion-item>
            <ibm-accordion-item title="Section 2 title" (selected)="selected($event)">Test message 2</ibm-accordion-item>
            <ibm-accordion-item title="Section 3 title" (selected)="selected($event)">Test message 3</ibm-accordion-item>
            <ibm-accordion-item title="Section 4 title" (selected)="selected($event)">Test message 4</ibm-accordion-item>
        </ibm-accordion>
</ng-template>

и можетне нужно использовать data.

Более подробная информация в Угловая документация * Углеродные компоненты .