Edit Component

🍣 Sushi RS Yew Usage

Adding Sushi RS to your Yew project is simple:

1. Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.

2. Add the Sushi RS component to your dependencies:

   cargo add sushi-rs --features=yew
   

3. Import and use the Sushi component.

🛠️ Usage

use yew::prelude::*;
use sushi_rs::yew::Sushi;
use sushi_rs::common::{SushiShape, SushiState, SushiView, Ingredient, SushiOuterSheet, SushiSize, NORI_COLOR};

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <Sushi
            id="salmon-maki"
            name="Salmon Maki"
            shape={SushiShape::Circular}
            state={SushiState::Rolled}
            view={SushiView::Top}
            ingredients={vec![Ingredient::Salmon]}
            outer_sheet={SushiOuterSheet { color: NORI_COLOR.into(), thickness: 10.0 }}
            size={SushiSize { width: 120.0, height: 120.0 }}
        />
    }
}

Gallery

use yew::prelude::*;
use sushi_rs::yew::SushiGallery;
use sushi_rs::common::default_sushi_gallery;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <SushiGallery items={default_sushi_gallery()} />
    }
}

🔧 Props

Sushi Component

SushiShape Enum

Ingredient Enum

TopEdgeDecoration

🧱 Layout Structure

<div class="sushi-wrapper" role="figure">
  <svg ...>
    ← rolled view
    <defs>...</defs>
    <!-- nori + rice + ingredients -->
  </svg>
</div>

or in exploded state:

<div class="sushi-exploded-row" role="img">
  <div class="sushi-exploded-part">Nori SVG</div>
  +
  <div class="sushi-exploded-part">Rice SVG</div>
  +
  <div class="sushi-exploded-part">Ingredient SVG ...</div>
</div>

💡 Notes

• Multiple ingredients are rendered as equal pie-slices with individual <title> elements.
• The scale prop multiplies both size and sheet thickness uniformly.
• SushiState::Exploded ignores shape and view and renders all layers side by side.
• All SVG groups carry role="img" and aria-label via <title>.

Usage

CLI Usage

You can import Sushi RS directly into your project to customize and modify it using the opensass cli:

os add sushi-rs yew

use dioxus::prelude::*;
use sushi_rs::dioxus::Sushi;
use sushi_rs::common::{SushiShape, Ingredient, SushiOuterSheet, SushiSize, NORI_COLOR};

fn App() -> Element {
    rsx! {
        Sushi {
            id: "salmon-maki",
            name: "Salmon Maki",
            shape: SushiShape::Circular,
            ingredients: vec![Ingredient::Salmon],
            outer_sheet: SushiOuterSheet { color: NORI_COLOR.into(), thickness: 10.0 },
            size: SushiSize { width: 120.0, height: 120.0 },
        }
    }
}

use dioxus::prelude::*;
use sushi_rs::dioxus::SushiGallery;
use sushi_rs::common::default_sushi_gallery;

fn App() -> Element {
    rsx! { SushiGallery { items: default_sushi_gallery() } }
}

os add sushi-rs dio

use leptos::prelude::*;
use sushi_rs::leptos::Sushi;
use sushi_rs::common::{SushiShape, Ingredient, SushiOuterSheet, SushiSize, NORI_COLOR};

#[component]
fn App() -> impl IntoView {
    view! {
        <Sushi
            id="salmon-maki"
            name="Salmon Maki"
            shape=SushiShape::Circular
            ingredients=vec![Ingredient::Salmon]
            outer_sheet=SushiOuterSheet { color: NORI_COLOR.into(), thickness: 10.0 }
            size=SushiSize { width: 120.0, height: 120.0 }
        />
    }
}

use leptos::prelude::*;
use sushi_rs::leptos::SushiGallery;
use sushi_rs::common::default_sushi_gallery;

#[component]
fn App() -> impl IntoView {
    view! { <SushiGallery items=default_sushi_gallery() /> }
}

os add sushi-rs lep