blocks|key|1631289|text|自beta+14+of+Ionic+(http://blog.ionic.io/the-final-beta/)以来，一些配置变量现在默认为其平台值，这意味着它们将尝试根据其构建的平台来运行。在选项卡的情况下，对于iOS，默认显示在底部，Android在顶部。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1631290|通过在配置函数中设置$ionicConfigProvider中的tabs.position函数，您可以轻松地“硬设置”所有平台的位置，如下所示：|CODE|1631291|MyApp.config(['$ionicConfigProvider',+function($ionicConfigProvider)+{

++++$ionicConfigProvider.tabs.position('bottom');+//+other+values:+top

}]);|code-block|syntax|javascript|1631292|您可以查看文档here|1631293|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.ionic.io/the-final-beta/|1|http://ionicframework.com/docs/api/provider/%2524ionicConfigProvider/^0|1|7|J|10|0|0|A|K|W|D|0|0|7|4|1|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|H]|$9|18|A|19|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1A|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|P|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]]]

Since the beta 14 of Ionic (<a href="http://blog.ionic.io/the-final-beta/" rel="noreferrer">http://blog.ionic.io/the-final-beta/</a>), there are some config variables that now default to their platform values, which means that they will try to behave according to the platform that they are built on.
In the case of tabs, for iOS the default is to display on bottom, and Android on top.

You can easily "hard set" the location for all platforms by setting the <code>tabs.position</code> function in the <code>$ionicConfigProvider</code>, inside your config function like this:

<pre><code>MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);
</code></pre>

You can check documentation <a href="http://ionicframework.com/docs/api/provider/%24ionicConfigProvider/" rel="noreferrer">here</a>

blocks|key|2029018|text|要将ionicFramework标签放在安卓设备屏幕的底部，只需打开你的app.js文件，然后在angular.module下添加以下代码行：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2029019|.config(function($ionicConfigProvider)+{
++++$ionicConfigProvider.tabs.position('bottom');
})|code-block|syntax|javascript|2029020|希望这能有所帮助。|2029021|entityMap^0|10|6|1C|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

<pre><code>.config(function($ionicConfigProvider) {
 $ionicConfigProvider.tabs.position('bottom');
})
</code></pre>

Hope this will help.

blocks|key|2029046|text|Ionic+2的更新(更干净/更好的语法)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2029047|在app.js中：|2029048|@App({
++...
++config:+{
++++tabbarPlacement:+'bottom',
++}
})|code-block|syntax|javascript|2029049|See+Configs|offset|length|2029050|entityMap|0|LINK|mutability|MUTABLE|url|http://ionicframework.com/docs/v2/api/config/Config/^0|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Update for Ionic 2 (cleaner/improved syntax):

In app.js:

<pre><code>@App({
 ...
 config: {
 tabbarPlacement: 'bottom',
 }
})
</code></pre>

<a href="http://ionicframework.com/docs/v2/api/config/Config/" rel="nofollow noreferrer">See Configs</a>

blocks|key|4139138|text|把它放到你的app.js中就行了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4139139|.config(function($ionicConfigProvider)+{
++++$ionicConfigProvider.tabs.position('bottom');
})|code-block|syntax|javascript|4139140|Ionic会自动将平台配置考虑在内，以调整要使用的过渡样式以及选项卡图标应该显示在顶部还是底部。|4139141|例如，在选项卡的情况下，对于iOS，默认显示在底部，Android显示在顶部。|4139142|Note1：需要注意的是，当一个平台不是iOS或Android时，它将默认使用iOS|offset|length|style|BOLD|4139143|Note2++如果您在桌面浏览器上进行开发，它将采用iOS默认配置|4139144|entityMap^0|0|0|0|0|0|5|6|10|0|0|5|7|Q|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]|$M|11|N|12|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@$M|14|N|15|O|P]|$M|16|N|17|O|P]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

Placing it in your app.js does the work.

<pre><code>.config(function($ionicConfigProvider) {
 $ionicConfigProvider.tabs.position('bottom');
})
</code></pre>

Ionic automatically takes platform configurations into account to adjust things like what transition style to use and whether tab icons should show on the top or bottom. 

For example, In the case of tabs, for iOS the default is to display on bottom, and Android on top.

Note1 : It should be noted that when a platform is not iOS or Android, then it’ll default to iOS 

Note2 : if you are developing on a desktop browser, it’s going to take on iOS default configs

blocks|key|5556763|text|在app.js文件旁边，您需要将$ionicConfigProvider注入到.config模块并添加$ionicConfigProvider.tabs.position(‘bottom’)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5556764|.config(function($stateProvider,+$urlRouterProvider,$ionicConfigProvider)+{

+$ionicConfigProvider.tabs.position('bottom');+//top

++//+Ionic+uses+AngularUI+Router+which+uses+the+concept+of+states
++//+Learn+more+here:+https://github.com/angular-ui/ui-router
++//+Set+up+the+various+states+which+the+app+can+be+in.
++//+Each+state's+controller+can+be+found+in+controllers.js
++$stateProvider

++//+setup+an+abstract+state+for+the+tabs+directive
++++.state('tab',+{
++++url:+'/tab',
++++abstract:+true,
++++templateUrl:+'templates/tabs.html'
++})
.
.
.
++//+if+none+of+the+above+states+are+matched,+use+this+as+the+fallback
++$urlRouterProvider.otherwise('/tab/dash');

});|code-block|syntax|javascript|5556765|entityMap^0|1F|18|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In side the app.js file you will need to inject the $ionicConfigProvider to the .config module and add $ionicConfigProvider.tabs.position(‘bottom’)

<pre><code>.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); //top

 // Ionic uses AngularUI Router which uses the concept of states
 // Learn more here: https://github.com/angular-ui/ui-router
 // Set up the various states which the app can be in.
 // Each state's controller can be found in controllers.js
 $stateProvider

 // setup an abstract state for the tabs directive
 .state('tab', {
 url: '/tab',
 abstract: true,
 templateUrl: 'templates/tabs.html'
 })
.
.
.
 // if none of the above states are matched, use this as the fallback
 $urlRouterProvider.otherwise('/tab/dash');

});
</code></pre>

blocks|key|4139102|text|如何在ionic+2的屏幕底部放置离子标签|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4139103|对于当前版本的ionic+2.0.0-beta.10。|4139104|在app.ts中：|4139105|ionicBootstrap(MyApp,+[],+{
++tabbarPlacement:+"bottom"
});|code-block|syntax|javascript|4139106|请参阅Config|offset|length|4139107|对于即将发布的ionic+2.0.0-beta.11|4139108|4139109|ionicBootstrap(MyApp,+[],+{
++tabsPlacement:+"bottom"+
});|4139110|Config|4139111|entityMap|0|LINK|mutability|MUTABLE|url|http://ionicframework.com/docs/v2/2.0.0-beta.10/api/config/Config/|1|http://ionicframework.com/docs/v2/api/config/Config/^0|0|0|0|0|3|6|0|0|0|0|0|0|6|1|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|9|@$M|1A|N|1B|1|1C]]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|H|7|1F|8|@]|9|@]|A|$I|J]]|$1|T|3|U|5|6|7|1G|8|@]|9|@$M|1H|N|1I|1|1J]]|A|$]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<h1>How to place ionic tabs at the bottom of the screen in Ionic 2</h1>

For the current version ionic 2.0.0-beta.10. 

In app.ts:

<pre><code>ionicBootstrap(MyApp, [], {
 tabbarPlacement: "bottom"
});
</code></pre>

See <a href="http://ionicframework.com/docs/v2/2.0.0-beta.10/api/config/Config/" rel="nofollow noreferrer">Config</a>

For the soon to be released ionic 2.0.0-beta.11

In app.ts:

<pre><code>ionicBootstrap(MyApp, [], {
 tabsPlacement: "bottom" 
});
</code></pre>

<a href="http://ionicframework.com/docs/v2/api/config/Config/" rel="nofollow noreferrer">Config</a>

blocks|key|2029206|text|Ionic+2和Ionic+3%2B的更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2029207|有两种方法可以更改选项卡栏的位置：|2029208|方法1:使用tabsPlacement+<ion-tabs>的属性|offset|length|style|BOLD|CODE|2029209|<ion-tabs++tabsPlacement='bottom'+>
++++<ion-tab+[root]="rootTab"+tabTitle="Home"></ion-tab>+
</ion-tabs>|code-block|syntax|javascript|2029210|方法2:更改+app.module.ts中的配置|2029211|@NgModule({
++imports:+[
++++IonicModule.forRoot(MyApp,+{
++++++tabsPlacement+:+'bottom'
++++})
++]
})|2029212|请参阅docs|2029213|entityMap|0|LINK|mutability|MUTABLE|url|https://ionicframework.com/docs/api/components/tabs/Tabs/^0|0|0|6|D|K|A|V|2|6|D|K|A|0|0|0|6|7|H|7|D|0|0|0|7|3|4|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@$F|16|G|17|H|I]|$F|18|G|19|H|I]|$F|1A|G|1B|H|I]|$F|1C|G|1D|H|J]|$F|1E|G|1F|H|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1G|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1H|8|@$F|1I|G|1J|H|I]|$F|1K|G|1L|H|I]|$F|1M|G|1N|H|J]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1O|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1P|8|@$F|1Q|G|1R|H|I]]|9|@$F|1S|G|1T|1|1U]]|A|$]]|$1|V|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<h1>Update for Ionic 2, and Ionic 3+:</h1>

You have 2 methods to change tab bar position:

Method 1: Use <code>tabsPlacement</code> propertive of <code>&lt;ion-tabs&gt;</code>

<pre><code>&lt;ion-tabs tabsPlacement='bottom' &gt;
 &lt;ion-tab [root]="rootTab" tabTitle="Home"&gt;&lt;/ion-tab&gt; 
&lt;/ion-tabs&gt;
</code></pre>

Method 2: Change config in <code>app.module.ts</code> 

<pre><code>@NgModule({
 imports: [
 IonicModule.forRoot(MyApp, {
 tabsPlacement : 'bottom'
 })
 ]
})
</code></pre>

See the <a href="https://ionicframework.com/docs/api/components/tabs/Tabs/" rel="nofollow noreferrer">docs</a>

blocks|key|2029138|text|myapp.config(['$ionicConfigProvider',+function($ionicConfigProvider)+{
++++$ionicConfigProvider.tabs.position('bottom');+//+other+values:+top
}]);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2029139|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
 $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
</code></pre>

blocks|key|1634869|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1634870|<ion-footer><ion-tabs>+<ion-tab+tabTitle="Return"></ion-tab>++</ion-tabs></ion-footer>|offset|length|style|CODE|1634871|entityMap^0|0|0|2E|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Try This
<code>&lt;ion-footer&gt;&lt;ion-tabs&gt; &lt;ion-tab tabTitle=&quot;Return&quot;&gt;&lt;/ion-tab&gt; &lt;/ion-tabs&gt;&lt;/ion-footer&gt;</code>

I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

<pre><code>&lt;ion-footer-bar&gt;
 &lt;ion-tabs class="tabs-icon-only tabs-stable"&gt;
 ...
 &lt;/ion-tabs&gt;
&lt;/ion-footer-bar&gt;
</code></pre>

How to place ionic tabs at the bottom of the screen?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我创建了一个简单的离子标签，在屏幕顶部显示我的图标。我试着把它包在一个离子页脚栏中，以便把它放在屏幕的底部，但没有成功。当我这样做的时候，标签消失了。我该如何完成我想要的造型呢？<ion-footer-bar> <ion-tabs class="tabs-icon-only tabs-stable"> ... </ion-tabs></ion-footer-bar>

问如何在屏幕底部放置离子标签？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在屏幕底部放置离子标签？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在屏幕底部放置离子标签？
EN