I have a requirement where I want to remove the borders from the SegmentedBar on iOS. I figured the best way to do this is by extending the existing SegmentedBar and overriding the insert tab method. In the insert tab event, I can set the background to a clear image and even remove the separators.
In my components folder, I've created a custom plugin as follows:
.common file:
import * as app from 'application';
import * as dialogs from 'ui/dialogs';
import definition = require("ui/segmented-bar");
export class MSegmentedBar extends definition.SegmentedBar {
constructor() {
super();
console.log('Plugin is working!!');
}
}
.ios file:
import common = require("./msegmentedbar.common");
export class MSegmentedBar extends common.MSegmentedBar {
constructor() {
super();
}
}
and then reference it in my view:
<Border xmlns:x="components/msegmentedbar/msegmentedbar">
<GridLayout rows="auto, *">
<x:MSegmentedBar id="group-bar">
<SegmentedBar.items>
<SegmentedBarItem title="Now" selectedTextColor="#fff" borderColor="transparent" />
<SegmentedBarItem title="Today" selectedTextColor="#fff" />
<SegmentedBarItem title="Week" selectedTextColor="#fff" />
<SegmentedBarItem title="Month" selectedTextColor="#fff" />
</SegmentedBar.items>
</x:MSegmentedBar>
...
Because not all the delegates are exported, the app runs, shows the console.log messages but doesn't render the items. If I do any sort of binding on the selectedIndex, it throws an exception.
Is it possible at all to make this work or should we wait till the team completely exposes all the delegates?
Additional info
NativeScript: 2.2.1
tns-core-modues: 2.2.1
Platform: iOS
I have a requirement where I want to remove the borders from the SegmentedBar on iOS. I figured the best way to do this is by extending the existing SegmentedBar and overriding the insert tab method. In the insert tab event, I can set the background to a clear image and even remove the separators.
In my components folder, I've created a custom plugin as follows:
.common file:
import * as app from 'application'; import * as dialogs from 'ui/dialogs'; import definition = require("ui/segmented-bar"); export class MSegmentedBar extends definition.SegmentedBar { constructor() { super(); console.log('Plugin is working!!'); } }.ios file:
import common = require("./msegmentedbar.common"); export class MSegmentedBar extends common.MSegmentedBar { constructor() { super(); } }and then reference it in my view:
<Border xmlns:x="components/msegmentedbar/msegmentedbar"> <GridLayout rows="auto, *"> <x:MSegmentedBar id="group-bar"> <SegmentedBar.items> <SegmentedBarItem title="Now" selectedTextColor="#fff" borderColor="transparent" /> <SegmentedBarItem title="Today" selectedTextColor="#fff" /> <SegmentedBarItem title="Week" selectedTextColor="#fff" /> <SegmentedBarItem title="Month" selectedTextColor="#fff" /> </SegmentedBar.items> </x:MSegmentedBar> ...Because not all the delegates are exported, the app runs, shows the console.log messages but doesn't render the items. If I do any sort of binding on the selectedIndex, it throws an exception.
Is it possible at all to make this work or should we wait till the team completely exposes all the delegates?
Additional info
NativeScript: 2.2.1
tns-core-modues: 2.2.1
Platform: iOS