Siirry pääsisältöön

Badge

Avaa ChatGPT:ssä
Varjo dwc-badge 25.12
Java API

Badge on tiivistetty, visuaalisesti erottuva etiketti, jota käytetään tilan, laskentojen tai lyhyiden kontekstuaalisten tietojen välittämiseen. Indikaattorin laskemiseen, kohteen merkitsemiseen "Uutena" tai varoitukseen kiinnittämiseen, tarrat tarjoavat kevyen tavan esittää nämä tiedot suoraan käyttöliittymässä.

Käyttämällä Badge

Tarrat toimivat hyvin ilmoituslaskentojen, tilaetikettien ja lyhyen metadatan, kuten versiomerkkien tai julkaisutilojen yhteydessä. Pidä tarran teksti yhdessä tai kahdessa sanassa, jotta etiketti on helposti luettavissa yhdellä silmäyksellä.

Luominen tarralla​

Yksinkertaisin Badge ottaa tekstimerkkijonon. Voit myös siirtää BadgeTheme-teeman suoraan konstruktorissa asettaaksesi visuaalisen tyylin heti. Ilman argumentteja oleva konstruktori on käytettävissä, kun tarvitset rakentaa tarran dynaamisesti ja konfiguroida sen luomisen jälkeen.

Badge badge = new Badge("Uusi");

// Teeman kanssa
Badge primary = new Badge("Esitelty", BadgeTheme.SUCCESS);

// Rakennettu dynaamisesti
Badge status = new Badge();
status.setLabel("Odottaa");
status.setTheme(BadgeTheme.WARNING);

Etiketti​

Voit asettaa tai päivittää tarran tekstisisältöä milloin tahansa käyttämällä setLabel(). setText()-metodi on alias samalle toimenpiteelle; käytä kumpaa tahansa, joka tuntuu luonnollisemmalta asiayhteydessä. Molemmilla on vastaavat getterit, getLabel() ja getText(), jos sinun tarvitsee lukea nykyinen arvo takaisin.

Badge badge = new Badge();
badge.setLabel("Päivitetty");

// Vastaava
badge.setText("Päivitetty");

// Lue takaisin arvo
String current = badge.getLabel();

Ikonit​

Joskus visuaalisempi lähestymistapa on hyödyllinen tiedon välittämiseksi Badge-elementillä. Tarrat tukevat ikoneita sisältävää sisältöä. Siirrä ikoni yhdessä tekstin kanssa käyttämällä Badge(String, Component...)-konstruktoria, tai siirrä ikoni yksin luodaksesi vain ikonista tarran. Kun yhdistät tekstin kanssa, ikoni renderöityy etikettisi vasemmalle puolelle.

Ikoniviimeistellyt tarrat toimivat erityisen hyvin tiheissä asettelussa, joissa lyhyt sana tuntuu sekavalta. Ikonin yhdistäminen tekstin kanssa on hyvä kompromissi, kun pelkkä ikoni voi olla epäselvä. Tilasymboli ymmärretään yleisesti itsessään, mutta lyhyen tekstietiketin lisääminen poistaa arvailuja ensikertalaisten osalta. Voit siirtää useita komponentteja konstruktorille, jos sinun tarvitsee koostaa rikkaampi prefiksi, vaikkakin käytännössä pelkkä ikoni on yleisin malli.

Näytä koodi

// Ikoni tekstin kanssa
Badge done = new Badge("Valmis", FeatherIcon.CHECK_CIRCLE.create());
done.setTheme(BadgeTheme.SUCCESS);

// Vain ikoni
Badge check = new Badge(FeatherIcon.CHECK.create());
check.setTheme(BadgeTheme.SUCCESS);

Käyttö muissa komponenteissa​

Painikkeet​

Liitä Badge Button-elementtiin käyttämällä setBadge(). Tarra näkyy painikkeen yläoikeassa kulmassa, peittäen painikkeen reunan. Tämä on yleinen malli ilmoituslaskentojen osalta työkalupalkkitoiminnoissa tai kuvakepainikkeissa. Koska tarra on itsenäinen komponentti, se on täysin riippumaton painikkeen omasta teemasta ja koosta. Voit yhdistää pääpainikkeen vaaratarran kanssa tai kummituspainikkeen onnistumistarran kanssa, ja jokainen yhdistelmän puoli tyylittelee itsensä ilman ristiriitoja. Laskennan päivittäminen myöhemmin on yhtä yksinkertaista kuin kutsumalla badge.setLabel() uudella arvolla; painiketta ei tarvitse koskea.

Näytä koodi

Tabbattu paneeli​

Lisää Badge suffiksina Tab:lle käyttämällä setSuffixComponent(). Tämä on luonnollinen sovitus inbox-tyylisille laskennalle tai tilaindikaattoreille jokaisella välilehdellä. Tämä on sellainen malli, jota näet sähköpostiohjelmissa tai tehtävienhallintaohjelmissa, joissa on tärkeää viestiä toimintaa jokaisessa osiossa yhdellä silmäyksellä. Tarra sijaitsee välilehden etiketin jälkimmäisessä reunassa minkä tahansa prefiksisisällön jälkeen, ja se pysyy näkyvissä riippumatta siitä, mikä välilehti on aktiivinen. Tämä jatkuvuus on tarkoituksellinen: passiivisten välilehtien tarran piilottaminen vaikeuttaisi sen tietämistä, mitkä osiot kaipaavat huomiota ilman siirtymistä jokaiselle niistä.

Näytä koodi

Tyylittely​

Tarrat tukevat useita tyylittelyulottuvuuksia: teemavärejä merkityksen välittämiseksi, laajuuskokoa koon hallitsemiseksi sekä CSS-ominaisuuksia hienosäätöön.

Teemat​

Kuten monet komponentit webforJ:ssä, Badge tulee neljätoista teemaa: seitsemän täytettyä ja seitsemän ääriviivateemaa.

Täytetyt teemat käyttävät kiinteää taustaa ja laskevat automaattisesti tekstivärin, joka täyttää kontrastivaatimukset. Ääriviivateemat käyttävät sen sijaan sävytettyä taustaa värillisellä reunalla, mikä tekee niistä hienovaraisemman vaihtoehdon, kun haluat, että tarra täydentää ympäröivää sisältöä eikä dominoi sitä.

Sovita teema käyttämällä setTheme()-metodia tai konstruktorin kautta.

Näytä koodi

Mukautettu väri​

Jos sisäänrakennetut teemat eivät vastaa väriasi, aseta mukautettu siemenväri käyttämällä --dwc-badge-seed CSS-ominaisuutta. Tästä yhdestä arvosta tarra automaattisesti johtaa taustan, tekstin ja reunavärin, joten jokainen yhdistelmä pysyy luettavana ilman, että sinun täytyy määrittää kutakin erikseen. Tämä tarkoittaa, että voit brändätä tarran mihin tahansa väriin suunnittelujärjestelmässäsi luottavaisesti. Hue, Saturation ja Lightness (HSL) -arvot ovat erityisen käteviä tässä; sävyn vaihtaminen riittää tuottamaan täysin erilaisen väri-perheen säilyttäen samalla kontrastin.

Badge badge = new Badge("Mukautettu");
badge.setStyle("--dwc-badge-seed", "hsl(262, 52%, 47%)");

Koko​

Käytä setExpanse() hallitaksesi tarran kokoa. Saatavana on yhdeksän kokoa, jotka vaihtelevat XXXSMALL-koosta XXXLARGE-kokoon, ja oletusarvo on SMALL.

Näytä koodi

Osat ja CSS-muuttujat​

Loading...