From 32c8b728cac3ce915c7d0a081fa2695973f15af9 Mon Sep 17 00:00:00 2001 From: Tatiana Fokina Date: Tue, 3 Oct 2023 18:32:25 +0400 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BA=D1=83=20``=20(#4702)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Дополняет текст * Причёсывет демку * Делает дополнения, улучшает демо * Добавляет новую демку * Изменяет высоту демки * Добавляет начертание * Добавляет `aria-controls` --- html/output/demos/form-rating/index.html | 83 +++++---- .../demos/toast-notification/index.html | 171 ++++++++++++++++++ html/output/index.md | 43 ++++- 3 files changed, 255 insertions(+), 42 deletions(-) create mode 100644 html/output/demos/toast-notification/index.html diff --git a/html/output/demos/form-rating/index.html b/html/output/demos/form-rating/index.html index 486a9bfed9..082a4ff27a 100644 --- a/html/output/demos/form-rating/index.html +++ b/html/output/demos/form-rating/index.html @@ -1,41 +1,52 @@ - Пример использования — <output> — Дока + Пример использования <output> — <output> — Дока - + - -

Оцените удобство пользования сервисом:

-
- 10 -
- 010 + +
+
+ + 0 + + 10 +
+ 10
- diff --git a/html/output/demos/toast-notification/index.html b/html/output/demos/toast-notification/index.html new file mode 100644 index 0000000000..95c7a1490e --- /dev/null +++ b/html/output/demos/toast-notification/index.html @@ -0,0 +1,171 @@ + + + + Всплывающее уведомление (тост) — <output> — Дока + + + + + + + + +
+ +
+ + +
+
+ + + diff --git a/html/output/index.md b/html/output/index.md index 9ec63b1e91..6df56f8833 100644 --- a/html/output/index.md +++ b/html/output/index.md @@ -3,11 +3,16 @@ title: "``" description: "Элемент для вывода результатов вычислений или действий пользователя." authors: - webdb81 +contributors: + - tatianafokina keywords: - вывод результата - поле вывода + - live regions + - интерактивная область + - живая область related: - - js/query-selector + - a11y/role-status - html/form - js/element-innertext tags: @@ -18,14 +23,23 @@ tags: Тег `` позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки. +У тега есть встроенная роль [`status`](/a11y/role-status/). Благодаря ей [скринридеры](/a11y/screenreaders/) и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Это делает часть страницы интерактивной или «живой» областью. + ## Пример ```html
-

Для скольких людей надо приготовить яичницу:

- + +

Необходимое количество яиц:

- +
``` @@ -34,16 +48,25 @@ tags: Элемент `` используется в тех случаях, когда пользователю надо показать результат работы программы в реальном времени, например: - информация, которую пользователь вводит или изменяет в форме; -- вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и тому подобное). +- вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и тому подобное); +- всплывающие уведомления — тосты. ## Как пишется -**[`for`](/html/for/)** — значением может быть один или несколько ID, разделённых пробелом. Указывает на связь перечисленных элементов ввода (например, [``](/html/input/)) с элементом ``. -**`form`** — указывается ID формы в этом же документе, с которой связывается поле вывода. -**`name`** — имя поля вывода. Используется для подписи результата при отправке формы. +- [`for`](/html/for/) — значением может быть один или несколько ID, разделённые пробелом. Указывает на связь перечисленных элементов ввода (например, [``](/html/input/)) с элементом ``. +- `form` — указывается ID формы в этом же документе, с которой связывается поле вывода. +- `name` — имя поля вывода. Используется для подписи результата при отправке формы. + +Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему `role="status"`. -Тег `` парный. Допустимо вставлять пустой тег в разметку и _класть_ выводимое значение внутрь него при помощи JavaScript. +`` — парный тег. Допустимо вставлять пустой тег в разметку и _класть_ выводимое значение внутрь него при помощи JavaScript. К тегу `` также применяются все [глобальные атрибуты](/html/global-attrs/). - +`` можно связать с рейтингом, чтобы увидеть числовой результат. + + + +Также тег можно использовать для вывода всплывающих уведомлений. + +