Группа ввода

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

❯buridan add группа ввода

Component Guide

Use the following to build the Входная_группа component.

from components.ui.входная_группа import входная_группа

Error: Reference Target 'входная_группа' not found

Выровнять

Используйте align на input_group.addon, чтобы расположить его относительно входа.

Для правильного управления фокусом input_group.addon всегда следует размещать после input_group.input или input_group.textarea в DOM. Используйте align, чтобы визуально позиционировать его вместо изменения порядка DOM.

встроенный старт

По умолчанию — размещает аддон в начале ввода.

Использованный реквизит: align="inline-start" на input_group.addon.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.input_group import input_group


def input_group_inline_start() -> rx.Component:
    return input_group.root(
        input_group.input(
            id="inline-start-input",
            placeholder="Search...",
        ),
        input_group.addon(
            hi("SearchIcon", class_name="text-muted-foreground"),
            align="inline-start",
        ),
        class_name="max-w-sm",
    )

конец строки

Использованный реквизит: align="inline-end" на input_group.addon.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.input_group import input_group


def input_group_inline_end() -> rx.Component:
    return input_group.root(
        input_group.input(
            id="inline-end-input",
            type="password",
            placeholder="Enter password",
        ),
        input_group.addon(
            hi("EyeOffIcon", class_name="text-muted-foreground"),
            align="inline-end",
        ),
        class_name="max-w-sm",
    )

старт блока

Располагает аддон над входом — обычно используется с input_group.textarea.

Использованный реквизит: align="block-start" на input_group.addon.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.field import field
from components.ui.input_group import input_group


def input_group_block_start() -> rx.Component:
    return rx.el.div(
        field.root(
            field.label("Input", html_for="block-start-input"),
            field.content(
                input_group.root(
                    input_group.input(
                        id="block-start-input",
                        placeholder="Enter your name",
                    ),
                    input_group.addon(
                        input_group.text("Full Name"),
                        align="block-start",
                    ),
                    class_name="h-auto",
                )
            ),
            field.description("Header positioned above the input."),
            orientation="vertical",
        ),
        field.root(
            field.label("Textarea", html_for="block-start-textarea"),
            field.content(
                input_group.root(
                    input_group.textarea(
                        id="block-start-textarea",
                        placeholder="console.log('Hello, world!');",
                        class_name="font-mono text-sm",
                    ),
                    input_group.addon(
                        hi("FileCodeIcon", class_name="text-muted-foreground"),
                        input_group.text("script.py", class_name="font-mono"),
                        input_group.button(
                            hi("CopyIcon"),
                            rx.el.span("Copy", class_name="sr-only"),
                            size="icon-xs",
                            class_name="ml-auto",
                        ),
                        align="block-start",
                    ),
                )
            ),
            field.description("Header positioned above the textarea."),
            orientation="vertical",
        ),
        class_name="flex flex-col gap-y-6 max-w-sm w-full",
    )

конец блока

Использованный реквизит: align="block-end" на input_group.addon.

import reflex as rx

from components.ui.field import field
from components.ui.input_group import input_group


def input_group_block_end() -> rx.Component:
    return rx.el.div(
        field.root(
            field.label("Input", html_for="block-end-input"),
            field.content(
                input_group.root(
                    input_group.input(
                        id="block-end-input",
                        placeholder="Enter amount",
                    ),
                    input_group.addon(
                        input_group.text("USD"),
                        align="block-end",
                    ),
                    class_name="h-auto",
                )
            ),
            field.description("Footer positioned below the input."),
            orientation="vertical",
        ),
        field.root(
            field.label("Textarea", html_for="block-end-textarea"),
            field.content(
                input_group.root(
                    input_group.textarea(
                        id="block-end-textarea",
                        placeholder="Write a comment...",
                    ),
                    input_group.addon(
                        input_group.text("0/280"),
                        input_group.button(
                            "Post",
                            variant="default",
                            size="sm",
                            class_name="ml-auto",
                        ),
                        align="block-end",
                    ),
                )
            ),
            field.description("Footer positioned below the textarea."),
            orientation="vertical",
        ),
        class_name="flex flex-col gap-y-6 max-w-sm w-full",
    )

Примеры

Иконки

Использованный реквизит: align на input_group.addon.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.input_group import input_group


def input_group_icons() -> rx.Component:
    return rx.el.div(
        input_group.root(
            input_group.input(placeholder="Search..."),
            input_group.addon(
                hi("Search01Icon", class_name="text-muted-foreground"),
                align="inline-start",
            ),
        ),
        input_group.root(
            input_group.input(type="email", placeholder="Enter your email"),
            input_group.addon(
                hi("Mail01Icon", class_name="text-muted-foreground"),
                align="inline-start",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Card number"),
            input_group.addon(
                hi("CreditCardIcon", class_name="text-muted-foreground"),
                align="inline-start",
            ),
            input_group.addon(
                hi("Tick02Icon", class_name="text-muted-foreground"),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Card number"),
            input_group.addon(
                hi("StarIcon", class_name="text-muted-foreground"),
                hi("InformationCircleIcon", class_name="text-muted-foreground"),
                align="inline-end",
            ),
        ),
        class_name="grid w-full max-w-sm gap-6",
    )

Текст

Использованный реквизит: ничего не требуется, кроме состава по умолчанию input_group.text.

USD

https://

.com

@company.com

120 characters left

import reflex as rx

from components.ui.input_group import input_group


def input_group_text() -> rx.Component:
    return rx.el.div(
        input_group.root(
            input_group.addon(
                input_group.text("$"),
                align="inline-start",
            ),
            input_group.input(placeholder="0.00"),
            input_group.addon(
                input_group.text("USD"),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.addon(
                input_group.text("https://"),
                align="inline-start",
            ),
            input_group.input(
                placeholder="example.com",
                class_name="!pl-0.5",
            ),
            input_group.addon(
                input_group.text(".com"),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Enter your username"),
            input_group.addon(
                input_group.text("@company.com"),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.textarea(placeholder="Enter your message"),
            input_group.addon(
                input_group.text(
                    "120 characters left",
                    class_name="text-xs text-muted-foreground",
                ),
                align="block-end",
            ),
        ),
        class_name="grid w-full max-w-sm gap-6",
    )

Кнопка

Использованный реквизит: size на input_group.button.

Error: Reference Target 'кнопка_входной_группы' not found

Спиннер

Использованный реквизит: align на input_group.addon.

Saving...

Please wait...

import reflex as rx

from components.ui.input_group import input_group
from components.ui.spinner import spinner


def input_group_spinner() -> rx.Component:
    return rx.el.div(
        input_group.root(
            input_group.input(placeholder="Searching..."),
            input_group.addon(
                spinner(),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Processing..."),
            input_group.addon(
                spinner(),
                align="inline-start",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Saving changes..."),
            input_group.addon(
                input_group.text("Saving..."),
                spinner(),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Refreshing data..."),
            input_group.addon(
                spinner(),
                align="inline-start",
            ),
            input_group.addon(
                input_group.text(
                    "Please wait...",
                    class_name="text-muted-foreground",
                ),
                align="inline-end",
            ),
        ),
        class_name="grid w-full max-w-sm gap-4",
    )

Раскрывающийся список

Используемый реквизит: информацию о реквизитах, специфичных для меню, см. в документации Menu.

import reflex as rx

from components.core.hugeicon import hi
from components.ui.input_group import input_group
from components.ui.menu import menu


def input_group_dropdown() -> rx.Component:
    return rx.el.div(
        input_group.root(
            input_group.input(placeholder="Enter file name"),
            input_group.addon(
                menu.root(
                    menu.trigger(
                        hi("MoreHorizontal"),
                    ),
                    menu.content(
                        menu.item("Settings"),
                        menu.item("Copy path"),
                        menu.item("Open location"),
                    ),
                ),
                align="inline-end",
            ),
        ),
        input_group.root(
            input_group.input(placeholder="Enter search query"),
            input_group.addon(
                menu.root(
                    menu.trigger(
                        "Search In... ",
                        hi("ChevronDownIcon", class_name="size-3 ml-1 inline"),
                        class_name="!pr-1.5 text-xs",
                    ),
                    menu.content(
                        menu.item("Documentation"),
                        menu.item("Blog Posts"),
                        menu.item("Changelog"),
                    ),
                ),
                align="inline-end",
            ),
        ),
        class_name="grid w-full max-w-sm gap-4",
    )

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

входная_группа.корень

Основная оболочка входных данных и дополнений.

input_group.root(
    input_group.addon(hi("Search01Icon")),
    input_group.input(placeholder="Search..."),
)

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

input_group.addon

Отображает значки, текст, кнопки или другой контент рядом с вводом. Может содержать несколько input_group.button.

input_group.addon(hi("Search01Icon"), align="inline-start")

Опора	Тип	По умолчанию
`align`	`Literal["inline-start", "inline-end", "block-start", "block-end"]`	`"inline-start"`
`class_name`	`str`	`""`

Используйте inline-start/inline-end с input_group.input и block-start/block-end с input_group.textarea.

input_group.button

button, предварительно оформленный для контекстов группы ввода. Остальные реквизиты button смотрите в документации Button.

input_group.addon(
    input_group.button(hi("X01Icon"), aria_label="Clear"),
    align="inline-end",
)

Опора	Тип	По умолчанию
`size`	`Literal["xs", "icon-xs", "sm", "icon-sm"]`	`"xs"`
`variant`	`Literal["default", "destructive", "outline", "secondary", "ghost", "link"]`	`"ghost"`
`class_name`	`str`	`""`

input_group.input

Вставная замена input() внутри входной группы — предварительно оформленная и помеченная общим data-slot="input-group-control", используемым для состояний фокуса всей группы.

input_group.input(placeholder="Search...")

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

Любая другая опора, принятая input(), проходит напрямую.

input_group.textarea

Замена textarea() внутри входной группы — то же соглашение data-slot="input-group-control", что и input_group.input.

input_group.textarea(placeholder="Leave a comment...")

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

Любая другая опора, принятая textarea(), проходит напрямую.