Iónsky nie je len úžasný dizajnový systém vytvorený pre mobilné zariadenia, ale funguje ako kúzlo aj na počítači. Používame ho na DeckDeckGo obzvlášť z toho dôvodu.
Kým sme vyvinuli náš editor pre prezentácie, implementovali sme nasledujúce dva triky, o ktoré sa s vami chystám podeliť a ktoré, dúfam, môžu byť jedného dňa užitočné aj pre vás.
Režim celej obrazovky Modal
Po vybalení z krabice, bez ohľadu na to, aký štýl platformy sa použije, hneď ako váš prehliadač dosiahne veľkosť 768 x 600 pixlov, iónsky modál sa už nebude zobrazovať na celej obrazovke, ale skôr ako vyskakovacie okno v strede.
Aj keď to môže vyhovovať takmer všetkým prípadom použitia, môže existovať taký, ktorý by vyžadoval režim celej obrazovky. Skutočne možno budete chcieť používateľovi predložiť viac informácií, preto potrebujete miesto, ale možno nebudete chcieť pridať stránku do zásobníka histórie.
Napríklad používatelia, ktorí upravujú svoje snímky pomocou nášho editora, môžu svoje balíčky dodávať ako progresívne webové aplikácie. Na požiadanie balíme ich prezentácie do PWA a zavádzame ich online. Pretože je to celkom proces a niečo, čo musí používateľ výslovne spustiť, rozhodli sme sa prezentovať všetky informácie skôr modálne než pomocou navigácie, aby sme sa vyhli prípadným chybám tam a späť.
Za predpokladu, že nechcete, aby sa všetky vaše modály zobrazovali na celú obrazovku, ale iba niektoré, navrhujem, aby sme mody štylizovali pomocou selektora triedy CSS, ktorý môžeme použiť tak, ako je to zobrazené na dokumentáciu .
Uhlové:
async presentModal() { const modal = await this.modalController.create({ component: ModalPage, cssClass: 'fullscreen' }); await modal.present(); } #javascript #ionic #web-development #programming #front-end-development
itnext.io
Ionic: Režim celej obrazovky a rozbaľovacia ponuka
Ako dosiahnuť, aby sa iónové modály stali na celú obrazovku a kontextové okná slúžili ako ponuka. Ionic nie je len úžasný dizajnový systém vytvorený pre mobilné zariadenia, ale funguje aj ako stolný počítač. Používame to predovšetkým v DeckDeckGo z tohto dôvodu.