Indicator is not shown when it has PagerItems defined, the property showIndicator is true
Opened this issue · 0 comments
ebsi-lruiz commented
When defining PagerItems as Pager content, the indicator is not shown (showIndicator is set true)
I'm using nativescript-vue
Dependencies:
"@nativescript-community/ui-pager": "^13.0.37",
"@nativescript/core": "^8.2.1",
"@nativescript/android": "^8.2.2",
"@nativescript/ios": "^8.2.2",
"@nativescript/types": "^8.0.0",
"nativescript-vue": "~2.9.0"
Code:
<Page>
<ActionBar>
<Label text="Home"/>
</ActionBar>
<GridLayout height="300" width="100%" backgroundColor="white">
<Pager
height="250"
width="100%"
orientation="horizontal"
:selectedIndex="selectedIndex"
@selectedIndexChange="onSelectedIndexChanged"
verticalAlignment="top"
indicator="fill"
indicatorColor="blue"
indicatorSelectedColor="red"
showIndicator="true"
>
<PagerItem v-for="(item, i) in items" :key="i">
<GridLayout height="100%" :backgroundColor="item.color" opacity="0.5">
<Label verticalAlignment="top" :text="item.title" />
<Button verticalAlignment="middle" @tap="onTap" :text="'Click ' + item.title" />
</GridLayout>
</PagerItem>
</Pager>
</GridLayout>
</Page>
</template>
<script lang="ts">
import Vue from "nativescript-vue"
export default Vue.extend({
data() {
return {
items: [
{ title: 'First', color: '#e67e22' },
{ title: 'Second', color: '#3498db' },
{ title: 'Third', color: '#e74c3c' },
{ title: 'Fourth', color: '#9b59b6' },
],
selectedIndex: 0,
}
},
methods: {
onTap() {
console.log('***********************On tapped')
},
onSelectedIndexChanged(args: { value:number }){
this.selectedIndex = args.value;
},
}
});
</script>```