Forum Stats

  • 3,781,244 Users
  • 2,254,495 Discussions
  • 7,879,623 Comments

Discussions

Does Maf has this component or not ?

SCRUM_DEVELOPER95
SCRUM_DEVELOPER95 Member Posts: 55
edited Feb 21, 2018 1:54PM in Mobile Application Framework

Hello,
I saw telegram plus application in google play. The app has a main component (which is my goal to achieve sth alike)

please refer to this video. Here you can see my point. a component which has multiple tabs with interesting icons. whenever you change a tab you can see  a white line with animation transits below the icons.In maf we have filmstrip component that looks like the video component. Does maf has the component in the video ? can I achieve it by skining ?

Tagged:
SCRUM_DEVELOPER95

Answers

  • Suyash-Oracle
    Suyash-Oracle Member Posts: 4
    edited Feb 21, 2018 1:54PM

    Hello,

    You can get that design in your MAF app with some customization. We don't have a native tab bar out of the box as shown in the screenshot above but you can easily replicate that behavior by doing the following:

    1. Add an <amx:selectOneButton> component with 2 options.

    2. Make sure the attribute simple="true" so you don't display the label

    3. Modify the CSS styling of this component to change the background color, border at the bottom and size it as per your requirement. You may have to add pseudo-css style to get the white bar at the bottom so this will involve some CSS knowledge. You can find examples of the same online for guidance keep in mind though our MAF generated HTML will be different than the one in this example: https://codepen.io/paterson/pen/LrwEJ

    That will give you the UI as in your screenshot. After that you will have to program the logic to make any action occur when those tab/button is selected such as change the content dynamically in the page.

    Hope that helps.

    Suyash Joshi

    MAF UI Engineer

    SelectOneButton.jpg

    SCRUM_DEVELOPER95