@nativescript-community/ui-segmentedbar 1.4.1 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +8 -1
- package/index-common.d.ts +3 -0
- package/index-common.js +13 -1
- package/index-common.js.map +1 -1
- package/index.android.d.ts +4 -1
- package/index.android.js +19 -3
- package/index.android.js.map +1 -1
- package/index.d.ts +14 -1
- package/index.ios.d.ts +4 -1
- package/index.ios.js +11 -1
- package/index.ios.js.map +1 -1
- package/package.json +3 -3
- package/platforms/android/native-api-usage.json +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.5.0](https://github.com/nativescript-community/ui-native-components/compare/v1.4.2...v1.5.0) (2026-11-04)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **ui-segmentedbar:** add apportionsSegmentWidthsByContent and item width ([67264b9](https://github.com/nativescript-community/ui-native-components/commit/67264b9fc96e712e42e305df0619ebb5583bba0f))
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* **ui-segmentedbar:** size the Android segments to their content ([2adada4](https://github.com/nativescript-community/ui-native-components/commit/2adada421220dd12c868ef83d198ea296f029136))
|
|
15
|
+
|
|
16
|
+
## [1.4.2](https://github.com/nativescript-community/ui-native-components/compare/v1.4.1...v1.4.2) (2026-10-30)
|
|
17
|
+
|
|
18
|
+
**Note:** Version bump only for package @nativescript-community/ui-segmentedbar
|
|
19
|
+
|
|
6
20
|
## [1.4.1](https://github.com/nativescript-community/ui-native-components/compare/v1.4.0...v1.4.1) (2026-10-30)
|
|
7
21
|
|
|
8
22
|
**Note:** Version bump only for package @nativescript-community/ui-segmentedbar
|
package/README.md
CHANGED
|
@@ -88,12 +88,19 @@ The Android components use **Material 3**: see the [repository README](https://g
|
|
|
88
88
|
|
|
89
89
|
## API
|
|
90
90
|
|
|
91
|
-
Same API as the core `SegmentedBar`, and `
|
|
91
|
+
Same API as the core `SegmentedBar`, and `SegmentedBar` adds:
|
|
92
|
+
|
|
93
|
+
| Property | |
|
|
94
|
+
|---|---|
|
|
95
|
+
| `apportionsSegmentWidthsByContent` | `true` (default): a segment is as wide as its content. `false`: all the segments are as wide as the widest. With an explicit `width` on the bar, the extra width is shared between the segments |
|
|
96
|
+
|
|
97
|
+
`SegmentedBarItem` adds:
|
|
92
98
|
|
|
93
99
|
| Property | |
|
|
94
100
|
|---|---|
|
|
95
101
|
| `src` | icon: file, resource, url, `font://`, `sys://` (SF Symbol), an ImageSource or a FormattedString (spans drawn into an icon) |
|
|
96
102
|
| `formattedText` | spans. On iOS they are drawn as an image (`UISegmentedControl` only shows plain titles). Uses `@nativescript-community/text` when installed (optional) |
|
|
103
|
+
| `width` | width of the segment in dip. Automatic (the width of the content) when not set |
|
|
97
104
|
|
|
98
105
|
|
|
99
106
|
[](#demos-and-development)
|
package/index-common.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { SegmentedBarBase, SegmentedBarItemBase };
|
|
|
7
7
|
*/
|
|
8
8
|
export declare class SegmentedBarItem extends SegmentedBarItemBase {
|
|
9
9
|
src: string | ImageSource | FormattedString;
|
|
10
|
+
width: number;
|
|
10
11
|
/**
|
|
11
12
|
* @internal true for the icons drawn from spans: they keep their colors
|
|
12
13
|
*/
|
|
@@ -33,3 +34,5 @@ export declare class SegmentedBarItem extends SegmentedBarItemBase {
|
|
|
33
34
|
_update(): void;
|
|
34
35
|
}
|
|
35
36
|
export declare const srcProperty: Property<SegmentedBarItem, string | ImageSource | FormattedString>;
|
|
37
|
+
export declare const widthProperty: Property<SegmentedBarItem, number>;
|
|
38
|
+
export declare const apportionsSegmentWidthsByContentProperty: Property<SegmentedBarBase, boolean>;
|
package/index-common.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { renderFormattedTextToImageSource } from '@nativescript-community/ui-core/formatted-text';
|
|
2
|
-
import { Color, FormattedString, ImageSource, Label, Property, Span, Utils } from '@nativescript/core';
|
|
2
|
+
import { Color, FormattedString, ImageSource, Label, Property, Span, Utils, booleanConverter } from '@nativescript/core';
|
|
3
3
|
import { SegmentedBarBase, SegmentedBarItemBase } from '@nativescript/core/ui/segmented-bar/segmented-bar-common';
|
|
4
4
|
export { SegmentedBarBase, SegmentedBarItemBase };
|
|
5
5
|
/**
|
|
@@ -98,4 +98,16 @@ export const srcProperty = new Property({
|
|
|
98
98
|
}
|
|
99
99
|
});
|
|
100
100
|
srcProperty.register(SegmentedBarItem);
|
|
101
|
+
export const widthProperty = new Property({
|
|
102
|
+
name: 'width',
|
|
103
|
+
valueConverter: parseFloat,
|
|
104
|
+
valueChanged: (target) => target._update()
|
|
105
|
+
});
|
|
106
|
+
widthProperty.register(SegmentedBarItem);
|
|
107
|
+
export const apportionsSegmentWidthsByContentProperty = new Property({
|
|
108
|
+
name: 'apportionsSegmentWidthsByContent',
|
|
109
|
+
defaultValue: true,
|
|
110
|
+
valueConverter: booleanConverter
|
|
111
|
+
});
|
|
112
|
+
apportionsSegmentWidthsByContentProperty.register(SegmentedBarBase);
|
|
101
113
|
//# sourceMappingURL=index-common.js.map
|
package/index-common.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-common.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index-common.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,gDAAgD,CAAC;AAClG,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index-common.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index-common.ts"],"names":[],"mappings":"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"}
|
package/index.android.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { itemsProperty, selectedIndexProperty } from '@nativescript/core/ui/segmented-bar/segmented-bar-common';
|
|
2
|
-
import { SegmentedBarBase, SegmentedBarItem } from './index-common';
|
|
2
|
+
import { SegmentedBarBase, SegmentedBarItem, apportionsSegmentWidthsByContentProperty } from './index-common';
|
|
3
3
|
export { SegmentedBarItem };
|
|
4
4
|
type ToggleGroup = com.google.android.material.button.MaterialButtonToggleGroup & {
|
|
5
5
|
listener: com.google.android.material.button.MaterialButtonToggleGroup.OnButtonCheckedListener;
|
|
@@ -8,16 +8,19 @@ type ToggleGroup = com.google.android.material.button.MaterialButtonToggleGroup
|
|
|
8
8
|
* Android: Material 3 segmented buttons (MaterialButtonToggleGroup with outlined buttons).
|
|
9
9
|
*/
|
|
10
10
|
export declare class SegmentedBar extends SegmentedBarBase {
|
|
11
|
+
[apportionsSegmentWidthsByContentProperty.setNative]: (value: boolean) => void;
|
|
11
12
|
[selectedIndexProperty.getDefault]: () => number;
|
|
12
13
|
[selectedIndexProperty.setNative]: (value: number) => void;
|
|
13
14
|
[itemsProperty.getDefault]: () => SegmentedBarItem[];
|
|
14
15
|
[itemsProperty.setNative]: (value: SegmentedBarItem[]) => void;
|
|
15
16
|
nativeViewProtected: ToggleGroup;
|
|
16
17
|
items: SegmentedBarItem[];
|
|
18
|
+
apportionsSegmentWidthsByContent: boolean;
|
|
17
19
|
createNativeView(): com.google.android.material.button.MaterialButtonToggleGroup;
|
|
18
20
|
initNativeView(): void;
|
|
19
21
|
disposeNativeView(): void;
|
|
20
22
|
private applyItem;
|
|
21
23
|
updateItem(item: SegmentedBarItem): void;
|
|
24
|
+
private createLayoutParams;
|
|
22
25
|
private insertItem;
|
|
23
26
|
}
|
package/index.android.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createNativeFormattedText } from '@nativescript-community/ui-core/formatted-text';
|
|
2
2
|
import { Utils } from '@nativescript/core';
|
|
3
3
|
import { itemsProperty, selectedIndexProperty } from '@nativescript/core/ui/segmented-bar/segmented-bar-common';
|
|
4
|
-
import { SegmentedBarBase, SegmentedBarItem } from './index-common';
|
|
4
|
+
import { SegmentedBarBase, SegmentedBarItem, apportionsSegmentWidthsByContentProperty } from './index-common';
|
|
5
5
|
export { SegmentedBarItem };
|
|
6
6
|
// Material 3 segmented buttons are 40dp high
|
|
7
7
|
const SEGMENT_HEIGHT = 40;
|
|
@@ -65,8 +65,25 @@ export class SegmentedBar extends SegmentedBarBase {
|
|
|
65
65
|
const button = index >= 0 ? this.nativeViewProtected?.getChildAt(index) : null;
|
|
66
66
|
if (button) {
|
|
67
67
|
this.applyItem(button, item);
|
|
68
|
+
button.setLayoutParams(this.createLayoutParams(item));
|
|
68
69
|
}
|
|
69
70
|
}
|
|
71
|
+
createLayoutParams(item) {
|
|
72
|
+
const height = Utils.layout.toDevicePixels(SEGMENT_HEIGHT);
|
|
73
|
+
if (item.width > 0) {
|
|
74
|
+
return new android.widget.LinearLayout.LayoutParams(Utils.layout.toDevicePixels(item.width), height);
|
|
75
|
+
}
|
|
76
|
+
// by content a segment is never narrower than its text, otherwise all the segments get an equal share.
|
|
77
|
+
// The weight shares the extra width of a stretched group
|
|
78
|
+
const width = this.apportionsSegmentWidthsByContent ? android.view.ViewGroup.LayoutParams.WRAP_CONTENT : 0;
|
|
79
|
+
return new android.widget.LinearLayout.LayoutParams(width, height, 1);
|
|
80
|
+
}
|
|
81
|
+
[apportionsSegmentWidthsByContentProperty.setNative](value) {
|
|
82
|
+
const nativeView = this.nativeViewProtected;
|
|
83
|
+
// equal segments are as wide as the widest, like UISegmentedControl
|
|
84
|
+
nativeView.setMeasureWithLargestChildEnabled(!value);
|
|
85
|
+
this.items?.forEach((item, index) => nativeView.getChildAt(index)?.setLayoutParams(this.createLayoutParams(item)));
|
|
86
|
+
}
|
|
70
87
|
insertItem(item) {
|
|
71
88
|
// the R classes are not in the metadata of the apps: the attribute is found by name
|
|
72
89
|
const style = this._context.getResources().getIdentifier('materialButtonOutlinedStyle', 'attr', this._context.getPackageName());
|
|
@@ -78,8 +95,7 @@ export class SegmentedBar extends SegmentedBarBase {
|
|
|
78
95
|
button.setMinHeight(height);
|
|
79
96
|
button.setMinimumHeight(height);
|
|
80
97
|
this.applyItem(button, item);
|
|
81
|
-
|
|
82
|
-
this.nativeViewProtected.addView(button, new android.widget.LinearLayout.LayoutParams(0, height, 1));
|
|
98
|
+
this.nativeViewProtected.addView(button, this.createLayoutParams(item));
|
|
83
99
|
}
|
|
84
100
|
[selectedIndexProperty.getDefault]() {
|
|
85
101
|
return -1;
|
package/index.android.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AAChH,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index.android.ts"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -12,6 +12,12 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
|
|
|
12
12
|
* On iOS a segment shows either the title or the icon (the title wins).
|
|
13
13
|
*/
|
|
14
14
|
src: string | ImageSource | FormattedString;
|
|
15
|
+
/**
|
|
16
|
+
* Width of the segment in device independent pixels. A segment is as wide as its content when not set, and a stretched bar shares the extra width.
|
|
17
|
+
* A text wider than the segment is truncated.
|
|
18
|
+
* @default 0 (automatic)
|
|
19
|
+
*/
|
|
20
|
+
width: number;
|
|
15
21
|
/**
|
|
16
22
|
* Rich text (spans) of the segment, it wins over the title.
|
|
17
23
|
* `@nativescript-community/text` is used when installed (optional).
|
|
@@ -20,4 +26,11 @@ export class SegmentedBarItem extends SegmentedBarItemBase {
|
|
|
20
26
|
formattedText: FormattedString;
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
export class SegmentedBar extends CoreSegmentedBar {
|
|
29
|
+
export class SegmentedBar extends CoreSegmentedBar {
|
|
30
|
+
/**
|
|
31
|
+
* Whether a segment is as wide as its content, or all the segments are as wide as the widest one.
|
|
32
|
+
* An explicit `width` of the bar or of a segment changes the result: the extra width of the bar is shared between the segments.
|
|
33
|
+
* @default true
|
|
34
|
+
*/
|
|
35
|
+
apportionsSegmentWidthsByContent: boolean;
|
|
36
|
+
}
|
package/index.ios.d.ts
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { SegmentedBar as CoreSegmentedBar } from '@nativescript/core';
|
|
2
2
|
import { itemsProperty } from '@nativescript/core/ui/segmented-bar/segmented-bar-common';
|
|
3
|
-
import { SegmentedBarItem } from './index-common';
|
|
3
|
+
import { SegmentedBarItem, apportionsSegmentWidthsByContentProperty } from './index-common';
|
|
4
4
|
export { SegmentedBarItem };
|
|
5
5
|
export declare class SegmentedBar extends CoreSegmentedBar {
|
|
6
|
+
[apportionsSegmentWidthsByContentProperty.setNative]: (value: boolean) => void;
|
|
6
7
|
[itemsProperty.setNative]: (value: SegmentedBarItem[]) => void;
|
|
7
8
|
items: SegmentedBarItem[];
|
|
9
|
+
apportionsSegmentWidthsByContent: boolean;
|
|
10
|
+
initNativeView(): void;
|
|
8
11
|
updateItem(item: SegmentedBarItem): void;
|
|
9
12
|
}
|
package/index.ios.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createNativeFormattedText, renderAttributedStringToImage } from '@nativescript-community/ui-core/formatted-text';
|
|
2
2
|
import { SegmentedBar as CoreSegmentedBar } from '@nativescript/core';
|
|
3
3
|
import { itemsProperty, selectedIndexProperty } from '@nativescript/core/ui/segmented-bar/segmented-bar-common';
|
|
4
|
-
import { SegmentedBarItem } from './index-common';
|
|
4
|
+
import { SegmentedBarItem, apportionsSegmentWidthsByContentProperty } from './index-common';
|
|
5
5
|
export { SegmentedBarItem };
|
|
6
6
|
/**
|
|
7
7
|
* Puts the title or the icon of the item at its position in the control.
|
|
@@ -30,8 +30,18 @@ function applyItem(control, item, index, insert = false) {
|
|
|
30
30
|
else if (insert) {
|
|
31
31
|
control.insertSegmentWithTitleAtIndexAnimated('', index, false);
|
|
32
32
|
}
|
|
33
|
+
// 0 is the automatic width
|
|
34
|
+
control.setWidthForSegmentAtIndex(item.width > 0 ? item.width : 0, index);
|
|
33
35
|
}
|
|
34
36
|
export class SegmentedBar extends CoreSegmentedBar {
|
|
37
|
+
initNativeView() {
|
|
38
|
+
super.initNativeView();
|
|
39
|
+
// the default is not applied by the property
|
|
40
|
+
this.ios.apportionsSegmentWidthsByContent = this.apportionsSegmentWidthsByContent;
|
|
41
|
+
}
|
|
42
|
+
[apportionsSegmentWidthsByContentProperty.setNative](value) {
|
|
43
|
+
this.ios.apportionsSegmentWidthsByContent = value;
|
|
44
|
+
}
|
|
35
45
|
updateItem(item) {
|
|
36
46
|
const index = this.items?.indexOf(item) ?? -1;
|
|
37
47
|
if (this.ios && index >= 0) {
|
package/index.ios.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index.ios.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,6BAA6B,EAAE,MAAM,gDAAgD,CAAC;AAC1H,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AAChH,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../src/ui-segmentedbar/index.ios.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nativescript-community/ui-segmentedbar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "Segmented control: MaterialButtonToggleGroup on Android, native UISegmentedControl on iOS, with icon items.",
|
|
5
5
|
"main": "./index",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"readmeFilename": "README.md",
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@nativescript-community/ui-core": "^1.
|
|
47
|
+
"@nativescript-community/ui-core": "^1.5.0"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "1630146218836206fda6a66ec9ae0910c53f5615"
|
|
50
50
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
"android.content.res:Resources",
|
|
4
4
|
"android.graphics.drawable:BitmapDrawable",
|
|
5
5
|
"android.graphics:Bitmap",
|
|
6
|
+
"android.view:ViewGroup.LayoutParams",
|
|
6
7
|
"android.widget:LinearLayout.LayoutParams",
|
|
7
8
|
"com.google.android.material.button:MaterialButton",
|
|
8
9
|
"com.google.android.material.button:MaterialButtonToggleGroup",
|