Skip to content
fandhe-frontendcore v0.4.3
GitHub

footer-newsletter-band

帯が全幅の footer。A: 帯下。B: 帯上。C: 簡素形。<form> なし。

Demo

ABC
製品
最新情報
© 2026

使用部品

Rust コード

Rust
use fandhe_frontend_core::{div, footer, text, Node};
use fandhe_frontend_pre_styled_ui::button::{self, ButtonProps};
use fandhe_frontend_pre_styled_ui::field::{self, FieldOrientation, FieldRootProps};
use fandhe_frontend_pre_styled_ui::input::{self, FieldIds, FieldProps, InputProps};
use fandhe_frontend_pre_styled_ui::link::{self, LinkProps};
use fandhe_frontend_pre_styled_ui::separator::{separator, SeparatorProps};

const REPO: &str = "https://github.com/Fandhe-AI/fandhe-frontend";

fn link(label: &'static str) -> Node {
    link::root(REPO, &LinkProps::default(), vec![], vec![text(label)])
}

/// リンク列 1 本(見出しテキスト + リンク一覧、見出し要素は使わない)。
fn link_column(heading: &'static str, labels: &[&'static str]) -> Node {
    let mut children = vec![text(heading)];
    children.extend(labels.iter().copied().map(link));
    div(vec![("class", "fnb-col")], children)
}

/// リンク列グリッド(A・B が並べる 2 列)。
fn top() -> Node {
    div(
        vec![("class", "fnb-t")],
        vec![
            link_column("製品", &["ガイド", "API"]),
            link_column("コミュニティ", &["GitHub"]),
        ],
    )
}

fn band(id: &'static str) -> Node {
    let f = FieldProps {
        id,
        ids: FieldIds::default(),
        disabled: false,
        invalid: false,
        required: true,
        readonly: false,
        has_helper_text: false,
    };
    let signup = div(
        vec![],
        vec![
            field::root(
                &FieldRootProps {
                    orientation: FieldOrientation::Vertical,
                },
                &f,
                vec![],
                vec![
                    field::label(&f, vec![], vec![text("メール")]),
                    input::input(&InputProps::default(), &f, vec![("type", "email")]),
                ],
            ),
            button::button(&ButtonProps::default(), vec![], vec![text("購読")]),
        ],
    );
    div(vec![("data-fnb-band", "")], vec![text("最新情報"), signup])
}

fn variant(order: u8, id: &'static str) -> Node {
    let mut body = match order {
        0 => vec![top(), band(id)],
        1 => vec![band(id), top()],
        _ => vec![div(vec![("class", "fnb-c")], vec![link("製品"), band(id)])],
    };
    body.push(separator(&SeparatorProps::default(), vec![]));
    body.push(div(vec![], vec![text("© 2026")]));
    footer(vec![], body)
}

pub fn demo() -> Node {
    div(
        vec![("class", "fnb-l")],
        vec![
            text("A"),
            variant(0, "fnb-a"),
            text("B"),
            variant(1, "fnb-b"),
            text("C"),
            variant(2, "fnb-c"),
        ],
    )
}

関連情報: Field / Input / Button / Link / Separator