Skip to content

Commit 1b56f29

Browse files
lekhmanruslekhmanrus
committed
docs: improve properties and methods template
close #32060
1 parent 544438c commit 1b56f29

File tree

5 files changed

+122
-79
lines changed

5 files changed

+122
-79
lines changed

‎docs/src/styles/_api.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
.docs-api-method-parameters-header-cell,
9999
.docs-api-method-returns-header-cell {
100100
font-size: 14px;
101+
padding-bottom: 0;
101102
}
102103

103104
.docs-api-input-marker,

‎docs/src/styles/_tables.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,38 @@
5252
height: 56px;
5353
}
5454

55+
.docs-api-method-card,
56+
.docs-api-properties-card {
57+
background-color: var(--mat-sys-surface-container-lowest);
58+
border: solid 1px var(--mat-sys-outline-variant);
59+
border-radius: 12px;
60+
margin: 0 0 32px;
61+
}
62+
63+
.docs-api-method-table,
64+
.docs-api-properties-table {
65+
margin: 0 !important;
66+
}
67+
68+
.docs-api-method-table tr {
69+
border-bottom: 0;
70+
71+
th.docs-api-method-name-cell .docs-api-method-parameter-name {
72+
color: var(--mat-sys-on-surface);
73+
}
74+
}
75+
76+
.docs-api-properties-table {
77+
.docs-api-properties-row:last-of-type {
78+
border-bottom: 0;
79+
}
80+
81+
.docs-api-property-type {
82+
color: var(--mat-sys-primary);
83+
}
84+
}
85+
86+
5587
@media (max-width: constants.$small-breakpoint-width) {
5688
.docs-api table,
5789
.docs-markdown > table {

‎tools/dgeni/templates/method.template.html‎

Lines changed: 77 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,85 @@
11
{% import "macros.html" as macros %}
22

3-
<table class="docs-api-method-table">
4-
<thead>
5-
<tr class="docs-api-method-name-row">
6-
<th colspan="2" class="docs-api-method-name-cell">
7-
{%- if method.isDeprecated -%}
8-
<div class="docs-api-deprecated-marker" {$ macros.deprecationTitle(method) $}>
9-
Deprecated
3+
<div class="docs-api-method-card">
4+
<table class="docs-api-method-table">
5+
<thead>
6+
<tr class="docs-api-method-name-row">
7+
<th colspan="2" class="docs-api-method-name-cell">
8+
{%- if method.isDeprecated -%}
9+
<div class="docs-api-deprecated-marker" {$ macros.deprecationTitle(method) $}>
10+
Deprecated
11+
</div>
12+
{%- endif -%}
13+
{%- if method.isStatic -%}
14+
<div class="docs-api-modifier-method-marker">
15+
static
1016
</div>
11-
{%- endif -%}
12-
{%- if method.isStatic -%}
13-
<div class="docs-api-modifier-method-marker">
14-
static
15-
</div>
16-
{%- endif -%}
17-
{%- if method.isAsync -%}
18-
<div class="docs-api-modifier-method-marker">
19-
async
20-
</div>
21-
{%- endif -%}
22-
{$ method.name $}
23-
</th>
17+
{%- endif -%}
18+
{%- if method.isAsync -%}
19+
<div class="docs-api-modifier-method-marker">
20+
async
21+
</div>
22+
{%- endif -%}
23+
{$ method.name $}
24+
({%- for param in method.params -%}
25+
<span class="docs-api-method-parameter-name">{$ param.name $}{% if param.isOptional %}<span class="docs-api-method-parameter-optional-marker">?</span>{% endif %}:
26+
</span>
27+
<code class="docs-api-method-parameter-type">{$ param.type $}</code>{% if not loop.last %}, {% endif %}
28+
{%- endfor -%}
29+
): <code class="docs-api-method-returns-type">{$ method.type $}</code>
30+
</th>
31+
</tr>
32+
</thead>
33+
{%- if method.description -%}
34+
<tr class="docs-api-method-description-row">
35+
<td colspan="2" class="docs-api-method-description-cell">
36+
{$ method.description | marked | safe $}
37+
</td>
2438
</tr>
25-
</thead>
26-
{%- if method.description -%}
27-
<tr class="docs-api-method-description-row">
28-
<td colspan="2" class="docs-api-method-description-cell">
29-
{$ method.description | marked | safe $}
30-
</td>
31-
</tr>
32-
{%- endif -%}
39+
{%- endif -%}
3340

34-
{%- if method.params.length -%}
35-
<thead>
36-
<tr class="docs-api-method-parameters-header-row">
37-
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
41+
{%- if method.params.length -%}
42+
<thead>
43+
<tr class="docs-api-method-parameters-header-row">
44+
<th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
45+
</tr>
46+
</thead>
47+
{% for parameter in method.params %}
48+
<tr class="docs-api-method-parameter-row">
49+
<td class="docs-api-method-parameter-cell">
50+
<p class="docs-api-method-parameter-name">
51+
{$ parameter.name $}
52+
{%- if parameter.isOptional -%}
53+
<span class="docs-api-method-parameter-optional-marker">?</span>
54+
{%- endif -%}
55+
</p>
56+
<code class="docs-api-method-parameter-type">{$ parameter.type $}</code>
57+
</td>
58+
<td class="docs-api-method-parameter-description-cell">
59+
<p class="docs-api-method-parameter-description">
60+
{$ parameter.description | marked | safe $}
61+
</p>
62+
</td>
3863
</tr>
39-
</thead>
40-
{% for parameter in method.params %}
41-
<tr class="docs-api-method-parameter-row">
42-
<td class="docs-api-method-parameter-cell">
43-
<p class="docs-api-method-parameter-name">
44-
{$ parameter.name $}
45-
{%- if parameter.isOptional -%}
46-
<span class="docs-api-method-parameter-optional-marker">?</span>
47-
{%- endif -%}
48-
</p>
49-
<code class="docs-api-method-parameter-type">{$ parameter.type $}</code>
50-
</td>
51-
<td class="docs-api-method-parameter-description-cell">
52-
<p class="docs-api-method-parameter-description">
53-
{$ parameter.description | marked | safe $}
54-
</p>
55-
</td>
56-
</tr>
57-
{% endfor %}
58-
{%- endif -%}
64+
{% endfor %}
65+
{%- endif -%}
5966

60-
{%- if method.type and method.type !== "void" -%}
61-
<thead>
62-
<tr class="docs-api-method-returns-header-row">
63-
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
67+
{%- if method.type and method.type !== "void" -%}
68+
<thead>
69+
<tr class="docs-api-method-returns-header-row">
70+
<th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
71+
</tr>
72+
</thead>
73+
<tr>
74+
<td class="docs-api-method-returns-type-cell">
75+
<code class="docs-api-method-returns-type">{$ method.type $}</code>
76+
</td>
77+
<td class="docs-api-method-returns-description-cell">
78+
<p class="docs-api-method-returns-description">
79+
{$ method.returns.description | marked | safe $}
80+
</p>
81+
</td>
6482
</tr>
65-
</thead>
66-
<tr>
67-
<td class="docs-api-method-returns-type-cell">
68-
<code class="docs-api-method-returns-type">{$ method.type $}</code>
69-
</td>
70-
<td class="docs-api-method-returns-description-cell">
71-
<p class="docs-api-method-returns-description">
72-
{$ method.returns.description | marked | safe $}
73-
</p>
74-
</td>
75-
</tr>
76-
{%- endif -%}
77-
</table>
83+
{%- endif -%}
84+
</table>
85+
</div>

‎tools/dgeni/templates/property-list.template.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
{%- if propertyList.length -%}
22
<h5 class="docs-api-h5 docs-api-method-header">Properties</h5>
3-
<table class="docs-api-properties-table">
4-
<tr class="docs-api-properties-header-row">
5-
<th class="docs-api-properties-th">Name</th>
6-
<th class="docs-api-properties-th">Description</th>
7-
</tr>
8-
{% for p in propertyList %}
9-
{$ property(p) $}
10-
{% endfor %}
11-
</table>
3+
<div class="docs-api-properties-card">
4+
<table class="docs-api-properties-table">
5+
<tr class="docs-api-properties-header-row">
6+
<th class="docs-api-properties-th">Name</th>
7+
<th class="docs-api-properties-th">Description</th>
8+
</tr>
9+
{% for p in propertyList %}
10+
{$ property(p) $}
11+
{% endfor %}
12+
</table>
13+
</div>
1214
{%- endif -%}

‎tools/dgeni/templates/property.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{%- endif -%}
2828

2929
<p class="docs-api-property-name">
30-
<code>{%- if property.isStatic -%}static&nbsp;{%- endif -%}{$ property.name $}: {$ property.type $}</code>
30+
<code>{%- if property.isStatic -%}static&nbsp;{%- endif -%}{$ property.name $}: <code class="docs-api-property-type">{$ property.type $}</code></code>
3131
</p>
3232
</td>
3333
<td class="docs-api-property-description">{$ property.description | marked | safe $}</td>

0 commit comments

Comments
 (0)