Pagination

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import { userEvent } from '@storybook/testing-library'
import React, { useState } from 'react'
import styled from 'styled-components'
import { Pagination } from './Pagination'
export default {
title: 'Navigation(ナビゲーション)/Pagination',
component: Pagination,
}
const Template: Story = () => {
const [current, setCurrent] = useState(7)
return (
<List>
<li>
<Txt>default</Txt>
<Pagination
current={current}
total={13}
onClick={(page) => {
setCurrent(page)
}}
/>
</li>
<li>
<Txt>padding = 1</Txt>
<Pagination current={7} total={13} onClick={action('click!!')} padding={1} />
</li>
<li>
<Txt>current = 1, total = 5</Txt>
<Pagination current={1} total={5} onClick={action('click!!')} />
</li>
<li>
<Txt>current = 5, total = 5</Txt>
<Pagination current={5} total={5} onClick={action('click!!')} />
</li>
<li>
<Txt>current = 2, total = 3</Txt>
<Pagination current={2} total={3} onClick={action('click!!')} />
</li>
<li>
<Txt>current = 1, total = 2</Txt>
<Pagination current={1} total={2} onClick={action('click!!')} />
</li>
<li>
<Txt>current = 1, total = 1</Txt>
<Pagination current={1} total={1} onClick={action('click!!')} />
</li>
<li>
<Txt>current = 1, total = 5, withoutNumbers = true</Txt>
<Pagination current={1} total={5} onClick={action('click!!')} withoutNumbers />
</li>
<li>
<Txt>current = 2, total = 5, withoutNumbers = true</Txt>
<Pagination current={2} total={5} onClick={action('click!!')} withoutNumbers />
</li>
</List>
)
}
export const All = Template.bind({})
export const RegFocus = Template.bind({})
RegFocus.play = () => userEvent.tab()
const List = styled.ul`
padding: 0 20px;
& > li {
list-style: none;
&:not(:first-child) {
margin-top: 20px;
}
}
`
const Txt = styled.p`
margin: 0 0 10px;
`
処理中

Props

NameRequiredTypeDescription
totaltruenumber全ページ数
currenttruenumber現在のページ
onClicktrue(pageNumber: number) => voidボタンを押下したときに発火するコールバック関数
padding-number現在のページの前後に表示するページ番号のボタンの数
className-stringコンポーネントに適用するクラス名
withoutNumbers-false, true`true` のとき、ページ番号のボタンを表示しない