Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/RAprogramm/yew-nav-link
Navigation link for yew-router
https://github.com/RAprogramm/yew-nav-link
Last synced: 3 months ago
JSON representation
Navigation link for yew-router
- Host: GitHub
- URL: https://github.com/RAprogramm/yew-nav-link
- Owner: RAprogramm
- License: apache-2.0
- Created: 2024-02-10T08:58:34.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-22T00:05:31.000Z (9 months ago)
- Last Synced: 2024-04-23T14:42:03.475Z (7 months ago)
- Language: Rust
- Size: 30.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-yew - yew-nav-link - A navigational link that is aware of its active state based on the current route in the application. (Crates / Component Libraries)
README
NavLink Component for Yew Router
NavLink is a component for Yew applications using Yew Router. It creates a navigational link that is aware of its active state based on the current route in the application.
Usage
```rs
use yew::{html, prelude::*};
use yew_router::prelude::*;
#[function_component(App)]
pub fn app() -> Html {
html! {
to={AppRoute::Home}>{ "Home" }>
to={AppRoute::About}>{ "About" }>
}
}
```
Examples
### Using *nav_link* function
>
> in header or navbar
>
> ```html
> ...
>
> { nav_link(HomeRoute::IntroPage, "Home") }
>
>
> ...
> ```
>
### Advanced example with [bootstrap](https://getbootstrap.com/)
> [](https://docs.rs/yew/0.21.0/yew/index.html)
> [](https://docs.rs/yew-router/0.18.0/yew_router/index.html)
>
>
> index.html
>
> ```html
>
>
>
>
>
>
>
>
> Your title
>
>
>
>
>
>
>
>
>
>
> ```
>
>
>
> main.rs
>
> ```rs
> fn main() {
> yew::Renderer::::new().render();
> }
> ```
>
>
>
> app.rs
>
> ```rs
> #[function_component(App)]
> pub fn app() -> Html {
> html! {
>
> render={switch_main} />
>
> }
> }
> ```
>
>
>
> main_routes.rs
>
> ```rs
> #[derive(Clone, Routable, PartialEq)]
> pub enum MainRoute {
> #[at("/home")]
> HomeRoot,
> #[at("/home/*")]
> Home,
> #[at("/register")]
> RegisterPage,
> #[at("/login")]
> LoginPage,
> #[not_found]
> #[at("/404")]
> NotFoundPage,
> }
>
> pub fn switch_main(routes: MainRoute) -> Html {
> match routes {
> MainRoute::HomeRoot | MainRoute::Home => {
> html! { render={switch_home} /> }
> }
> MainRoute::RegisterPage => html! { {html! { }} },
> MainRoute::LoginPage => html! { {html! { }} },
> MainRoute::NotFoundPage => html! { },
> }
> }
> ```
>
>
>
>
> home_routes.rs
>
> ```rs
> #[derive(Clone, Routable, PartialEq)]
> pub enum HomeRoute {
> #[at("/home")]
> HomePage,
> #[at("/home/intro")]
> IntroPage,
> #[at("/home/features")]
> FeaturesPage,
> #[at("/home/billings")]
> BillingsPage,
> #[at("/home/faq")]
> FaqPage,
> #[not_found]
> #[at("/home/404")]
> NotFoundPage,
> }
>
> pub fn switch_home(route: HomeRoute) -> Html {
> match route {
> HomeRoute::HomePage => html! {},
> HomeRoute::IntroPage => html! { { html! { } } },
> HomeRoute::FeaturesPage => html! { { html! { } } },
> HomeRoute::BillingsPage => html! { { html! { } } },
> HomeRoute::FaqPage => html! { { html! { } } },
> HomeRoute::NotFoundPage => html! { to={MainRoute::NotFoundPage}/>},
> }
> }
> ```
>
>
>
> in navbar or header
>
> ```html
> ...
>
> ...
> ```
>
License
This project is licensed under the Apache License 2.0.