From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/html/element/summary/index.html | 146 +++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 files/ru/web/html/element/summary/index.html (limited to 'files/ru/web/html/element/summary/index.html') diff --git a/files/ru/web/html/element/summary/index.html b/files/ru/web/html/element/summary/index.html new file mode 100644 index 0000000000..44df57ef35 --- /dev/null +++ b/files/ru/web/html/element/summary/index.html @@ -0,0 +1,146 @@ +--- +title: ': The Disclosure Summary element' +slug: Web/HTML/Element/summary +translation_of: Web/HTML/Element/summary +--- +
{{HTMLRef}}
+ +

The HTML Disclosure Summary element (<summary>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.

+ +
{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Permitted contentPhrasing content or one element of Heading content
Tag omissionNone, both the start tag and the end tag are mandatory.
Permitted parentsThe {{HTMLElement("details")}} element.
Permitted ARIA roles{{ARIARole("button")}}
DOM interface{{domxref("HTMLElement")}}
+ +

Атрибуты

+ +

Этот элемент включает только глобальные атрибуты.

+ +

Примечания

+ +

Содержимым элемента <summary>  может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.

+ +

Элемент <summary> может быть использован в качестве потомка элемента <details> . Когда пользователь кликает по элементу summary, его родитель  - <details> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <details> element, which can be used to let you know when this state change occurs.

+ +

Default label text

+ +

If a <details> element's first child is not a <summary> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.

+ +

Default style

+ +

Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

+ +

You can also change the style to display: block to remove the disclosure triangle.

+ +

See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.

+ +

Примеры

+ +

Below are some examples showing <summary> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.

+ +

Простой пример

+ +

A simple example showing the use of <summary> in a {{HTMLElement("details")}} element:

+ +
<details open>
+  <summary>Overview</summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

{{EmbedLiveSample("Basic_example", 650, 120)}}

+ +

Summaries as headings

+ +

You can use heading elements in <summary>, like this:

+ +
<details open>
+  <summary><h4>Overview</h4></summary>
+    <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}

+ +

This currently has some spacing issues that could be addressed using CSS.

+ +

HTML in summaries

+ +

This example adds some semantics to the <summary> element to indicate the label as important:

+ +
<details open>
+  <summary><strong>Overview</strong></summary>
+  <ol>
+    <li>Cash on hand: $500.00</li>
+    <li>Current invoice: $75.30</li>
+    <li>Due date: 5/6/19</li>
+  </ol>
+</details>
+ +

{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}{{Spec2('HTML5.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.summary")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf