Page 1 of 1
[MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 10:46 am
by Caronte3D
I think this kind of things should be part of the MobileUI implementation, but in the mean time, you can use workarounds like this one:
Code: Select all
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
ButtonMobile(0, "Button Small",#PB_Mobile_Right)
ButtonMobile(1, "Button Large")
CloseMobileContainer()
EndIf
CloseMobileContainer()
EndIf
;This line does the trick and you can modify it to do more similar things:
! $('ons-button:contains("Button Large")').attr('modifier', 'large');
EDIT:
viewtopic.php?p=10602#p10602
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 11:30 am
by Peter
However, this only works if the button has a specific text.
This one is a little more flexible:
Code: Select all
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
ButtonMobile(0, "Button Small",#PB_Mobile_Right)
LargeButton = ButtonMobile(1, "Hello World!")
! $(v_largebutton.gadget).attr('modifier', 'large');
CloseMobileContainer()
EndIf
CloseMobileContainer()
EndIf
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 11:45 am
by Caronte3D
Perfect!
Thanks Peter
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 2:02 pm
by Fred
May be SetMobileAttribute() can work as well (not tested)
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 2:28 pm
by Fred
Caronte3D wrote: Mon Oct 14, 2024 10:46 am
I think this kind of things should be part of the MobileUI implementation
Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 3:26 pm
by Peter
Fred wrote: Mon Oct 14, 2024 2:02 pmMay be SetMobileAttribute() can work as well (not tested)
Code: Select all
If ContainerMobile(#PB_Any, #PB_Mobile_Page, "margin:8px")
If ContainerMobile(#PB_Any, #PB_Mobile_Row, "margin:8px")
ButtonMobile(0, "Button Small",#PB_Mobile_Right)
ButtonMobile(1, "Hello World!")
CloseMobileContainer()
EndIf
CloseMobileContainer()
EndIf
SetMobileAttribute(1, "modifier", "large")
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 4:46 pm
by Caronte3D
Fred wrote: Mon Oct 14, 2024 2:02 pm
May be SetMobileAttribute() can work as well (not tested)
I missed it
but... Peter too
Fred wrote: Mon Oct 14, 2024 2:02 pm
Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.
I just started my first SB app and... for example, I think it would be better to do things a bit more logically, so that when I want to insert a component, the most common parameters are in the definition (more in tune with SB/PB gadgets).
It's like the flags... I'd love for #PB_... constants to show only the ones that work on a specific component and not have them all.
Anyway, I can survive with that, if there is a workaround to make the UI near 100% configurable
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 4:53 pm
by Caronte3D
Fred wrote: Mon Oct 14, 2024 2:28 pm
Actually I'm interested to know which features are missing from the wrapper, because I didn't created a real app with the UI for now, so I could have missed something useful.
May be make the height of components configurable is needed in most UIs, like this one I'm using to make the button x2 taller:
Code: Select all
!$(v_largebutton.gadget).css({
! 'height': function(index, currentHeight) {
! return parseFloat(currentHeight) * 2 + 'px'; // Duplicate height
! },
! 'display': 'flex',
! 'align-items': 'center', // Center vertically
! 'justify-content': 'center', // Center horizontally
! 'font-size': '1.5em' // Tweak the text size
!});
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Mon Oct 14, 2024 5:13 pm
by Quin
Caronte3D wrote: Mon Oct 14, 2024 4:46 pm
It's like the flags... I'd love for #PB_... constants to show only the ones that work on a specific component and not have them all.
+1, it puzzled me a bit when upgrading to SB 3.00, going to the flags field of a mobile call, typing #PB_, and seeing all the constants
Re: [MobileUI] Change buttons size to "large" and more...
Posted: Tue Oct 15, 2024 7:36 am
by Fred
Ha yes I didn't added them in the IDE code source. Will do for the next version