limestone/PageViews

Provides a Limestone styled pages component with page indicator and navigation buttons.

Usage:

<PageViews>
	<PageViews.Page aria-label="This is a description for page">
		lorem ipsum ...
	</PageViews.Page>
</PageViews>

Import Usage

import PageViews from '@enact/limestone/PageViews';

Members

PageViews   Component

A PageViews that can navigate through different pages. Expects limestone/PageViewslimestone/PageViews.Page as children.

Import Usage

import PageViews from '@enact/limestone/PageViews';

Extends: limestone/PageViewslimestone/PageViews.PageViewsBase
Wrapped with: ui/Changeableui/Changeable.Changeable

Properties

autoFocus

'default-element''last-focused''none'String

Sets the strategy used to automatically focus an element within the PageViews upon render. When set to 'none', focus is not set only on the first render.

Default: 'last-focused'

Page   Component

Page for limestone/PageViewslimestone/PageViews.PageViews.

Import Usage

import {Page} from '@enact/limestone/PageViews';

Properties

children

Node

Contents of the page.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• page - The root component class

---

aria-label

String

The aria-label for the page.

Example:

<PageViews.Page aria-label="This is a description for page">

PageViewsBase   Component

A PageViews that has page indicator with corresponding pages.

Import Usage

import {PageViewsBase} from '@enact/limestone/PageViews';

Properties

bannerMode

Boolean

When true, disables Spotlight outside the container and enables 5-way navigation between panels. Footer buttons are hidden when bannerMode is true.

---

children

Node

limestone/PageViewslimestone/PageViews.Page to be rendered.

---

componentRef

FunctionObject

Obtains a reference to the root node.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• pageViews - The root component class

• contentsArea - The contentsArea component class

• footerButtons - The footerButtons component class

• navButton - The navButton component class

• navButtonContainer - Applied to the container containing navButtons in fullContents mode

• stepsRow - The step component class

---

footerCloseLabel

String

The label of the footer Close button.

Default: 'Close'

---

fullContents

Boolean

When true, maximize its contents area.

---

index

Number

Index of the active page.

Default: 0

---

noAnimation

Boolean

Disables page transitions.

Default: false

---

onFooterCloseClick

Function

Called when the footer Close button is clicked.

---

onTransition

Function

Called when a transition completes.

---

onWillTransition

Function

Called before a transition begins.

---

pageIndicatorPosition

'top''bottom'

Specifies on which side ('top' or 'bottom') the page indicator appears.

Default: 'bottom'

---

pageIndicatorType

'dot''number'

Type of page indicator.

There are two types:

• dot - Indicates pages by dots.

• number - Indicates pages by current page number and total number of pages.

Default: 'dot'

---

showFooterButtons

Boolean

When true, renders footer Close and Next buttons below the page content. Footer buttons are hidden when bannerMode is true.

Default: false