From a1930c29b4297a85b705756bbabf2d3e7ec39449 Mon Sep 17 00:00:00 2001 From: Michael Gangolf Date: Sat, 14 Dec 2024 16:16:41 +0100 Subject: [PATCH] chore: apidoc --- apidoc/Titanium/UI/Tab.yml | 19 +++++++++++ apidoc/Titanium/UI/TabGroup.yml | 58 +++++++++++++++++++++++++++------ 2 files changed, 67 insertions(+), 10 deletions(-) diff --git a/apidoc/Titanium/UI/Tab.yml b/apidoc/Titanium/UI/Tab.yml index 82b2d91f613..629d2fc7ac1 100644 --- a/apidoc/Titanium/UI/Tab.yml +++ b/apidoc/Titanium/UI/Tab.yml @@ -253,7 +253,26 @@ properties: (https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/image-size-and-resolution/), this image will be scaled to fit if used with activeIcon, and cropped at the bottom otherwise. + + #### Android Tab Icons + Can be used in combination with `iconFamily` in a BottomNavigation setup with `newLayout:true`. + type: String + + - name: iconFamily + summary: Specifies the font family or specific font to use. + description: | + When using a BottomNavigation setup with `newLayout:true` you can use this property in combination + with an `icon` to use an icon-font for the tab icons: + + ``` js + '#tab1': { + icon: "\ueac1", + iconFamily: "tabler-icons" + } + ``` + since: "12.7.0" type: String + platforms: [android] - name: iconInsets summary: The icon inset or outset for each edge. diff --git a/apidoc/Titanium/UI/TabGroup.yml b/apidoc/Titanium/UI/TabGroup.yml index 3169363cf18..12245fd342a 100644 --- a/apidoc/Titanium/UI/TabGroup.yml +++ b/apidoc/Titanium/UI/TabGroup.yml @@ -26,14 +26,7 @@ description: | one to be opened later, but the root of the application must be a heavyweight window to prevent it exiting. Tabs cannot be removed from the tab group once added, and tabs cannot be reordered. - * If you use a BottomNavigation on Android with a Material 3 theme you'll have to create a file - `/app/platform/android/res/values/dimens.xml` and add to fix the height of the menu: - ```xml - - - 80dp - - ``` + * If you use a BottomNavigation on Android with a Material 3 theme you should set `newLayout:true`. * On iOS, more than one tab group may exist, and may be opened and closed as required. Each tab can contain a stack of windows, and the user can switch between them by tapping the @@ -440,7 +433,7 @@ properties: summary: The color of the status bar (top bar) for this window. type: [Number] platforms: [android] - since: {android: "12.6.0"} + since: {android: "12.7.0"} - name: style summary: Property defining which style for the TabGroup to be used. @@ -541,7 +534,7 @@ properties: Use to set the status bar text color to light mode. platforms: [android] type: Number - since: "12.6.0" + since: "12.7.0" availability: creation - name: activeTintColor @@ -643,6 +636,17 @@ properties: since: "12.5.0" availability: creation + - name: newLayout + summary: | + Only used for a BottomNavigation setup. If set to `true` it will use an optimized BottomNavigation + setup with fixes for Material 3 layouts and new properties: `indicatorColor` and `iconFamily`. + The new BottomNavigation will only load the active Activity and doesn't support `swipeable`. + type: Boolean + default: false + platforms: [android] + since: "12.7.0" + availability: creation + examples: - title: Alloy XML Markup example: | @@ -727,6 +731,40 @@ examples: }); tabGroup.open(); ``` + + - title: BottomNavigation Material3 example + example: | + Create a BottomNavigation TabGroup with a Material3 theme using the new layout. + + ``` js + const win1 = Ti.UI.createWindow(); + const win2 = Ti.UI.createWindow(); + const tab1 = Ti.UI.createTab({ + window: win1, + title: 'Tab 1', + icon: '/images/appicon.png' + }); + const tab2 = Ti.UI.createTab({ + window: win2, + title: 'Tab 2', + icon: '/images/appicon.png' + }); + + win1.add(Ti.UI.createLabel({text: "Tab 1 - click to set badge"})); + win2.add(Ti.UI.createLabel({text: "Tab 2"})); + win1.addEventListener("click", function() { + tab1.badge = 20; + }); + + const bottomNav = Ti.UI.createTabGroup({ + tabs: [tab1, tab2], + theme: "Theme.Titanium.Material3.DayNight", + newLayout: true, + style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION + }); + + bottomNav.open(); + ``` --- name: disableTabOptions summary: Dictionary of options for the method.