Аккордеон

вертикально расположенный набор интерактивных заголовков, каждый из которых раскрывает определенный раздел контента.

❯buridan add аккордеон

Error: Reference Target 'аккордеон' not found

Примеры

Базовый

Создано на основе <details>/<summary> — развертывание/свертывание, поддержка клавиатуры и вращение шеврона — все это происходит из браузера и group-open/accordion-item:rotate-180, JS не требуется.

Используемый реквизит: name на accordion.item (элементы группируются так, что одновременно остается открытым только один, что соответствует собственному поведению <details name="...">).

Models

- Genesis launched a new era of exploration.

- Explorer uncovered new planets beyond our reach.

- Voyager 1 ventured into interstellar space.

- Apollo landed humans on the Moon.

Spacecraft

- Curiosity sent back valuable data from Mars.

- The Hubble Telescope captured distant galaxies.

- James Webb will explore the universe's origins.

- The ISS orbits Earth, conducting critical experiments.

Space Discoveries

- Saturn's rings have fascinated scientists for years.

- The Mars Rover is studying the planet's surface.

- NASA's Artemis program aims to return humans to the Moon.

- Solar missions help us understand space weather.

import reflex as rx

from components.ui.accordion import accordion


def accordion_basic():
    return rx.el.div(
        accordion.root(
            accordion.item(
                accordion.trigger("Models"),
                accordion.panel(
                    rx.el.p("- Genesis launched a new era of exploration."),
                    rx.el.p("- Explorer uncovered new planets beyond our reach."),
                    rx.el.p("- Voyager 1 ventured into interstellar space."),
                    rx.el.p("- Apollo landed humans on the Moon."),
                ),
                name="single",
            ),
            accordion.item(
                accordion.trigger("Spacecraft"),
                accordion.panel(
                    rx.el.p("- Curiosity sent back valuable data from Mars."),
                    rx.el.p("- The Hubble Telescope captured distant galaxies."),
                    rx.el.p("- James Webb will explore the universe's origins."),
                    rx.el.p("- The ISS orbits Earth, conducting critical experiments."),
                ),
                open=True,
                name="single",
            ),
            accordion.item(
                accordion.trigger("Space Discoveries"),
                accordion.panel(
                    rx.el.p("- Saturn's rings have fascinated scientists for years."),
                    rx.el.p("- The Mars Rover is studying the planet's surface."),
                    rx.el.p(
                        "- NASA's Artemis program aims to return humans to the Moon."
                    ),
                    rx.el.p("- Solar missions help us understand space weather."),
                ),
                name="single",
            ),
            class_name="w-full max-w-md mx-auto",
        ),
        class_name="h-[45vh] w-full justify-center pt-10 px-8",
    )

Справочник по API

аккордеон.корень

accordion.root(
    accordion.item(...),
    accordion.item(...),
)

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

аккордеон.item

Отображает собственный <details>. Присвойте совпадающим элементам одинаковые name, чтобы сделать их взаимоисключающими (встроенная группировка <details name="..."> — открытие одного автоматически закрывает остальные в группе).

accordion.item(
    accordion.trigger("Is it accessible?"),
    accordion.panel("Yes, built on native semantics."),
    name="faq",
)

Опора	Тип	По умолчанию
`name`	`str`
`class_name`	`str`	`""`

аккордеон.триггер

Отображает <summary> со значком шеврона, добавляемым автоматически — нет необходимости добавлять его самостоятельно.

accordion.trigger("Is it accessible?")

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

аккордеон.панель

accordion.panel("Yes. It adheres to the WAI-ARIA design pattern.")

Опора	Тип	По умолчанию
`class_name`	`str`	`""`

External Tools

︲

On This Page