mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Joe Martin (Crowdstaffing)
61894570f1
improve markdown for documentation. Duplicate of #45325 that targets 13.3.x. PR Close #45590
142 lines
4.1 KiB
HTML
142 lines
4.1 KiB
HTML
<h1>Test Code Page</h1>
|
|
|
|
<h2><code-tabs></h2>
|
|
|
|
<p>No linenums at code-tabs level</p>
|
|
<code-tabs>
|
|
<code-pane header="TypeScript code file" language="typescript">
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header="HTML content file" language="html"><h1>Heading</h1></code-pane>
|
|
<code-pane header="JSON data file" language="json" class="avoid">{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<p>linenums=true at code-tabs level</p>
|
|
<code-tabs linenums="true">
|
|
<code-pane header="TypeScript code file" language="typescript">
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header="HTML content file" language="html"><h1>Heading</h1></code-pane>
|
|
<code-pane header="JSON data file" language="json" class="avoid">{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<p>No linenums at code-tabs level; linenums=true for second HTML pane</p>
|
|
<code-tabs >
|
|
<code-pane header="TypeScript code file" language="typescript">
|
|
class {
|
|
foo(param: string) {}
|
|
}
|
|
</code-pane>
|
|
<code-pane header="HTML content file" language="html" linenums="true"><h1>Heading</h1></code-pane>
|
|
<code-pane header="JSON data file" language="json" class="avoid">{ "key": "value" }</code-pane>
|
|
</code-tabs>
|
|
<p></p>
|
|
|
|
<h2><code-example></h2>
|
|
|
|
<p>One line.</p>
|
|
<code-example>const foo = 'bar'</code-example>
|
|
|
|
<p>Multi-line, linenums=true.</p>
|
|
<code-example linenums="true">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Bah Dah Bing</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Headless Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>Default linenums (false).</p>
|
|
<code-example>
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Headless Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>Header on this one.</p>
|
|
<code-example header="hero-details.component.ts (excerpt)">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Winning Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<p>An "avoid" header on this one.</p>
|
|
<code-example class="avoid" header="hero-details.component.ts (Avoid)">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Mister Fantastic</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Losing Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
<a id="backticked-code-blocks"></a>
|
|
|
|
<h2>Backticked code blocks</h2>
|
|
|
|
<pre><code>
|
|
```html
|
|
<hero-details>
|
|
<h2>Mister Fantastic</h2>
|
|
<hero-team>
|
|
<h3>Losing Team</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
```
|
|
</code></pre>
|
|
|
|
<h2><live-example></h2>
|
|
|
|
<p>Plain live-example</p>
|
|
Try this <live-example></live-example>.
|
|
|
|
<p>live-example with title atty</p>
|
|
<live-example title="Good Example"></live-example>
|
|
|
|
<p>live-example with title body</p>
|
|
<live-example title="Good Example">Try this great example</live-example>
|
|
|
|
<p>live-example with name</p>
|
|
<live-example name="testy" title="Better Example"></live-example>
|
|
|
|
<p>live-example with spacey name and stackblitz</p>
|
|
<live-example name=" testy " stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>live-example with name and stackblitz but no download</p>
|
|
<live-example name="testy" stackblitz="super-stackblitz" noDownload></live-example>
|
|
|
|
<p>live-example embedded with name and stackblitz</p>
|
|
<live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>More text follows ...</p>
|
|
|
|
<p>Getting Started Widgets</p>
|
|
|
|
<p>Interpolation</p>
|
|
<aio-gs-interpolation></aio-gs-interpolation>
|
|
|
|
<p>Property Binding</p>
|
|
<aio-gs-property-binding></aio-gs-property-binding>
|
|
|
|
<p>Event Binding</p>
|
|
<aio-gs-event-binding></aio-gs-event-binding>
|
|
|
|
<p>NgIf</p>
|
|
<aio-gs-ng-if></aio-gs-ng-if>
|
|
|
|
<p>NgFor</p>
|
|
<aio-gs-ng-for></aio-gs-ng-for>
|