dot_ix_playground 0.9.2

Interactive dot graphs playground web application.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

use leptos::{
    callback::{Callable, Callback},
    component,
    ev::Event,
    html,
    prelude::{
        ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute, OnAttribute,
    },
    view, IntoView,
};

/// The label that users click to switch to that tab.
#[component]
pub fn TabLabel(
    tab_group_name: &'static str,
    tab_id: &'static str,
    #[prop(default = "")] label: &'static str,
    #[prop(default = "")] class: &'static str,
    #[prop(default = false)] checked: bool,
    #[prop(into, optional, default = None)] on_change: Option<Callback<Event>>,
    #[prop(into, optional, default = NodeRef::<html::Input>::new())] node_ref: NodeRef<html::Input>,
) -> impl IntoView {
    let tab_classes = format!(
        "\
        peer/{tab_id} \
        hidden \
        "
    );

    let label_classes = format!(
        "\
        {class} \
        \
        inline-block \
        h-7 \
        lg:h-9 \
        px-2.5 \
        \
        cursor-pointer \
        border-t \
        border-x \
        border-slate-400 \
        \
        peer-checked/{tab_id}:border-t-4 \
        peer-checked/{tab_id}:border-t-blue-500 \
    "
    );

    #[cfg(not(target_arch = "wasm32"))]
    let _node_ref = node_ref;

    view! {
        <input
            type="radio"
            name=tab_group_name
            id=tab_id
            class=tab_classes
            checked=checked
            on:change={move |ev| { if let Some(on_change) = on_change { on_change.run(ev) } }}
            node_ref=node_ref
        />
        <label for=tab_id class=label_classes>
            {label}
        </label>
    }
}