I'm using ons-tabbar and it seems to force the icon size. Any ideas how to make the icon size different?
<ons-tabbar position="top">
<ons-tabbar-item icon="fa-home" page="home.html" active="true"></ons-tabbar-item>
<ons-tabbar-item icon="fa-th-large" page="list.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-search" page="search.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-bell" page="shared.html"></ons-tabbar-item>
<ons-tabbar-item icon="fa-user" page="user.html"></ons-tabbar-item>
</ons-tabbar>
Making the content of the item an icon works but wont show any active states since its the wrong element now.
<ons-tabbar-item page="home.html" active="true"><ons-icon icon="fa-home" size="20px"></ons-icon></ons-tabbar-item>
You could use the following CSS to change the font-size of the icons:
ons-tabbar-item ons-icon {
font-size: 20px !important;
}
It will override the standard size and change the icon size to 20px.
Please look at this example:
http://codepen.io/argelius/pen/PwPzzW
Related
I'd like to combine a tabbar with carrousel, so that I can navigate between tabs not only by tapping the tabbar but also by swiping like the way it works for a carousel.
I found that this codepen (http://codepen.io/frankdiox/pen/EVpNVg) (as listed in this answer (https://stackoverflow.com/a/33486827/6857215) almost does what I want, except that by just using the CSS style of a tabbar, I'm losing the automatic material-design on android which is not what I want.
I would love to have a solution that contains just something like this:
<ons-page>
<ons-carousel swipeable auto-scroll fullscreen id="carousel">
<ons-carousel-item> Page one </ons-carousel-item>
<ons-carousel-item> Page two </ons-carousel-item>
<ons-carousel-item> Page three </ons-carousel-item>
</ons-carousel>
<ons-tabbar position="top">
<ons-tab onclick="carousel.setActiveCarouselItemIndex(0)" active>One</ons-tab>
<ons-tab onclick="carousel.setActiveCarouselItemIndex(1)">Two</ons-tab>
<ons-tab onclick="carousel.setActiveCarouselItemIndex(2)">Three</ons-tab>
</ons-tabbar>
</ons-page>
Since onsen ui 2 is out, I'd thought maybe someone has a neater solution for this than the old example?
I have a navigator and global splitter in my app. My navigator pushes my first page as tempHome and i need set page attribute for splitter also tempHome to use the splitter.
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
</ons-navigator>
so I have twice tempHome in the first page of my app.
Is there any help?
Thank you
The codepen which you mentioned shows a splitter inside a navigator.
However both the navigator and splitter can contain inner pages - so in your case what you want to do is just change the structure the other way around. Since you want to have the side menu always that just means that it should be outside the navigator.
You can put the navigator inside the ons-splitter-content and you will get the desired result.
<ons-splitter>
<ons-splitter-side collapse swipeable>
// menu content...
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
Here's a modified Demo.
Sidenote: I just modified the example from the codepen which you mentioned, so it's actually using angular, however do note that for Onsen 2 angular is not a required :)
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
I am trying to create a simple app that has a tabbar and tool bar together on a single page, but every time I create a toolbar, it is placed in the front of the content with no formatting. I have the tabbar, that looks like this:
<ons-tabbar>
<ons-tab page="partials/info.html" active="true" icon="fa fa-bar-chart-o" label="Info">
</ons-tab>
<ons-tab page="partials/history.html" active="true" icon="fa fa-info-circle" label="History">
</ons-tab>
<ons-tab page="partials/contact.html" active="true" icon="fa fa-user" label="Contact">
</ons-tab>
<ons-tab page="partials/settings.html" active="true" icon="ion-gear-a" label="Settings">
</ons-tab>
</ons-tabbar>
The tabbar is completely functional, but when I try to put a ons-tool bar right above it, it bugs out with wrong text formatting and all the content of the partials BEHIND the toolbar:
<ons-toolbar fixed-style>
<div class="left">
Brand Name
</div>
<div class="right">
Info 1: dsadas
Info 2: adsadas
</div>
</ons-toolbar>
Is there any way to correct go about doing this? Alternatively, I really don't need the full functionality of a tool bar (though it would be nice); all I really need is just a "strip" of height: 30px and width: 100% to be statically placed at the top of the app to put some info or numbers. When I use ons-page with my partials, it seems to just be covered up the entire time....
Hi Onsen UI community,
I have used ons-tabbar as follows:
<ons-page id="main-page" ng-controller="MainController">
<ons-tabbar>
<ons-tab page="main_1.html" label="Dash" icon="smile-o" active="true"></ons-tab>
<ons-tab page="main_2.html" label="Meet" icon="group"></ons-tab>
<ons-tab page="main_3.html" label="Feat" icon="bullseye"></ons-tab>
<ons-tab page="main_4.html" label="Mee" icon="user"></ons-tab>
<ons-tab page="main_5.html" label="Set" icon="gear"></ons-tab>
</ons-tabbar>
</ons-page>
And inside main_1.html, I want to use ons-navigator like:
<ons-navigator title="Dashboard" var="nav" page="dashboard.html"></ons-navigator>
<ons-template id="dashboard.html">
<ons-page id="dashboard-page">
<ons-button ng-click="nav.pushPage('detail.html', { animation: 'slide' })">
GoTo Detail
</ons-button>
</ons-page>
</ons-template>
So far, I can use the above codes without any problem. However, there is always a flush occurring after I clicked on 'GoTo button' and when the detail.html page is loaded.
I wonder if there is any better way to do so without any flush on the page.
I think I finally found the cause. What caused the blink was nested <ons-page>s, I suppose. OnsenUI doesn't seem to allow nested <ons-page>s after all. Please try placing <ons-tabbar> at root, instead of under <ons-page>.
I am using a page as a right side menu but it is displaying the toolbar of the backgroud of the first page before it change to some other.So what can be done ?
You can change navigation color as following:
page1.html
<ons-page>
<ons-toolbar style="background: #4CD964;">
<div class="center" style="color: #FF0000" >Navigator</div>
</ons-toolbar>
...
</ons-page>
you can change the color of your navigation bar background with:
.navigation-bar {
height: 50px;
background-color: #f00;
}
for the text on it:
<div class="center" style="font-size:25px; color:#fff;">HOME</div>
and you can also change the color of your icon:
<ons-icon icon="bars" style="color:#fff;"></ons-icon>