{"id":1709,"date":"2017-02-17T14:09:49","date_gmt":"2017-02-17T14:09:49","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1709"},"modified":"2017-04-28T16:26:05","modified_gmt":"2017-04-28T16:26:05","slug":"testing-split-pane-support","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/testing-split-pane-support","title":{"rendered":"Testing Split Pane Support"},"content":{"rendered":"<p>Over the last month, <a href=\"https:\/\/github.com\/manucorporat\">Manu<\/a> has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane.<\/p>\n<p>With Split Pane, it&#8217;s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse<br \/>\non small screens (such as portrait mode on most smartphones). With independent navigation controllers, the menu side of the split pane can navigate independently of the content side, or they can work in concert. Finally, the menu side can be fixed or displayed as a side menu.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2304\" height=\"1706\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25.png\" alt=\"Screen Shot 2017-02-16 at 19.18.25\" class=\"aligncenter size-full wp-image-1712 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25.png 2304w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-300x222.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-768x569.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-1024x758.png 1024w\" data-sizes=\"auto, (max-width: 2304px) 100vw, 2304px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2304px; --smush-placeholder-aspect-ratio: 2304\/1706;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2304\" height=\"1706\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25.png\" alt=\"Screen Shot 2017-02-16 at 19.18.25\" class=\"aligncenter size-full wp-image-1712\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25.png 2304w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-300x222.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-768x569.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-16-at-19.18.25-1024x758.png 1024w\" sizes=\"auto, (max-width: 2304px) 100vw, 2304px\" \/><\/noscript><\/a><\/p>\n<p>To help test, install the latest nightly of Ionic (<code>npm install --save ionic-angular@2.1.0-201702281739<\/code>). For basic usage, simply wrap your <code>&lt;ion-menu&gt;<\/code> and <code>&lt;ion-nav&gt;<\/code> with the new <code>&lt;ion-split-pane&gt;<\/code> component:<\/p>\n<pre><code class=\"typescript\">&lt;ion-split-pane&gt;\n  &lt;ion-menu [content]=&quot;content&quot;&gt;\n  &lt;\/ion-menu&gt;\n  &lt;ion-nav [root]=&quot;rootPage&quot; #content swipeBackEnabled=&quot;false&quot; main&gt;&lt;\/ion-nav&gt;\n&lt;\/ion-split-pane&gt;\n<\/code><\/pre>\n<p>See the <a href=\"https:\/\/github.com\/driftyco\/ionic\/tree\/split-panel\/src\/components\/split-pane\/test\">e2e tests<\/a> for a full example of advanced usage (API Docs coming soon). Note: Split Pane is only available on Ionic 2.x and above.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane. With Split Pane, it&#8217;s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1711,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1709","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Testing Split Pane Support - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/testing-split-pane-support\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Testing Split Pane Support\" \/>\n<meta property=\"og:description\" content=\"Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane. With Split Pane, it&#8217;s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/testing-split-pane-support\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-17T14:09:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-04-28T16:26:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"361\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Max Lynch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@maxlynch\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Max Lynch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support\"},\"author\":{\"name\":\"Max Lynch\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\"},\"headline\":\"Testing Split Pane Support\",\"datePublished\":\"2017-02-17T14:09:49+00:00\",\"dateModified\":\"2017-04-28T16:26:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support\"},\"wordCount\":153,\"commentCount\":48,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif\",\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/testing-split-pane-support#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support\",\"url\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support\",\"name\":\"Testing Split Pane Support - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif\",\"datePublished\":\"2017-02-17T14:09:49+00:00\",\"dateModified\":\"2017-04-28T16:26:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/testing-split-pane-support\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif\",\"width\":640,\"height\":361},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/testing-split-pane-support#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Testing Split Pane Support\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\",\"name\":\"Max Lynch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"caption\":\"Max Lynch\"},\"description\":\"CEO\",\"sameAs\":[\"http:\/\/twitter.com\/maxlynch\",\"https:\/\/x.com\/maxlynch\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/max\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Testing Split Pane Support - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/testing-split-pane-support","og_locale":"en_US","og_type":"article","og_title":"Testing Split Pane Support","og_description":"Over the last month, Manu has been working hard on adding an oft-requested and powerful new feature to Ionic apps: Split Pane. With Split Pane, it&#8217;s now easy to show a responsive side menu with side-by-side navigation controllers that will display on larger screens (such as the iPhone 7 plus, tablets, and desktops) and collapse [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/testing-split-pane-support","og_site_name":"Ionic Blog","article_published_time":"2017-02-17T14:09:49+00:00","article_modified_time":"2017-04-28T16:26:05+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","width":640,"height":361,"type":"image\/gif"}],"author":"Max Lynch","twitter_card":"summary_large_image","twitter_creator":"@maxlynch","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Max Lynch","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support"},"author":{"name":"Max Lynch","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e"},"headline":"Testing Split Pane Support","datePublished":"2017-02-17T14:09:49+00:00","dateModified":"2017-04-28T16:26:05+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support"},"wordCount":153,"commentCount":48,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/testing-split-pane-support#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support","url":"https:\/\/ionic.io\/blog\/testing-split-pane-support","name":"Testing Split Pane Support - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","datePublished":"2017-02-17T14:09:49+00:00","dateModified":"2017-04-28T16:26:05+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/testing-split-pane-support"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","width":640,"height":361},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/testing-split-pane-support#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Testing Split Pane Support"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e","name":"Max Lynch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","caption":"Max Lynch"},"description":"CEO","sameAs":["http:\/\/twitter.com\/maxlynch","https:\/\/x.com\/maxlynch"],"url":"https:\/\/ionic.io\/blog\/author\/max"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/02\/Feb-16-2017-19-15-43.gif","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1709"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1709\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1711"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}