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 kokoa muunneltavaa komponenttia: pää- ja yksityiskohtakomponentit. Jakaja erottaa nämä komponentit, jolloin käyttäjät voivat dynaamisesti säätää kummankin komponentin kokoa omien mieltymystensä mukaan.

Luodaan jakaja​

Luo Splitter siirtämällä kaksi komponenttia sen konstruktorille. Ensimmäinen muuttuu pääpaneeliksi ja toinen yksityiskohtapaneeliksi.

Näytä koodi

Minimi- ja maksimi koko​

Splitter-komponentti tarjoaa menetelmiä asetettavaksi minimiksi ja maksimi kokoiksi sen paneeleille, jolloin voit hallita komponenttien koon muutoskäyttäytymistä Splitter-komponentin sisällä. Kun käyttäjät yrittävät muuttaa paneeleita yli määrättyjen minimien tai maksimi kokojen, jakajakomponentti pakottaa nämä rajoitukset, varmistaen että paneelit pysyvät määritellyissä rajoissa.

Kokojen asettaminen​

setMasterMinSize(String masterMinSize)-menetelmä määrittelee minimikoon jakajan pääpaneelille. Vastaavasti setMasterMaxSize(String masterMaxSize)-menetelmä määrittelee maksimikoon pääpaneelille.

Voit määrittää koot käyttäen mitä tahansa kelvollisia CSS-yksiköitä, kuten on esitetty alla:

Näytä koodi

Suunta​

Voit konfiguroida suunnan 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 pystysuoraan, mikä tarjoaa joustavuutta asettelun suunnittelussa.

Konfiguroidaksesi suuntaa, käytä tuettuja suuntia Enumia määrittämään, pitäisikö Splitter-komponentin renderöidä vaakasuoraan vai pystysuoraan:

Näytä koodi

Suhteellinen sijainti​

Aseta jakajan alun perin sijainti Splitter-komponentissa käyttämällä setPositionRelative. Tämä menetelmä ottaa numeerisen arvon, joka vaihtelee välillä 0–100, mikä edustaa prosenttiosuutta annettavasta tilasta Splitter-komponentissa, ja näyttää jakajan annettuna prosenttiosuutena kokonaisleveyksistä:

Näytä koodi

Pesiminen​

Jakajien pesiminen mahdollistaa monimutkaisten asetteluiden luomisen muunneltavien paneelien tasoilla. Se mahdollistaa monimutkaisten käyttöliittymien luomisen, joissa on yhteensopivat säätömahdollisuudet sisällön järjestelylle ja koon muuttamiselle.

Jotta voit pesiä Splitter-komponentteja, luo uusia Splitter-instansseja ja lisää ne lapsina olemassa oleviin Splitter-komponentteihin. Tämä hierarkkinen rakenne mahdollistaa monitasoisten asetteluiden luomisen joustavilla koon muutosmahdollisuuksilla. Alla oleva ohjelma havainnollistaa tätä:

Näytä koodi

Automaattinen tallennus​

Splitter-komponentti sisältää automaattisen tallennuksen vaihtoehdon, joka tallentaa paneelikohtaiset koot paikalliseen tallennustilaan, jotta mitat pysyvät johdonmukaisina latausten välillä.

Kun asetat automaattisen tallennuksen konfiguraation, Splitter-komponentti tallentaa automaattisesti paneelikohtaiset koot verkkoselaimen paikalliseen tallennustilaan. Tämä varmistaa, että paneelit valitsemat koot säilyvät sivun latauksen tai selaimen istuntojen välillä, vähentäen manuaalisten säädösten tarvetta.

Tilanteen puhdistaminen​

Voit ohjelmallisesti palauttaa Splitter-komponentin oletusasetuksiin ja mittoihin kutsumalla cleanState()-menetelmää, joka poistaa kaiken tallennetun tiladatapadon Splitter-komponentin osalta verkkoselaimen paikallisesta tallennustilasta.

Näytä koodi

Edellisessä demossa jokainen Splitter-instanssi aktivoi automaattisen tallennuksen käyttämällä setAutosave-menetelmää. Tämä varmistaa, että paneelikohtaiset koot tallennetaan automaattisesti paikalliseen tallennustilaan. Näin ollen, kun selain ladataan uudelleen, näiden jakajien koot pysyvät samoina.

"Tyhjennä tila" -painikkeen napsauttaminen kutsuu cleanState()-menetelmää ja päivitää selainikkunan näyttämään alkuperäiset mitat.

Tyylit​

Loading...

Parhaat käytännöt​

Optimaalisen käyttökokemuksen varmistamiseksi Splitter-komponentin käytön aikana, harkitse seuraavia parhaita käytäntöjä:

  • Säädä sisällön perusteella: Kun päätät paneelien suuntaa ja aloituskokoja, ota huomioon sisällön tärkeys. Esimerkiksi asettelussa, jossa on navigointipalkki ja pääsisältöalue, navigointipalkin tulisi yleensä pysyä kapeampana, ja sille tulisi asettaa minimikoko selkeän navigoinnin varmistamiseksi.

  • Strateginen pesiminen: Jakajien pesiminen voi luoda monipuolisia asetteluja, mutta se voi myös monimutkaistaa käyttöliittymää ja vaikuttaa suorituskykyyn. Suunnittele pesityt asettelut varmistaaksesi, että ne ovat intuitiivisia ja parantavat käyttökokemusta.

  • Muista käyttäjän mieltymykset: Käytä automaattisen tallennuksen toimintoa muistaaksesi käyttäjän säädöt istuntojen välillä, mikä parantaa käyttökokemusta. Tarjoa mahdollisuus, joka sallii käyttäjille palauttaa oletusasetukset.