AttributeError: module 'dash_bootstrap_components' has no attribute 'PaginationItem'

[Davidyang1989]

import dash_bootstrap_components as dbc
print(dbc.version)
1.2.0
import dash
print(dash.version)
2.5.1

according to the migration guide of dbc
https://dash-bootstrap-components.opensource.faculty.ai/migration-guide/
it has the attribution of "PaginationItem", I dont know why, plz help.

here is my demo code:

import dash
import dash_bootstrap_components as dbc
from dash import dcc

app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP])

pages

pagination = dbc.Pagination(
[
dbc.PaginationItem(dcc.Link("1", href="/page-1")),
dbc.PaginationItem(dcc.Link("2", href="/page-2")),
dbc.PaginationItem(dcc.Link("3", href="/page-3")),
],
)

page content

page_1_layout = dbc.Container([
dbc.Row([
dbc.Col(dbc.Card([dbc.CardBody("Page 1 content")]))
])
])

page_2_layout = dbc.Container([
dbc.Row([
dbc.Col(dbc.Card([dbc.CardBody("Page 2 content")]))
])
])

page_3_layout = dbc.Container([
dbc.Row([
dbc.Col(dbc.Card([dbc.CardBody("Page 3 content")]))
])
])

app.layout = dbc.Container([
pagination,
dbc.Row([
dbc.Col(page_1_layout, id="page-1"),
dbc.Col(page_2_layout, id="page-2"),
dbc.Col(page_3_layout, id="page-3"),
]),
])

@app.callback(Output("page-1", "style"), [Input("page-1", "n_clicks")])
def show_page_1(n):
return {"display": "block"} if n else {"display": "none"}

@app.callback(Output("page-2", "style"), [Input("page-2", "n_clicks")])
def show_page_2(n):
return {"display": "block"} if n else {"display": "none"}

@app.callback(Output("page-3", "style"), [Input("page-3", "n_clicks")])
def show_page_3(n):
return {"display": "block"} if n else {"display": "none"}

if name == "main":
app.run_server(debug=True)

[tcbegley]

Hey @Davidyang1989

I don't see PaginationItem listed anywhere in the migration guide or the docs?

See the examples here. You should create a Pagination component and then use the active_page prop in your callbacks to respond accordingly. If you want to use the pagination component to navigate then you would do something like the following

@app.callback(Output("page-content", "children"), Input("pagination", "active_page"))
def show_page_content(active_page):
    if active_page == 1:
        return page_1_content  # can save this as a global variable or generate on the fly
    elif active_page == 2:
        return page_2_content
    else:
        # page not found: display error
        return not_found_404_content

If you have many pages, you might prefer to use a dictionary or similar to avoid long if-else statements, e.g.

@app.callback(Output("page-content", "children"), Input("pagination", "active_page"))
def show_page_content(active_page):
    # get content from PAGES dictionary, return 404 if key is not found
    return PAGES.get(active_page, not_found_404)