Accordion

Avaa ChatGPT:ssä

Varjo dwc-accordion 25.12

Java API

Accordion-komponentti tarjoaa pystysuoran kokoelman taitettavia paneeleja. Jokaisella paneelilla on napsautettava otsikko, joka vaihtaa sen sisällön näkyvyyttä. AccordionPanel-paneelia voidaan käyttää itsenäisenä paljastusosiona tai ryhmitellä osaksi Accordion-komponenttia, mikä koordinoi laajentamis- ja supistamiskäyttäytymistä useiden paneelien kesken.

Milloin käyttää akneliitä

Aknelit toimivat hyvin usein kysytyissä kysymyksissä, asetussivuilla ja vaiheittaisissa prosesseissa, joissa kaikkien sisältöjen paljastaminen kerralla luo ylivoimaisen käyttöliittymän. Jos osiot ovat yhtä tärkeitä ja käyttäjät hyötyvät niiden näkemisestä samanaikaisesti, harkitse välilehtiä sen sijaan.

AccordionPanel dwc-accordion-panel

AccordionPanel on akneli-järjestelmän ydinrakennusosa. Anna konstruktorille merkkijono otsikkoa varten, ja lisää sitten lapsikomponentteja täyttämään runko. Paneeli toimii itsenäisesti ilman ympäröivää Accordion-ryhmää, mikä tekee siitä hyödyllisen kevyen paljastuswidgetin, kun tarvitset vain yhden taitettavan osion. Parametriton konstruktori on myös käytettävissä, jos haluat määrittää paneelin kokonaan rakentamisen jälkeen.

// Ainoastaan otsikko - lisää runko erikseen
AccordionPanel panel = new AccordionPanel("Otsikon nimi");
panel.add(new Paragraph("Runko sisältö menee tänne."));

// Otsikko ja runko sisältö annettuna suoraan konstruktorissa
AccordionPanel panel = new AccordionPanel("Otsikko", new Paragraph("Runko sisältö."));

Avaminen ja sulkeminen

Ohjaa auki/suljettu-tilaa ohjelmallisesti milloin tahansa. isOpened() on hyödyllinen, kun sinun täytyy lukea nykyinen tila ennen päätöstä toimintatavasta. Esimerkiksi saatat vaihdella paneelia vastakkaiseen tilaan tai ehdollisesti näyttää tai piilottaa muita käyttöliittymän osia.

// Laajenna paneeli
panel.open();

// Supista paneeli
panel.close();

// Palauttaa true, jos paneeli on tällä hetkellä laajennettu
boolean isOpen = panel.isOpened();

Käytä setLabel()-metodia päivittääksesi otsikkoteksti rakentamisen jälkeen. setText() on alias samalle toiminnalle, joten etiketti voidaan pitää synkronoituna dynaamisten tietojen kanssa:

panel.setLabel("Päivitetty etiketti");

Akneliryhmät

Useiden AccordionPanel-instanssien pakkaaminen Accordion-komponentin sisään luo koordinoidun ryhmän. Oletuksena ryhmä käyttää yksittäismoodia: avatessaan yhden paneelin kaikki muut supistuvat automaattisesti, pitäen vain yhden osion näkyvissä kerrallaan. Tämä oletus on tarkoituksellinen, se pitää käyttäjän keskittyneenä yhteen sisältöön ja estää sivun muuttumisen visuaalisesti ylivoimaiseksi, kun paneeleilla on huomattavaa runko-osaa.

Paneelit rakennetaan itsenäisesti ja siirretään Accordion-komponenttiin, joten voit määrittää jokaisen ennen ryhmittämistä. Useita erillisiä Accordion-instansseja voi myös olla samassa sivussa — jokainen ryhmä hallitsee omaa tilaansa itsenäisesti, joten paneelin laajentaminen yhdessä ryhmässä ei vaikuta toiseen.

AccordionPanel panel1 = new AccordionPanel("Mikä on webforJ?");
AccordionPanel panel2 = new AccordionPanel("Miten ryhmitellyt paneelit toimivat?");
AccordionPanel panel3 = new AccordionPanel("Voinko saada useita ryhmiä?");

Accordion accordion = new Accordion(panel1, panel2, panel3);

Monimutkainen tila

Monimutkainen tila mahdollistaa minkä tahansa määrän paneeleja pysymään laajennettuna samanaikaisesti. Tämä on hyödyllistä, kun käyttäjien on verrattava useiden osioiden sisältöjä kerralla, tai kun jokainen paneeli on niin lyhyt, että useiden laajentaminen kerralla ei luo sekavaa käyttöliittymää.

accordion.setMultiple(true);

Monimutkaisen tilan ollessa aktiivinen, kaikki ryhmän paneelit voidaan laajentaa tai supistaa kerralla käyttämällä joukkometodeja:

// Laajenna jokainen paneeli ryhmässä
accordion.openAll();

// Supista jokainen paneeli ryhmässä
accordion.closeAll();

Yksittäismoodin rajoitus

openAll() on saatavilla vain, kun monimutkainen tila on käytössä. Sen kutsuminen yksittäismoodissa ei vaikuta. closeAll() toimii molemmissa moodissa.

Poissaoleva tila

Yksittäisiä paneeleja voidaan estää estämään käyttäjävuorovaikutus, samalla kun ne pysyvät näkyvinä. Tämä on kätevää lataustilanteissa tai kun tietyt osiot eivät ole ehdollisesti saatavilla, näyttäen paneelin rakenteen ilman aikaisia vuorovaikutuksia. Estetty paneeli, joka oli jo avattu, pysyy laajennettuna, mutta sen otsikkoa ei voi enää napsauttaa sulkeakseen sen. Accordion-ryhmän estäminen kohdistaa estetyn tilan kaikkiin sisältyviin paneeleihin kerralla, joten sinun ei tarvitse silmukoida paneeleja erikseen.

// Estä yksi paneeli
panel.setEnabled(false);

// Estä kaikki paneelit ryhmässä
accordion.setEnabled(false);

Paneelien mukauttaminen

Yksinkertaisten otsikoiden ja avaus/sulkemiskäyttäytymisen lisäksi jokainen AccordionPanel tukee rikkaampaa mukauttamista sekä sen otsikkosisällölle että laajentamis/supistamiskeholle.

Mukautettu otsikko

Paneelin otsikko renderöi sen etiketin tavallisena tekstinä oletuksena. Käytä addToHeader()-metodia korvataksesi tämän tekstin yhdellä tai useammalla komponentilla, mikä tekee ikoni, vyöhyke-ilmoittimet tai muut rikkaat merkintäelementit mukaan lukien paneelin etiketin helposti mahdolliseksi. Tämä on erityisen hyödyllistä kojelaudoilla tai asetuspaneeleissa, joissa kunkin osion otsikon tulee välittää ylimääräistä kontekstiä yhdellä silmäyksellä, kuten kohdemäärä, varoitusmerkki tai suoritusaste, ilman että käyttäjän tarvitsee ensin laajentaa paneelia.

FlexLayout headerContent = FlexLayout.create()
    .horizontal()
    .build()
    .setSpacing("var(--dwc-space-s)");

headerContent.add(FeatherIcon.SETTINGS.create(), new Span("Mukautettu otsikko ikonilla"));
panel.addToHeader(headerContent);

Etiketin korvaaminen

addToHeader()-metodin kautta lisätty sisältö korvasi täysin oletusarvoisen etikettit tekstin. setLabel() ja setText() toimivat edelleen yhdessä addToHeader()-metodin kanssa, mutta koska otsikkokohta vie visuaalista etusijaa, etikettittekstiä ei näytetä, ellei sitä sisällytetä selkeästi slotattuun sisältöön.

Mukautettu ikoni

Laajentamis/sulkemisindikointi oletusarvoisesti näkyy viuhkamaisena kuvana, joka näkyy sekä avoimissa että suljetuissa tiloissa. setIcon()-metodia käytetään korvaamaan se millä tahansa Icon komponentilla, mikä on hyödyllistä brändätyissä ikonisivuissa tai silloin, kun toinen visuaalinen metafora sopii sisältöön paremmin. Nullin välittäminen palauttaa oletusarvoisen viuhkan. getIcon() palauttaa tällä hetkellä asetetun ikonin tai null, jos oletusviuhkaa käytetään.

// Korvaa oletusviuhka plus-ikonilla
panel.setIcon(FeatherIcon.PLUS.create());

// Palauta oletusviuhka
panel.setIcon(null);

Sisäkkäiset aknelit

Aknelit voidaan sijoittaa muiden akneli-paneelien sisään, mikä on hyödyllistä hierarkkisen sisällön, kuten luokiteltujen asetusten tai monitasoisten navigaatioiden, esittämisessä. Lisää sisempi Accordion ulompaan AccordionPanel-paneeliin kuten mikä tahansa muu lapsikomponentti. Pidä sisäkkäisyys matalana. Yksi tai kaksi tasoa on yleensä riittävästi. Syvemmät hierarkiat ovat vaikeampia navigoida ja usein osoittavat, että sisällön rakenne tarvitsee pohdintaa.

AccordionPanel innerA = new AccordionPanel("Sisäinen Paneeli A");
AccordionPanel innerB = new AccordionPanel("Sisäinen Paneeli B");
Accordion innerAccordion = new Accordion(innerA, innerB);

AccordionPanel outer = new AccordionPanel("Ulkopuolinen Paneeli");
outer.add(innerAccordion);

Tapahtumat

AccordionPanel laukaisee tapahtumia joka vaiheessa vaihtojen elinkaaren aikana. Kolme tapahtumatyyppiä kattaa erilaisia hetkiä, joten valitse sen mukaan, milloin logiikkasi tarvitsee suorittaa:

Tapahtuma	Laukaisee
AccordionPanelToggleEvent	Ennen kuin tila muuttuu
AccordionPanelOpenEvent	Paneelin avauduttua täysin
AccordionPanelCloseEvent	Paneelin sulkeuduttua täysin

panel.onToggle(e -> {
    // Laukaisee ennen paneelin tilan muuttumista.
    // e.isOpened() heijastaa siirtymätilaa, ei nykyistä tilaa.
    String direction = e.isOpened() ? "avaamassa" : "sulkemassa";
});

panel.onOpen(e -> {
    // Laukaisee paneelin ollessa täysin avattu — hyvä laiskasti lataavalle sisällölle.
});

panel.onClose(e -> {
    // Laukaisee paneelin ollessa täysin suljettu — hyvä siivoukselle tai yhteenveto päivityksille.
});

Tyylittely

Loading...