Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README

        

NavLink Component for Yew Router


Crates.io Version
docs.rs
Crates.io Total Downloads
Crates.io MSRV
GitHub License
GitHub repo size


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
> ...
>


>
> ...
> ```
>

### Advanced example with [bootstrap](https://getbootstrap.com/)

> [![yew](https://shields.io/badge/yew-0.21.0-darkgreen)](https://docs.rs/yew/0.21.0/yew/index.html)
> [![yew-router](https://shields.io/badge/yew_router-0.18.0-darkgreen)](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.