Siirry pääsisältöön

Card

Avaa ChatGPT:ssä
Varjo dwc-card 26.02
Java API

Card-komponentti tarjoaa alustan, jolla ryhmitellään liittyvää sisältöä ja toimintoja yhdeksi itemiksi. Se tukee erikoisalueita kuvalle, otsikolle, sisällölle ja alatunnisteelle sekä suuntaa, korkeutta, jakajia ja tiheysasetuksia, jotka säätelevät kortin esitystä.

Kortin luominen​

Luo Card välittämällä sisältö sen konstruktorille, joka asettaa tämän sisällön kortin kehoon. Kehon voi myös täyttää luomisen jälkeen add() tai addToBody() avulla, jotka tekevät samaa.

Card card = new Card(new Paragraph("Myynti kasvoi kaikilla alueilla."));

// Vastaava
Card card = new Card();
card.addToBody(new Paragraph("Myynti kasvoi kaikilla alueilla."));

Tyhjällä Card:lla näkyy vain sen kehys, ei mitään muuta.

Kortin alueet​

Jokainen alue, paitsi keho, täytetään sen omalla slotilla, ja alue, jonka slotissa ei ole sisältöä, ei näy. Card, jolla ei ole alatunnistetta, sulkeutuu kehon jälkeen, ja Card, jolla on vain keho, on kehystetty sisältölohko.

  • addToFigure() pitää kortin kuvan, kuten kuvan, videon tai kaavion. Sen sijainti riippuu kortin suunnasta.
  • addToIcon() asettaa johtavan visualin otsikkoriviin ja hyväksyy minkä tahansa komponentin, mukaan lukien Icon tai Avatar.
  • addToTitle() asettaa otsikon otsikkoriviin.
  • addToCaption() lisää toisen rivin otsikon alle, mikä on hyödyllistä päivämäärälle, kirjoittajalle tai statukselle.
  • addToHeaderActions() täyttää otsikkorivin lopun, yleensä Button- tai valikkotoiminnolla.
  • addToFooter() sulkee Card:n, yleensä toiminnolla tai metatiedoilla.
Card card = new Card(new Paragraph("Myynti kasvoi kaikilla alueilla."));
card.addToFigure(new Img("cover.png", "Raportin kansi"))
    .addToIcon(TablerIcon.create("chart-bar"))
    .addToTitle(new H3("Kuukausiraportti"))
    .addToCaption(new Paragraph("Heinäkuu 2026"))
    .addToHeaderActions(new Button("Jaa"))
    .addToFooter(new Button("Lue lisää"));
Otsikko ja saavutettava nimi

Card ilmoittaa itsestään alueena, ja otsikosta tulee sen saavutettava nimi. Käytä siellä otsikkoelementtiä, kuten H3, jotta ruudunlukijan käyttäjät voivat löytää Card:n sivun otsikkorakenteen kautta.

Näytä koodi

Suunta​

Suunta säätelee, missä kuvasto sijaitsee suhteessa muihin alueisiin, ja se asetetaan setOrientation() avulla.

Kortit ovat oletuksena pystyssä, joten ne pinotaan kuvasto ylöspäin otsikon, sisällön ja alatunnisteen ylle. Tämä soveltuu kortteihin, jotka on järjestetty ruudukkoon, jossa jokainen vie kapean sarakkeen. Jos setOrientation()-metodille välitetään Card.Orientation.HORIZONTAL, kortista tulee vaakasuora, jolloin kuvasto sijoitetaan vierekkäin näiden alueiden kanssa.

card.setOrientation(Card.Orientation.HORIZONTAL);
Näytä koodi

Koska asetus liikuttaa vain kuvastoa eikä mitään muuta, Card, jolla ei ole kuvastoa, näyttää samalta kummassakin suunnassa.

Korkeus ja reuna​

Kaksi asetusta määrittää, kuinka kauas Card erottuu sen taustalla olevasta sivusta. setShadow() soveltaa arvoa varjopisteasteikosta, joka vaihtelee NONE:sta XSMALL:iin, SMALL:iin, MEDIUM:iin, LARGE:iin ja XLARGE:iin aina XXLARGE:iin. setBorderless() säätelee, piirtääkö Card reunansa. Oletusarvot ovat Shadow.XSMALL ja reuna piirretty.

Asetukset ovat riippumattomia, joten mitä tahansa varjoa voidaan yhdistää reunalla tai ilman.

Näytä koodi

Jakajat ja laajus​

Vaikka korkeus- ja reunasetukset säätelevät, kuinka Card istuu sivua vasten, jakajat ja laajus säätelevät luettavia alueita itse kortissa.

setDivided(true) piirtää jakajan otsikon jälkeen ja alatunnisteen eteen, mikä auttaa, kun alueet sisältävät tiheää sisältöä. Jakajat ovat oletusarvoisesti pois päältä. Jakaja alueelle, jossa ei ole sisältöä, ei näy, joten jaoteltu kortti ilman alatunnistetta näyttää vain yhden jakajan, otsikon alla. Jakajat ovat painavampia tasaisilla korteilla, joissa ei ole kehystä, joka tekisi sen työn.

setExpanse() säätelee tiheyttä, ohjaamalla pehmustetta, alueiden väliin jäävää tilaa ja otsikon sekä kuvauksen kokoa. Card käyttää jaettua Expanse-enumeraatiota, joka tarjoaa NONE, XSMALL, SMALL, MEDIUM, LARGE ja XLARGE, jossa MEDIUM on oletus. Pienemmät laajudet sopivat hallintapaneelin laatikoihin ja sivupalkkeihin, joissa useat kortit jakavat näytön.

Seuraava esimerkki näyttää kaksi Card-komponenttia jakajilla. Yksi Card käyttää Expanse.LARGE, kun taas toinen käyttää Expanse.SMALL:

Näytä koodi

Napsautustapahtumat​

Card-komponentti toteuttaa HasElementClickListener, joten kuuntelija, joka on rekisteröity onClick() tai addClickListener() avulla, vastaanottaa ElementClickEvent:n. Tämä tekee koko pinnasta yhden kohteen.

card.onClick(event -> Router.getCurrent().navigate(new Location("/reports/july")));
Klikkaukset Card:n sisällä

Klikkaukset komponentteihin, jotka sijaitsevat Card:n sisällä, saavuttavat myös Card:n, joten Card, jolla on oma kuuntelija, laukaisee sen, kun käyttäjä painaa Button:ia otsikkotoiminnoissa tai alatunnisteessa. Lisää kuuntelija Card:lle, kun Card:lla on yksi selkeä toiminto, ja varaa sisällä olevat painikkeet toiminnoille, joita Card itse ei suorita.

Tyylitys​

Loading...