diff options
Diffstat (limited to 'files/ru/web/html/element/summary')
| -rw-r--r-- | files/ru/web/html/element/summary/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
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: '<summary>: The Disclosure Summary element' +slug: Web/HTML/Element/summary +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">The <strong>HTML Disclosure Summary element</strong> (<strong><code><summary></code></strong>) element specifies a summary, caption, or legend for a {{HTMLElement("details")}} element's disclosure box.</span> Clicking the <code><summary></code> element toggles the state of the parent <code><details></code> element open and closed.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div> + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Permitted content</th> + <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Phrasing content</a> or one element of <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Heading_content">Heading content</a></td> + </tr> + <tr> + <th scope="row">Tag omission</th> + <td>None, both the start tag and the end tag are mandatory.</td> + </tr> + <tr> + <th scope="row">Permitted parents</th> + <td>The {{HTMLElement("details")}} element.</td> + </tr> + <tr> + <th scope="row">Permitted ARIA roles</th> + <td>{{ARIARole("button")}}</td> + </tr> + <tr> + <th scope="row">DOM interface</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Атрибуты">Атрибуты</h2> + +<p>Этот элемент включает только <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p> + +<h2 id="Примечания">Примечания</h2> + +<p>Содержимым элемента <code><summary></code> может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.</p> + +<p>Элемент <code><summary></code> может быть использован в качестве потомка элемента <code><details></code> . Когда пользователь кликает по элементу summary, его родитель - <code><details></code> меняет состояние с раскрытого или закрытого на обратное,и тогда {{event("toggle")}} event is sent to the <code><details></code> element, which can be used to let you know when this state change occurs.</p> + +<h3 id="Default_label_text">Default label text</h3> + +<p>If a <code><details></code> element's first child is not a <code><summary></code> element, the {{Glossary("user agent")}} will use a default string (typically "Details") as the label for the disclosure box.</p> + +<h3 id="Default_style">Default style</h3> + +<p>Per the HTML specification, the default style for <code><summary></code> elements includes <code>display: list-item</code>. 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.</p> + +<p>You can also change the style to <code>display: block</code> to remove the disclosure triangle.</p> + +<p>See the {{anch("Browser compatibility")}} section for details, as not all browsers support full functionality of this element yet.</p> + +<h2 id="Примеры">Примеры</h2> + +<p>Below are some examples showing <code><summary></code> in use. You can find more examples in the documentation for the {{HTMLElement("details")}} element.</p> + +<h3 id="Простой_пример">Простой пример</h3> + +<p>A simple example showing the use of <code><summary></code> in a {{HTMLElement("details")}} element:</p> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p> + +<h3 id="Summaries_as_headings">Summaries as headings</h3> + +<p>You can use heading elements in <code><summary></code>, like this:</p> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p> + +<p>This currently has some spacing issues that could be addressed using CSS.</p> + +<h3 id="HTML_in_summaries">HTML in summaries</h3> + +<p>This example adds some semantics to the <code><summary></code> element to indicate the label as important:</p> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.elements.summary")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> |