react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
272 lines (271 loc) • 8.15 kB
JSON
{
"name": "PageControl",
"category": "navigation",
"description": "Page indicator, typically used in paged scroll-views",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PageControlScreen.tsx",
"images": [
"https://user-images.githubusercontent.com/1780255/107114259-2e278d00-686d-11eb-866c-59f3d410d6c3.gif"
],
"props": [
{
"name": "limitShownPages",
"type": "boolean",
"description": "Limit the number of page indicators shown.\\enlargeActive prop is disabled in this state, when set to true there will be maximum of 7 shown.\\Only relevant when numOfPages > 5."
},
{
"name": "containerStyle",
"type": "ViewStyle",
"description": "Additional styles for the top container"
},
{
"name": "numOfPages",
"required": true,
"type": "number",
"description": "Total number of pages"
},
{
"name": "currentPage",
"required": true,
"type": "number",
"description": "Zero-based index of the current page"
},
{
"name": "onPagePress",
"type": "(index: number) => void",
"description": "Action handler for clicking on a page indicator"
},
{
"name": "color",
"type": "string",
"description": "Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages",
"default": "Colors.$iconPrimary"
},
{
"name": "inactiveColor",
"type": "string",
"description": "Color of the unselected page dots and the border of the not selected pages"
},
{
"name": "size",
"type": "number | [number, number, number]",
"description": "The size of the page indicator.\\When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.\\An alternative is to send an array [smallSize, mediumSize, largeSize].",
"default": "10"
},
{
"name": "enlargeActive",
"type": "boolean",
"description": "Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect.",
"default": "false"
},
{
"name": "spacing",
"type": "number",
"description": "The space between the siblings page indicators",
"default": "4"
},
{
"name": "testID",
"type": "string",
"description": "Used to identify the pageControl in tests"
}
],
"snippet": [
"<PageControl numOfPages={5$1} currentPage={0$2}/>"
],
"docs": {
"hero": {
"title": "PageControl",
"description": "Page Control provides orientation by showing the total number of items and indicating the currently visible item.\nIt is most commonly used in components such as galleries, card carousels, and slideshows.",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/PageControl/Preview.png"
}
]
},
"tabs": [
{
"title": "UX Guidelines",
"sections": [
{
"type": "section",
"content": [
{
"value": "https://embed.figma.com/design/Krv1pLl7kq2L52vMRwd498/MADS-Guidelines?node-id=22898-649490&embed-host=share",
"height": 1600
}
]
}
]
},
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Usage Examples",
"description": "",
"content": [
{
"value": "\"https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=13804-18246&embed-host=share\""
}
]
},
{
"type": "table",
"columns": [
"Point of reference",
"Swipe forward (left)",
"Swipe back (right)"
],
"items": [
{
"title": "1st item",
"description": "",
"content": [
{
"props": {
"numOfPages": 7,
"currentPage": 1
}
},
{
"props": {
"numOfPages": 7,
"currentPage": 7
}
}
]
},
{
"title": "2nd item",
"description": "",
"content": [
{
"props": {
"numOfPages": 7,
"currentPage": 2
}
},
{
"props": {
"numOfPages": 7,
"currentPage": 6
}
}
]
},
{
"title": "3rd item",
"description": "",
"content": [
{
"props": {
"numOfPages": 7,
"currentPage": 3
}
},
{
"props": {
"numOfPages": 10,
"currentPage": 4
}
}
]
},
{
"title": "4th item",
"description": ""
},
{
"title": "5th item up to 3rd from the last",
"description": "",
"content": [
{
"props": {
"numOfPages": 10,
"currentPage": 5
}
},
{
"props": {
"numOfPages": 10,
"currentPage": 4
}
}
]
},
{
"title": "3rd from the last",
"description": "",
"content": [
{
"props": {
"numOfPages": 10,
"currentPage": 8
}
},
{
"props": {
"numOfPages": 10,
"currentPage": 3
}
}
]
},
{
"title": "One before last item",
"description": "",
"content": [
{
"props": {
"numOfPages": 10,
"currentPage": 9
}
},
{
"props": {
"numOfPages": 10,
"currentPage": 2
}
}
]
},
{
"title": "Last item",
"description": "",
"content": [
{
"props": {
"numOfPages": 10,
"currentPage": 10
}
},
{
"props": {
"numOfPages": 10,
"currentPage": 1
}
}
]
}
],
"title": "Page control display",
"description": ""
},
{
"type": "section",
"title": "Spec",
"description": "",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/PageControl/spec.png"
}
]
}
]
}
]
}
}