137 lines
4.2 KiB
HTML
137 lines
4.2 KiB
HTML
<h1>Página de códigos de prueba </h1>
|
|
|
|
<h2><Pestañas de código></h2>
|
|
|
|
<p> No hay listas de linenums a nivel de etiquetas de código </p>
|
|
<code-tabs>
|
|
<code-pane header='TS code file' language='ts'>
|
|
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='TS code file' language='ts'>
|
|
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>Sin linenums a nivel de etiquetas de código; linenums = verdadero para el segundo panel HTML</p>
|
|
<code-tabs >
|
|
<code-pane header='TS code file' language='ts'>
|
|
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>Una línea.</p>
|
|
<code-example>const foo = 'bar'</code-example>
|
|
|
|
<p>Multi-línea, 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>linenums por defecto (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>Encabezado en este.</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>Un encabezado "evitar" en este.</p>
|
|
<code-example class="avoid" header="hero-details.component.ts (Avoid)">
|
|
<hero-details <em>nghost-pmm-5>
|
|
<h2 </em>ngcontent-pmm-5>Señor fantástico</h2>
|
|
<hero-team <em>ngcontent-pmm-5 </em>nghost-pmm-6>
|
|
<h3 _ngcontent-pmm-6>Equipo Perdedor</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
</code-example>
|
|
|
|
## Bloques de código con tilde atrás
|
|
|
|
```html
|
|
<hero-details>
|
|
<h2>Señor fantástico</h2>
|
|
<hero-team>
|
|
<h3>Equipo perdedor</h3>
|
|
</hero-team>
|
|
</hero-details>
|
|
```
|
|
|
|
<h2><ejemplo en vivo></h2>
|
|
|
|
<p>Ejemplo simple en vivo</p>
|
|
Prueba esto <live-example></live-example>.
|
|
|
|
<p>ejemplo en vivo con título atty</p>
|
|
<live-example title="Good Example"></live-example>
|
|
|
|
<p>ejemplo en vivo con el cuerpo del título</p>
|
|
<live-example title="Good Example">Prueba este gran ejemplo</live-example>
|
|
|
|
<p>ejemplo en vivo con nombre</p>
|
|
<live-example name="testy" title="Better Example"></live-example>
|
|
|
|
<p>ejemplo en vivo con nombre espacial y stackblitz</p>
|
|
<live-example name=" testy " stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>ejemplo en vivo con nombre y stackblitz pero sin descarga</p>
|
|
<live-example name="testy" stackblitz="super-stackblitz" noDownload></live-example>
|
|
|
|
<p>ejemplo en vivo incrustado con nombre y stackblitz</p>
|
|
<live-example embedded name="testy" stackblitz="super-stackblitz"></live-example>
|
|
|
|
<p>Sigue más texto ...</p>
|
|
|
|
<p>Widgets de introducción</p>
|
|
|
|
<p>Interpolación</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> |