Блог

Я использовал эти стили для своей страницы

https://www.carbondesignsystem.com/components/accordion/code

Я следовал инструкциям разработчика, чтобы начать работу со стилями Carbon. Затем я вставляю код «Accordion» на свою страницу, похоже, javascript не работает, потому что accordion не отображает информацию внутри «Раздела 1» и других разделов.

https://imgur.com/a/zuhyuJP

Как я могу заставить его работать?

app.component.html

  <ul data-accordion class="bx--accordion">
  <li data-accordion-item class="bx--accordion__item">
    <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
     <div class="bx--accordion__title">Section 1 title</div>
    </button>
    <div id="pane1" class="bx--accordion__content">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </li>
  <li data-accordion-item class="bx--accordion__item">
   <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
     <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
     <div class="bx--accordion__title">Section 2 title</div>
   </button>
    <div id="pane2" class="bx--accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </li>
 </ul>
  

app.components.ts

 import { Component } from '@angular/core';
import { Modal } from 'carbon-components';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'carbone-st';
}
  

style.scss

  @import '../node_modules/carbon-components/scss/globals/scss/s-tyles.scss';
  

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ButtonModule } from "../../node_modules/carbon-components-angular";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Modal } from 'carbon-components';

@NgModule({
  declarations: [
  AppComponent
 ],
  imports: [
   BrowserModule,
   AppRoutingModule,
   ButtonModule
  ],
   providers: [],
   bootstrap: [AppComponent]
  })
 export class AppModule { }
  

Похоже, вы пытаетесь использовать ванильный аккордеон javascript из carbon-components .

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

Вы могли бы использовать его, добавив AccordionModule в свой модуль приложения, а затем вставив некоторые ibm-accordion-item s в ibm-accordion .

Пример из демо версии:

 <ibm-accordion>
    <ibm-accordion-item title="Section 1 title" (selected)="selected($event)">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat.</ibm-accordion-item>
    <ibm-accordion-item title="Section 2 title" (selected)="selected($event)">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat.</ibm-accordion-item>
    <ibm-accordion-item title="Section 3 title" (selected)="selected($event)">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat.</ibm-accordion-item>
    <ibm-accordion-item title="Section 4 title" (selected)="selected($event)">Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
    ullamco laboris nisi ut aliquip ex ea commodo consequat.</ibm-accordion-item>
</ibm-accordion>            
  

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