---
name: Page
menu: Components
---

# Page
import Page from './index'
import './style/index.scss'
import Button from '../button/index'
import { Playground, Props } from 'docz'

## Props & Methods
<Props of={Page} />

## Size
<Playground>
    <Page
        totalPage={4}
        page={3}
        size="s"
        />
        <br />
    <Page
        totalPage={4}
        page={2}
        size="m"
        />
</Playground>

## totalPage
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state={
                totalPage: 5,
            }
        }
        render(){
            return <>
                <Page
                    size="s"
                    totalPage={this.state.totalPage}
                />
                <Button onClick={() => this.setState({
                    totalPage: Math.floor(Math.random() * 20),
                })}>Randomly Set totalPage</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>

## page
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state={
                page: 2,
            }
        }
        render(){
            return <>
                <Page
                    size="s"
                    totalPage={30}
                    page={this.state.page}
                />
                <Button onClick={() => this.setState({
                    page: Math.floor(Math.random() * 30),
                })}>Randomly Set Current Page</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>

## maxDisplayNumber
<Playground>
    <Page
        size="s"
        totalPage={30}
        maxDisplayNumber={5}
        />
</Playground>

## inputable
<Playground>
    <Page
        size="s"
        inputable
        totalPage={30}
    />
</Playground>

## renderBtn
<Playground>
    <Page
        size="s"
        renderBtn={(page) => {
            return <a href="http://imweb.github.io/imui" target="_blank">{page}</a>;
        }}
        totalPage={3}
    />
</Playground>