yew_nav_link/components/
page_item.rs

1//! # `PageItem`
2//!
3//! A single page button within a [`Pagination`](super::Pagination) component.
4//! Renders an `<li>` with the `page-item` class and active/disabled state.
5//!
6//! # Example
7//!
8//! ```rust
9//! use yew::prelude::*;
10//! use yew_nav_link::components::{PageItem, PageLink};
11//!
12//! #[component]
13//! fn PaginationNav() -> Html {
14//!     html! {
15//!         <nav><ul class="pagination">
16//!             <PageItem page={1} active=true>
17//!                 <PageLink href={None}>{ "1" }</PageLink>
18//!             </PageItem>
19//!             <PageItem page={2}>
20//!                 <PageLink href={Some("/page/2")}>{ "2" }</PageLink>
21//!             </PageItem>
22//!         </ul></nav>
23//!     }
24//! }
25//! ```
26//!
27//! # CSS Classes
28//!
29//! | Class | Condition |
30//! |-------|-----------|
31//! | `page-item` | Always applied |
32//! | `active` | Applied when `active` is `true` |
33//! | `disabled` | Applied when `disabled` is `true` |
34//!
35//! # Props
36//!
37//! | Prop | Type | Default | Description |
38//! |------|------|---------|-------------|
39//! | `page` | `u32` | — | Page number (required) |
40//! | `active` | `bool` | `false` | Currently active page |
41//! | `disabled` | `bool` | `false` | Disabled state |
42//! | `classes` | `Classes` | — | Additional CSS classes |
43//! | `children` | `Children` | — | Content |
44
45use yew::prelude::*;
46
47/// Properties for the [`PageItem`] component.
48///
49/// | Prop | Type | Default | Description |
50/// |------|------|---------|-------------|
51/// | `page` | `u32` | — | Page number (required) |
52/// | `active` | `bool` | `false` | Currently active page |
53/// | `disabled` | `bool` | `false` | Disabled state |
54/// | `classes` | `Classes` | — | Additional CSS classes |
55/// | `children` | `Children` | — | Content |
56#[derive(Properties, Clone, PartialEq, Debug)]
57pub struct PageItemProps {
58    /// Additional CSS classes applied to the page item.
59    #[prop_or_default]
60    pub classes: Classes,
61
62    /// Page number this item represents.
63    pub page: u32,
64
65    /// Whether this page item is the currently active page.
66    #[prop_or(false)]
67    pub active: bool,
68
69    /// Whether this page item is disabled (e.g. an ellipsis).
70    #[prop_or(false)]
71    pub disabled: bool,
72
73    /// Content rendered inside the page item.
74    #[prop_or_default]
75    pub children: Children
76}
77
78/// A single page button within a [`Pagination`](super::Pagination) component.
79///
80/// # CSS Classes
81///
82/// - `page-item` - Always applied
83/// - `active` - Applied when `active` is `true`
84/// - `disabled` - Applied when `disabled` is `true`
85#[function_component]
86pub fn PageItem(props: &PageItemProps) -> Html {
87    let mut classes = props.classes.clone();
88    classes.push("page-item");
89
90    if props.active {
91        classes.push("active");
92    }
93
94    if props.disabled {
95        classes.push("disabled");
96    }
97
98    html! {
99        <li {classes}>
100            <span class="page-link">
101                { for props.children.iter() }
102            </span>
103        </li>
104    }
105}
106
107#[cfg(test)]
108mod tests {
109    use super::*;
110
111    #[test]
112    fn page_item_props() {
113        let props = PageItemProps {
114            classes:  Classes::default(),
115            page:     1,
116            active:   false,
117            disabled: false,
118            children: Children::new(vec![])
119        };
120
121        assert_eq!(props.page, 1);
122        assert!(!props.active);
123        assert!(!props.disabled);
124    }
125}
yew_nav_link/components/page_item.rs

yew_nav_link/components/
page_item.rs
