Tab Bar Icons for Mobile
I am creating one mobile app which has tab bar with icons. Hereby attaching the screen shot.
For these tabs crested button list and added buttons. Also created sub theme and css in Properties.
But not able to view icons using the css that I have added. I need different icons on hover and visited. Please let me know how we can achieve this?
Also for "tablets" tabs there should be some spacing between those tabs. How to achieve this as well depending upon Mobile device width.
Sub Theme
{ buttonList: {
navigation5: {
button: {
className: 'iOSNavButton5',
firstClassName: '',
lastClassName: '',
middleClassName: '',
hoverClassName: '',
pressedClassName: '',
disabledClassName: ''
}
}
},
button: {
homeBtn: {
className: 'iOSHomeButton1',
hoverClassName: '',
pressedClassName: 'iOSHomeButton1Pressed',
disabledClassName: 'iOSHomeButton1Disabled'
},
searchBtn: {
className: 'iOSSearchButton1',
hoverClassName: '',
pressedClassName: 'iOSSearchButton1Pressed',
disabledClassName: 'iOSSearchButton1Disabled'
},
contactBtn: {
className: 'iOSContactButton1',
hoverClassName: '',
pressedClassName: 'iOSContactButton1Pressed',
disabledClassName: 'iOSContactButton1Disabled'
},
feedbackBtn: {
className: 'iOSFeedbackButton1',
hoverClassName: '',
pressedClassName: 'iOSFeedbackButton1Pressed',
disabledClassName: 'iOSFeedbackButton1Disabled'
}
},
panelCard: {
myPanelTheme: {
footer: {className: 'iOSMyPanelFooter'}
}
}
}
CSS
.iOSNavButton5 {
background:#000000;
border: none;
width: 20%;
padding: 0px;
margin: 0px;
font-size: 12px;
color: #ffffff
}
.iOSHomeButton1{
background-image:url('css/images/tabHome-01.png');
}
.iOSHomeButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSSearchButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
background-image:url('C:\AlphaMobileApp.WebProjects\Test.WebProject\tabSearch-01.png');
}
.iOSSearchButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSContactButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
}
.iOSContactButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSFeedbackButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
}
.iOSFeedbackButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSMyPanelFooter{
background: -webkit-linear-gradient(top, #4f4f4f 50%, #000 50%);
background: -moz-linear-gradient(top, #4f4f4f 50%, #000 50%);
height: 50px;}
I am creating one mobile app which has tab bar with icons. Hereby attaching the screen shot.
For these tabs crested button list and added buttons. Also created sub theme and css in Properties.
But not able to view icons using the css that I have added. I need different icons on hover and visited. Please let me know how we can achieve this?
Also for "tablets" tabs there should be some spacing between those tabs. How to achieve this as well depending upon Mobile device width.
Sub Theme
{ buttonList: {
navigation5: {
button: {
className: 'iOSNavButton5',
firstClassName: '',
lastClassName: '',
middleClassName: '',
hoverClassName: '',
pressedClassName: '',
disabledClassName: ''
}
}
},
button: {
homeBtn: {
className: 'iOSHomeButton1',
hoverClassName: '',
pressedClassName: 'iOSHomeButton1Pressed',
disabledClassName: 'iOSHomeButton1Disabled'
},
searchBtn: {
className: 'iOSSearchButton1',
hoverClassName: '',
pressedClassName: 'iOSSearchButton1Pressed',
disabledClassName: 'iOSSearchButton1Disabled'
},
contactBtn: {
className: 'iOSContactButton1',
hoverClassName: '',
pressedClassName: 'iOSContactButton1Pressed',
disabledClassName: 'iOSContactButton1Disabled'
},
feedbackBtn: {
className: 'iOSFeedbackButton1',
hoverClassName: '',
pressedClassName: 'iOSFeedbackButton1Pressed',
disabledClassName: 'iOSFeedbackButton1Disabled'
}
},
panelCard: {
myPanelTheme: {
footer: {className: 'iOSMyPanelFooter'}
}
}
}
CSS
.iOSNavButton5 {
background:#000000;
border: none;
width: 20%;
padding: 0px;
margin: 0px;
font-size: 12px;
color: #ffffff
}
.iOSHomeButton1{
background-image:url('css/images/tabHome-01.png');
}
.iOSHomeButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSSearchButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
background-image:url('C:\AlphaMobileApp.WebProjects\Test.WebProject\tabSearch-01.png');
}
.iOSSearchButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSContactButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
}
.iOSContactButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSFeedbackButton1
{
background-color:transparent; height:50px; width:70px;
border:0px; color:#ffffff; font-family:Verdana;
}
.iOSFeedbackButton1Pressed{
border:0px; color:#ffffff; font-family:Verdana;
background: -webkit-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
background: -moz-linear-gradient(top, #0cc1f0 30%, #0a6eae 70%);
}
.iOSMyPanelFooter{
background: -webkit-linear-gradient(top, #4f4f4f 50%, #000 50%);
background: -moz-linear-gradient(top, #4f4f4f 50%, #000 50%);
height: 50px;}
Comment