151151 >
152152 Backdrop is inactive
153153 </ button >
154- < button id ="present-inline-sheet-modal "> Present Inline Sheet Modal</ button >
155-
156- < div id ="inline-sheet-modal-container ">
157- < ion-modal id ="inline-sheet-modal " mode ="md ">
158- < ion-content >
159- < ion-searchbar id ="inline-sheet-searchbar " placeholder ="Search "> </ ion-searchbar >
160- < ion-list >
161- < ion-item >
162- < ion-avatar slot ="start ">
163- < ion-img src ="https://i.pravatar.cc/300?u=b "> </ ion-img >
164- </ ion-avatar >
165- < ion-label >
166- < h2 > Connor Smith</ h2 >
167- < p > Sales Rep</ p >
168- </ ion-label >
169- </ ion-item >
170- < ion-item >
171- < ion-avatar slot ="start ">
172- < ion-img src ="https://i.pravatar.cc/300?u=a "> </ ion-img >
173- </ ion-avatar >
174- < ion-label >
175- < h2 > Daniel Smith</ h2 >
176- < p > Product Designer</ p >
177- </ ion-label >
178- </ ion-item >
179- < ion-item >
180- < ion-avatar slot ="start ">
181- < ion-img src ="https://i.pravatar.cc/300?u=d "> </ ion-img >
182- </ ion-avatar >
183- < ion-label >
184- < h2 > Greg Smith</ h2 >
185- < p > Director of Operations</ p >
186- </ ion-label >
187- </ ion-item >
188- < ion-item >
189- < ion-avatar slot ="start ">
190- < ion-img src ="https://i.pravatar.cc/300?u=e "> </ ion-img >
191- </ ion-avatar >
192- < ion-label >
193- < h2 > Zoey Smith</ h2 >
194- < p > CEO</ p >
195- </ ion-label >
196- </ ion-item >
197- </ ion-list >
198- </ ion-content >
199- </ ion-modal >
200- </ div >
201154
202155 < div class ="grid ">
203156 < div class ="grid-item red "> </ div >
@@ -220,36 +173,6 @@ <h2>Zoey Smith</h2>
220173 console . log ( 'WillDismiss' , e ) ;
221174 } ) ;
222175
223- const inlineSheetModal = document . querySelector ( '#inline-sheet-modal' ) ;
224- const inlineSheetTrigger = document . querySelector ( '#present-inline-sheet-modal' ) ;
225- const inlineSheetSearchbar = document . querySelector ( '#inline-sheet-searchbar' ) ;
226-
227- if ( inlineSheetModal ) {
228- inlineSheetModal . initialBreakpoint = 0.2 ;
229- inlineSheetModal . breakpoints = [ 0 , 0.2 , 0.75 , 1 ] ;
230- inlineSheetModal . backdropDismiss = false ;
231- inlineSheetModal . backdropBreakpoint = 0.5 ;
232- inlineSheetModal . focusTrap = false ;
233- inlineSheetModal . handleBehavior = 'cycle' ;
234- inlineSheetModal . presentingElement = document . querySelector ( '.ion-page' ) ;
235-
236- inlineSheetModal . addEventListener ( 'ionModalDidDismiss' , ( ) => {
237- inlineSheetModal . isOpen = false ;
238- } ) ;
239-
240- if ( inlineSheetTrigger ) {
241- inlineSheetTrigger . addEventListener ( 'click' , ( ) => {
242- inlineSheetModal . isOpen = true ;
243- } ) ;
244- }
245-
246- if ( inlineSheetSearchbar ) {
247- inlineSheetSearchbar . addEventListener ( 'click' , ( ) => {
248- inlineSheetModal . setCurrentBreakpoint ( 0.75 ) ;
249- } ) ;
250- }
251- }
252-
253176 function createModal ( options ) {
254177 let items = '' ;
255178
0 commit comments