nativescript-community / nativescript-community/ui-pager
Indicator is not shown when it has PagerItems defined, the property showIndicator is true
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
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>```
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the provided NativeScript-Vue example with PagerItems, showIndicator="true", and the listed dependencies. Trace the Pager and PagerItem indicator handling, then verify that the indicator appears for the four-item example without changing the reported configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100