android - How to implement tabs on top along with side menu -


i using ionic framework. need sliding tabs , side menu

enter image description here

any idea ? how achieve uisng ionic framework?

enter image description here

i tried ionic tabs . showing in footer there no menu icon

thanks

if want implement ionic side menus tabs have work little bit configuration routing system.

first of need have abstract state menu:

.state('app', {     url: "/app",     abstract: true,     templateurl: "menu.html", })

then need add states main tab (container) , each single tab:

.state('app.tabs', {     url: "/tabs",     views: {         'menucontent': {             templateurl: "tabs.html",         }     } })  .state('app.tabs.articles', {     url: "/articles",     views: {         'articles-tab': {         templateurl: "articles.html",         controller: 'articlesctrl'         }     } })  .state('app.tabs.colonies', {     url: "/colonies",     views: {         'colonies-tab': {         templateurl: "colonies.html",         controller: 'coloniesctrl'         }     } });

as can see each state inherits the main state: app.

the menu (menu.html):

<ion-side-menus enable-menu-with-back-views="false">   <ion-side-menu-content>     <ion-nav-bar class="bar-stable">       <ion-nav-back-button>       </ion-nav-back-button>        <ion-nav-buttons side="left">         <button class="button button-icon button-clear ion-navicon" menu-toggle="left">         </button>       </ion-nav-buttons>     </ion-nav-bar>     <ion-nav-view name="menucontent"></ion-nav-view>   </ion-side-menu-content>    <ion-side-menu side="left">     <ion-header-bar class="bar-stable">       <h1 class="title">menu</h1>     </ion-header-bar>     <ion-content>       <ion-list>          <ion-item nav-clear menu-close href="#/app/tabs">             articles & colonies          </ion-item>         <ion-item nav-clear menu-close href="#/app/foo">             foo         </ion-item>               </ion-list>     </ion-content>   </ion-side-menu> </ion-side-menus>

is standard side menu can copy documentation.
need template tabs (tabs.html):

<ion-view view-title="articles & colonies">     <ion-tabs class="tabs-striped tabs-top tabs-color-assertive">        <ion-tab title="articles" ui-sref="app.tabs.articles" icon-on="ion-ios-paper" icon-off="ion-ios-paper-outline">             <ion-nav-view name="articles-tab"></ion-nav-view>       </ion-tab>        <ion-tab title="colonies" ui-sref="app.tabs.colonies" icon-on="ion-ios-color-filter" icon-off="ion-ios-color-filter-outline">             <ion-nav-view name="colonies-tab"></ion-nav-view>       </ion-tab>      </ion-tabs> </ion-view>

this main container tabs want add view. referenced state app.tabs.
can see each <ion-tab> contains <ion-nav-view>.

the attribute ui-sref loads state single tab.
<ion-nav-view> has name set:

<ion-nav-view name="articles-tab"></ion-nav-view>

this name must match 1 defined in configured state:

.state('app.tabs.articles', {     url: "/articles",     views: {         'articles-tab': {         templateurl: "articles.html",         controller: 'articlesctrl'         }     } })

last thing add view (template) articles , colonies (articles.html):

<ion-view view-title="articles">   <ion-content>     <div class="card">       <div class="item item-text-wrap">         article 1       </div>       <div class="item item-text-wrap">         article 2       </div>       <div class="item item-text-wrap">         article 3       </div>           </div>   </ion-content> </ion-view>

notes:

for ios, tabs appear @ bottom of screen. android, tabs @ top of screen, below nav-bar. follows each os's design specification, can configured $ionicconfigprovider.

reference here.

since want tabs on top i've used css class tabs-top. same thing can achieved using $ionicconfigprovider tabs.position(value).

reference here.

the easiest thing play plunker bit , see how works.


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more