I am working an react native application. I am using native base tab for tab navigation. It's working perfectly but this tab is plane and simple. I want this tab styling like google chrome tab. So how can style native base tab like chrome tab?? help please ...
One way is to use the Native Base Customizer tool and download the theme: https://nativebase.io/customizer/
Read the section Customize of documentation for more informations and others ways : https://docs.nativebase.io/Customize.html#Customize
use this in native base tab and styling on and text
<Tab heading={<TabHeading><Image ..../><Text>Text</Text></TabHeading>}
Related
I'm working on a project for the GUI of an app written in Python that requires a collapsible sidebar like this one:
https://www.youtube.com/watch?v=-vQIcBKdhyk&t=9s
I already created a good portion of the GUI in Kivy and KivyMD. Applied also the Navigation Drawer that works as expected. However, it is fully retracted when not active, so not exactly what was asked.
Anyone managed to create something like this?
Thank you all in advance
Using Navigation Drawer component in KivyMD, it was possible to create something almost as required. Yet, there is no partial view (with little icons that would expand when the drawer were toggled).
I need to show chromium tool bar as shown in the screen shot below:
Is there a way to achieve this in ElectronJs?
There is no built-in address/tool bar in Electron, if you want one you have to create it yourself (using HTML, CSS, and JS). Here's an example of a custom address bar, and you may want to have a look at this issue in the Electron repository too.
I am working on Worklight version 6.1.I have created a Worklight project, added a Hybrid app and then added the iPhone environment to that application.I have generated Xcode environment and have added controller classes to that Xcode project.I have to add worklight Tab bar in my application.I am having html (web) page as the first page and from there I am navigating to view controller page.Added below function in main.js.
var tb = WL.TabBar;
tb.init();
tb.addItem("One", function () {
} ,"First", { image : ""});
tb.setVisible(true);
tb.setSelectedItem("One");
I am able to get the Tab bar items in web page.But Tab bar is not showing in any of the view controller screen.What I should do to have Worklight Tab Bar both in web and Native ios Screen.Help me to solve this.
Worklight uses Cordova, so when you launch your application what you see is the generated Cordova Web View by Worklight.
When you navigate to a native page (in your case, a new Class), you are essentially moving away from the Web View and into another View Controller, so you will not see the WL.TabBar instance in that View Controller (the tabbar belongs to the other one).
The following blog post contains background information on the architecture of a Worklight app and explains how to combine native controllers, such as a tabbar, in Cordova-based apps. Read it thoroughly and implement accordingly:
Combining native and web controls in Cordova based applications
For Web, use the Worklight Tab bar control -- as you have already done it.
For Native, you have to design a tab in the native code.
As suggested by #Idan, afterwards you have to establish communication/interaction between.
Read more: Combining native and web controls in Cordova based applications
If you are using worklight ,you can integrate both native and web codes,but it is bit tricky,and difficult to handle all the controls from native to web pages,and loading different pages onclick of tabs.
It is better to implement custom web tab bar look like native tab bar.
You can design custom tab bar in web more similar to native.
I've build a test app with phonegap build using only the jquery mobile example file.
In the browser the style is white (see the link: http://view.jquerymobile.com/1.3.2/dist/demos/examples/ ) but in the app i see the header and the buttons in the black version.
Anyone have some idea to solve this?
Tnx
Did you try changing the data-theme='a'. The data-theme controls what the buttons and background look like and Jquery mobile has created a standard set of swatches. http://jquerymobile.com/demos/1.1.1/docs/api/themes.html - check this out for more information on changeing the colors or themeing.
I am trying to create a menu like the one on Instragram, with the central item using a special design, but the Titanium Documentation does not provide information about this kind of feature
There's an example with an already answered question in here: How do you create a raised tab bar item, like is found in Instagram? but I need it working on titanium, any clues?
You can mimic that by following these steps;
(This is hackish but the only way for now)
Create the tab group
var tabGroup = Titanium.UI.createTabGroup({
id:"bottomTabs",
bottom:-50
});
Add tabs as much as you need
var tabTimeline = Titanium.UI.createTab({
icon:"icons/btn_timeline#2x.png",
title:"Timeline",
});
Create a button without a title to mimic the raised tab bar like in Instagram.
var btnScan = Titanium.UI.createButton({
backgroundImage:'icons/btn_action.png',
width:46,
height:46,
title:'',
bottom:0
});
Add that button to the tab group.
tabGroup.add(btnScan);
(hope someday titanium supports more low level APIs as well)
I believe Instagram is written in Objective-C. Creating a custom tab bar as they have made involves subclassing the native tab bar, but you don't have the ability to do that with just JS and Titanium.
Here's a tutorial for faking a custom tab bar in Titanium, which involves creating a window with buttons that controls the real tab bar.
http://www.samjordan.co.uk/2011/02/tutorial-custom-iphone-tabbar-using-appcelerator-titanium/
I don't know for which platform Instragram is developed in Titanium but I know about this type of tabs. I have created similar type of tab for one of my project so i can say that this is not built in tab you have to create it at your own.
you have to design icons, backgrounds, raised background and write logic to get this work same as Tab using available UI widgets like views, imageview and labe.
Hope you will be able write logic for this. According to my knowledge this is not built in tab, it's a custom tab.