Siirry pääsisältöön

Splitter

Avaa ChatGPT:ssä
Varjo dwc-splitter 24.00
Java API

Splitter-komponentti, joka on suunniteltu jakamaan ja koon muuttamaan sisältöä sovelluksessasi, kapseloi kaksi säädettävää komponenttia: master- ja detail-komponentit. Jakaja erottaa nämä komponentit, jolloin käyttäjät voivat dynaamisesti säätää kunkin komponentin kokoa mieltymystensä mukaan.

Luo jakaja​

Luo Splitter välittämällä kaksi komponenttia sen konstruktorille. Ensimmäisestä tulee master-paneeli ja toisesta detail-paneeli.

Näytä koodi

Minimi- ja maksimikoko​

Splitter-komponentti tarjoaa metodeja paneelien minimien ja maksimi kokojen asettamiseen, mikä antaa sinun hallita komponenttien koon muuttamis käyttäytymistä Splitter-komponentissa. Kun käyttäjät yrittävät muuttaa paneeleita yli määritettyjen minimi- tai maksimikokojen, jakajakomponentti noudattaa näitä rajoituksia varmistaen, että paneelit pysyvät määritettyjen rajojen sisällä.

Kokojen asettaminen​

setMasterMinSize(String masterMinSize)-metodi määrittelee minimikoon master-paneelille splitterissä. Vastaavasti setMasterMaxSize(String masterMaxSize)-metodi määrittelee maksimi koon master-paneelille.

Voit määrittää kokoja käyttäen mitä tahansa kelvollista CSS-yksikköä, kuten alla on esitetty:

Näytä koodi

Suunta​

Voit määrittää suuntaa Splitter-komponentissa, jolloin voit luoda asetteluja, jotka on räätälöity erityisiin suunnittelutarpeisiin. Määrittämällä suunnan komponentti järjestää paneelit vaaka- tai pystysuunnassa, tarjoten monipuolisuutta asettelun suunnittelussa.

Määrittääksesi suunta, käytä tuettuja orientaatioita Enum:ia määrittämään, pitäisikö Splitter-komponentin renderöidä vaakasuoraan tai pystysuoraan:

Näytä koodi

Suhteellinen sijainti​

Aseta jakajapalkin alkuperäinen sijainti Splitter-komponentissa käyttämällä setPositionRelative-metodia. Tämä metodi ottaa numeron arvona välillä 0–100, joka edustaa prosenttiosuutta annetusta tilasta Splitterissä, ja näyttää jakajan annetussa prosentissa kokonaisleveyttä:

Näytä koodi

Pesiminen​

Jakajien pesiminen mahdollistaa monimutkaisten asettelujen luomisen säädettävillä paneeleilla. Se mahdollistaa monimutkaisten käyttöliittymien luomisen, joissa on yksityiskohtainen hallinta sisällön järjestelyyn ja koon muuttamiseen.

Pesimällä Splitter-komponentteja, voit instansioida uusia Splitter-instansseja ja lisätä ne lapsina olemassa oleville Splitter-komponenteille. Tämä hierarkkinen rakenne mahdollistaa monitason asettelujen luomisen joustavilla koon muutostaidoilla. Seuraava ohjelma havainnollistaa tätä:

Näytä koodi

Automaattinen tallennus​

Splitter-komponentti sisältää Automaattisen tallennuksen vaihtoehdon, joka tallentaa paneelien koon tilan paikalliseen tallennukseen, jotta mitat pysyvät samana latausten välillä.

Kun asetat automaattisen tallennuksen kokoonpanon, Splitter-komponentti tallentaa automaattisesti paneelien koon tilan verkkoselaimen paikalliseen tallennukseen. Tämä varmistaa, että paneelien käyttäjien valitsemat koot säilyvät sivun latausten tai selaimen istuntojen välillä, vähentäen manuaalisten säätöjen tarvetta.

Tilan puhdistaminen​

Palauttaaksesi Splitter-komponentin ohjelmallisesti oletusasetuksiin ja -mittoihin, kutsu cleanState()-metodia poistaaksesi kaikki tallennetut tila tiedot, jotka liittyvät Splitter-komponenttiin verkkoselaimen paikallisesta tallennuksesta.

Näytä koodi

Edellisessä demonstraatiossa jokainen Splitter-instanssi aktivoi Automaattisen tallennuksen ominaisuuden kutsumalla setAutosave-metodia. Tämä varmistaa, että paneelien koot tallennetaan automaattisesti paikalliseen tallennukseen. Näin ollen, kun lataa selain, näiden jakajien koot pysyvät samoina.

"Nollaa tila" -painiketta napsauttamalla kutsutaan cleanState()-metodia ja päivitetään selaimen ikkuna näyttämään alkuperäiset mitat.

Tyylittely​

Loading...

Parhaat käytännöt​

Varmistaaksesi optimaalinen käyttäjäkokemus Splitter-komponentin käytön aikana, ota huomioon seuraavat parhaat käytännöt:

  • Säädä sisällön mukaan: Kun päätät paneelien suuntaa ja aloitusmittoja, ota huomioon sisällön prioriteetti. Esimerkiksi asettelussa, jossa on navigointipaneeli ja pääsisältöalue, navigointipaneelin pitäisi tyypillisesti pysyä kapeampana, ja sille tulisi määrittää minimikoko selkeän navigoinnin varmistamiseksi.

  • Strateginen pesiminen: Nestetyt jakajat voivat luoda monipuolisia asetteluja, mutta voivat myös monimutkaistaa käyttöliittymää ja vaikuttaa suorituskykyyn. Suunnittele pesityt asettelusi varmistaaksesi, että ne ovat intuitiivisia ja parantavat käyttäjäkokemusta.

  • Muista käyttäjän mieltymykset: Käytä automaattisen tallennuksen ominaisuutta muistaaksesi käyttäjien säätöjä istuntojen välillä, parantaen käyttäjäkokemusta. Tarjoa vaihtoehto, jonka avulla käyttäjät voivat palauttaa oletusasetuksiin.