build(aio): improve API docs layout and styling
(cherry picked from commit a301dba68f
)
This commit is contained in:

committed by
Igor Minar

parent
9dba26b686
commit
d83f7a1859
@ -2,7 +2,7 @@
|
||||
<section class="annotations">
|
||||
<h2>Annotations</h2>
|
||||
{%- for decorator in doc.decorators %}
|
||||
<code-example hideCopy="true">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</code-example>
|
||||
<code-example hideCopy="true" class="no-box api-heading">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</code-example>
|
||||
{% if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
@ -0,0 +1,14 @@
|
||||
{% import "lib/memberHelpers.html" as memberHelper -%}
|
||||
|
||||
<section class="{$ doc.docType $}-overview">
|
||||
<h2>Overview</h2>
|
||||
<code-example language="ts" hideCopy="true">{% for decorator in doc.decorators %}
|
||||
<a href="#annotations">@{$ decorator.name $}{$ params.paramList(decorator.arguments) $}</a>{% endfor %}
|
||||
class {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {
|
||||
{%- if doc.statics.length %}{% for member in doc.statics %}{% if not member.internal %}
|
||||
<a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
|
||||
{%- if doc.members.length %}{% for member in doc.members %}{% if not member.internal %}
|
||||
<a class="code-anchor" href="#{$ member.anchor $}">{$ memberHelper.renderMember(member, 1) $}</a>{% endif %}{% endfor %}{% endif %}
|
||||
}
|
||||
</code-example>
|
||||
</section>
|
@ -1,14 +1,27 @@
|
||||
{% import "lib/githubLinks.html" as github -%}
|
||||
|
||||
<!-- INFO BAR -->
|
||||
<div class="info-banner api-info-bar">
|
||||
<span class="info-bar-item">
|
||||
npm package: <code>@angular/{$ doc.moduleDoc.id $}</code>
|
||||
</span>
|
||||
<section class="info-bar">
|
||||
|
||||
{% if doc.ngModule %}
|
||||
<span class="info-bar-item">
|
||||
NgModule: {@link {$ doc.ngModule $}}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<table class="is-full-width">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>npm Package</th>
|
||||
<td><a href="https://www.npmjs.com/package/@angular/{$ doc.moduleDoc.id.split('/')[0] $}">@angular/{$ doc.moduleDoc.id.split('/')[0] $}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Module</th>
|
||||
<td><code>import { {$ doc.name $} } from <a href="{$ doc.moduleDoc.path $}">@angular/{$ doc.moduleDoc.id $}</a>;</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Source</th>
|
||||
<td>{$ github.githubViewLink(doc, versionInfo) $}</td>
|
||||
</tr>
|
||||
{% if doc.ngModule %}
|
||||
<tr>
|
||||
<th>NgModule</th>
|
||||
<td>{@link {$ doc.ngModule $}}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
Reference in New Issue
Block a user