let activeNum = 3; let maxHeight = 500; let swiper = document.querySelector('ion-slides'); swiper.options = { slidesPerView: 5, spaceBetween: -30 }; let settings = { initialBreak: 'top', parentElement: 'ion-content', breaks: { top: { enabled: true, height: maxHeight }, middle: { enabled: false } }, darkMode: true, showDraggable: false, buttonDestroy: false, bottomClose: true, zStack: { cardYOffset: 16, pushElements: null, minPushHeight: 100 } }; let drawers = { '1': null, '2': null, '3': null, '4': null, '5': null}; Object.keys(drawers).forEach((key) => { key = parseInt(key); let itemSettings = { ...settings, cssClass: `card-${key}`, events: { onDrag: (e) => onDragFunc(key, e), onDragStart: (e) => onDragStartFunc(key, e), onDidDismiss: () => onDidDismissFunc(key) } } if (key !== 1) { itemSettings.zStack = { ...itemSettings.zStack, pushElements: [`.cupertino-pane-wrapper.card-${(key - 1)}`] }; } if (key === 1) { itemSettings.breaks = {...settings.breaks, ...{bottom: {enabled: false}}}; itemSettings.bottomClose = false; itemSettings.zStack = null; } drawers[key] = new CupertinoPane(`.card-${key}`, itemSettings); }); window.onload = async function () { await document.querySelector('ion-app').componentOnReady(); // activate default here activatePane(3, document.getElementById(`button-${activeNum}`), false); } async function onDragStartFunc(num, t) { const targetTouch = t.type === 'touchstart' && t.targetTouches && (t.targetTouches[0] || t.changedTouches[0]); const screenY = t.type === 'touchstart' ? targetTouch.clientY : t.clientY; firstPoint = screenY; } async function onDragFunc(num, t) { if (num === drawers.length - 1) { return; } if (t.delta > 70) { activatePane(num + 1, document.getElementById(`button-${num + 1}`), true); } } async function onDidDismissFunc(num) { if (num === activeNum) { activatePane(num - 1, document.getElementById(`button-${num - 1}`), true); } } async function activatePane(id, btn, animate, dismiss) { if ((id > 5) || (id < 1)) { return; } document.querySelectorAll('ion-slide ion-button').forEach(item => item.color = 'light'); btn.color = "medium"; activeNum = id; for (i = 0; i < id; i++) { for (j = id + 1; j < 6; j ++) { if (!!document.querySelector(`.cupertino-pane-wrapper.card-${j}`)) { drawers[j].destroy({animate}); } } if (!(!!document.querySelector(`.cupertino-pane-wrapper.card-${i + 1}`))) { drawers[i + 1].present({animate}); } } };
<!DOCTYPE html> <html dir="ltr" mode="ios"> <body class="dark"> <ion-app> <ion-content scroll-y="false"> <ion-slides> <ion-slide> <ion-button id="button-1" expand="full" onclick="activatePane(1, this, true);" color="light">#1</ion-button> </ion-slide> <ion-slide> <ion-button id="button-2" expand="full" onclick="activatePane(2, this, true);" color="light">#2</ion-button> </ion-slide> <ion-slide> <ion-button id="button-3" expand="full" onclick="activatePane(3, this, true);" color="medium">#3</ion-button> </ion-slide> <ion-slide> <ion-button id="button-4" expand="full" onclick="activatePane(4, this, true);" color="light">#4</ion-button> </ion-slide> <ion-slide> <ion-button id="button-5" expand="full" onclick="activatePane(5, this, true);" color="light">#5</ion-button> </ion-slide> </ion-slides> <div class="main-content"> <ion-drawer class="card-1"> <h1>Card #1</h1> <p hide-on-bottom>Content</p> </ion-drawer> <ion-drawer class="card-2"> <h1>Card #2</h1> <p hide-on-bottom>Content</p> </ion-drawer> <ion-drawer class="card-3"> <h1>Card #3</h1> <p hide-on-bottom>Content</p> </ion-drawer> <ion-drawer class="card-4"> <h1>Card #4</h1> <p hide-on-bottom>Content</p> </ion-drawer> <ion-drawer class="card-5"> <h1>Card #5</h1> <p hide-on-bottom>Content</p> </ion-drawer> </div> </ion-content> </ion-app> </body> </html>
body.dark{--ion-color-primary:#428cff;--ion-color-primary-rgb:66,140,255;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255,255,255;--ion-color-primary-shade:#3a7be0;--ion-color-primary-tint:#5598ff;--ion-color-secondary:#50c8ff;--ion-color-secondary-rgb:80,200,255;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255,255,255;--ion-color-secondary-shade:#46b0e0;--ion-color-secondary-tint:#62ceff;--ion-color-tertiary:#6a64ff;--ion-color-tertiary-rgb:106,100,255;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255,255,255;--ion-color-tertiary-shade:#5d58e0;--ion-color-tertiary-tint:#7974ff;--ion-color-success:#2fdf75;--ion-color-success-rgb:47,223,117;--ion-color-success-contrast:#000000;--ion-color-success-contrast-rgb:0,0,0;--ion-color-success-shade:#29c467;--ion-color-success-tint:#44e283;--ion-color-warning:#ffd534;--ion-color-warning-rgb:255,213,52;--ion-color-warning-contrast:#000000;--ion-color-warning-contrast-rgb:0,0,0;--ion-color-warning-shade:#e0bb2e;--ion-color-warning-tint:#ffd948;--ion-color-danger:#ff4961;--ion-color-danger-rgb:255,73,97;--ion-color-danger-contrast:#ffffff;--ion-color-danger-contrast-rgb:255,255,255;--ion-color-danger-shade:#e04055;--ion-color-danger-tint:#ff5b71;--ion-color-dark:#f4f5f8;--ion-color-dark-rgb:244,245,248;--ion-color-dark-contrast:#000000;--ion-color-dark-contrast-rgb:0,0,0;--ion-color-dark-shade:#d7d8da;--ion-color-dark-tint:#f5f6f9;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152,154,162;--ion-color-medium-contrast:#000000;--ion-color-medium-contrast-rgb:0,0,0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-light:#222428;--ion-color-light-rgb:34,36,40;--ion-color-light-contrast:#ffffff;--ion-color-light-contrast-rgb:255,255,255;--ion-color-light-shade:#1e2023;--ion-color-light-tint:#383a3e}.ios body.dark{--ion-background-color:#000000;--ion-background-color-rgb:0,0,0;--ion-text-color:#ffffff;--ion-text-color-rgb:255,255,255;--ion-color-step-50:#0d0d0d;--ion-color-step-100:#1a1a1a;--ion-color-step-150:#262626;--ion-color-step-200:#333333;--ion-color-step-250:#404040;--ion-color-step-300:#4d4d4d;--ion-color-step-350:#595959;--ion-color-step-400:#666666;--ion-color-step-450:#737373;--ion-color-step-500:#808080;--ion-color-step-550:#8c8c8c;--ion-color-step-600:#999999;--ion-color-step-650:#a6a6a6;--ion-color-step-700:#b3b3b3;--ion-color-step-750:#bfbfbf;--ion-color-step-800:#cccccc;--ion-color-step-850:#d9d9d9;--ion-color-step-900:#e6e6e6;--ion-color-step-950:#f2f2f2;--ion-toolbar-background:#0d0d0d;--ion-item-background:#000000;--ion-card-background:#1c1c1d}.md body.dark{--ion-background-color:#121212;--ion-background-color-rgb:18,18,18;--ion-text-color:#ffffff;--ion-text-color-rgb:255,255,255;--ion-border-color:#222222;--ion-color-step-50:#1e1e1e;--ion-color-step-100:#2a2a2a;--ion-color-step-150:#363636;--ion-color-step-200:#414141;--ion-color-step-250:#4d4d4d;--ion-color-step-300:#595959;--ion-color-step-350:#656565;--ion-color-step-400:#717171;--ion-color-step-450:#7d7d7d;--ion-color-step-500:#898989;--ion-color-step-550:#949494;--ion-color-step-600:#a0a0a0;--ion-color-step-650:#acacac;--ion-color-step-700:#b8b8b8;--ion-color-step-750:#c4c4c4;--ion-color-step-800:#d0d0d0;--ion-color-step-850:#dbdbdb;--ion-color-step-900:#e7e7e7;--ion-color-step-950:#f3f3f3;--ion-item-background:#1e1e1e;--ion-toolbar-background:#1f1f1f;--ion-tab-bar-background:#1f1f1f;--ion-card-background:#1e1e1e} ion-drawer { padding: 0 20px; } ion-slides { height: 100px; } .main-content { height: calc(100% - 100px); } ion-slide ion-button { height: 40px; } .cupertino-pane-wrapper { width: 100%; height: 100%; } .swiper-pagination-bullet-active { background: #cccccc; } .swiper-pagination { bottom: 0px !important; } body.dark { --cupertino-pane-icon-close-color: #a8a7ae; --cupertino-pane-background: #1c1c1d; --cupertino-pane-color: #ffffff; --cupertino-pane-shadow: 0 4px 16px rgb(0 0 0 / 12%); --cupertino-pane-border-radius: 20px; --cupertino-pane-move-background: #424246; --cupertino-pane-destroy-button-background: #424246; }