VibeUI
РусEng
Войти

Всплывающее сообщение

Выбор угла показа

Интерактивный выбор угла появления: переключатель меняет позицию сцены, а карточка каждый раз въезжает со своей стороны — с левого края слева, с правого справа.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • начальный угол через defaultCorner
  • текст карточки через message
  • подпись закрытия через closeLabel

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Выбор угла показа — Интерактивный выбор угла появления: переключатель меняет позицию сцены, а карточка каждый раз въезжает со своей стороны — с левого края слева, с правого справа.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/toast-014?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Toast014
  defaultCorner="top-right"
  message="Файл выгружен в облако"
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Текст уведомления
message · по умолчанию: Файл выгружен в облако
Угол по умолчанию
defaultCorner · по умолчанию: bottom-right
Подпись крестика
closeLabel · по умолчанию: Закрыть
Акцент
tone · по умолчанию: цвет темы
Фон сцены
background · по умолчанию: цвет темы

Ещё в разделе «Всплывающее сообщение»

Частые вопросы

Как установить компонент «Выбор угла показа» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Выбор угла показа»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Выбор угла показа»?
Можно менять: начальный угол через defaultCorner; текст карточки через message; подпись закрытия через closeLabel. Сохранить как есть: key={corner} на карточке — без перемонтирования анимация въезда не переиграется при смене угла; направленные keyframes: from-left для левых углов, from-right для правых, а не одна общая анимация; aria-pressed на кнопках переключателя угла.
Компонент «Выбор угла показа» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/toast-014.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-toast-014-*. Тема берётся из color-scheme окружения через light-dark(), а проп background подменяет только подложку сцены. Угол задаёт две пары CSS-переключателей (top/bottom и left/right), но здесь угол меняет ещё и направление входа: карточка перемонтируется по key={corner}, поэтому анимация въезда переигрывается заново и всегда идёт с той стороны, где стоит карточка. Кнопки-переключатели отмечены aria-pressed, сцена — демонстрационная область с position: relative, а не position: fixed по окну. Подписи углов лежат в пропе cornerLabels, остальные строки — в pickerLabel, stageHint и legendLabel.

Теги

  • toast
  • position
  • corner
  • animation
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…