Skip to content

Commit b70daf7

Browse files
beemanbeeman
authored
Merge pull request angular-split#245 from bertrandg/beeman/docs
chore: update documentation
2 parents 2edc2e0 + 7c5d039 commit b70daf7

1 file changed

Lines changed: 86 additions & 46 deletions

File tree

‎src_app/app/component/doc/doc.route.component.ts‎

Lines changed: 86 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -35,38 +35,54 @@ export class DocComponent {
3535
readonly splitDoc = {
3636
inputs: [
3737
{
38-
name: 'direction',
38+
name: 'dir',
3939
type: 'string',
40-
default: '"horizontal"',
41-
details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.',
40+
default: '"ltr"',
41+
details:
42+
'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).',
4243
},
4344
{
44-
name: 'unit',
45+
name: 'direction',
4546
type: 'string',
46-
default: '"percent"',
47-
details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code> to specify area sizes.`,
47+
default: '"horizontal"',
48+
details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.',
4849
},
49-
{ name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.` },
50-
{ name: 'gutterStep', type: 'number', default: '1', details: `Gutter step while moving in pixels.` },
5150
{
52-
name: 'restrictMove',
51+
name: 'disabled',
5352
type: 'boolean',
5453
default: 'false',
55-
details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas only.',
54+
details:
55+
'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code>/<code>(gutterDblClick)</code> still emits.',
5656
},
5757
{
58-
name: 'disabled',
58+
name: 'gutterDblClickDuration',
59+
type: 'number',
60+
default: '0',
61+
details: `Milliseconds to detect a double click on a gutter. Set it around 300-500ms if you want to use <code>(gutterDblClick)</code> event.`,
62+
},
63+
{
64+
name: 'gutterSize',
65+
type: 'number',
66+
default: '11',
67+
details: `Gutters's size (dragging elements) in pixels.`,
68+
},
69+
{
70+
name: 'gutterStep',
71+
type: 'number',
72+
default: '1',
73+
details: `Gutter step while moving in pixels.`,
74+
},
75+
{
76+
name: 'restrictMove',
5977
type: 'boolean',
6078
default: 'false',
61-
details:
62-
'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code>/<code>(gutterDblClick)</code> still emits.',
79+
details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas only.',
6380
},
6481
{
65-
name: 'dir',
82+
name: 'unit',
6683
type: 'string',
67-
default: '"ltr"',
68-
details:
69-
'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).',
84+
default: '"percent"',
85+
details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code> to specify area sizes.`,
7086
},
7187
{
7288
name: 'useTransition',
@@ -75,26 +91,28 @@ export class DocComponent {
7591
details:
7692
'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code> changes.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>',
7793
},
78-
{
79-
name: 'gutterDblClickDuration',
80-
type: 'number',
81-
default: '0',
82-
details: `Milliseconds to detect a double click on a gutter. Set it around 300-500ms if you want to use <code>(gutterDblClick)</code> event.`,
83-
},
8494
],
8595
outputs: [
86-
{ name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.' },
87-
{ name: 'dragEnd', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.' },
8896
{
89-
name: 'gutterClick',
97+
name: 'dragEnd',
9098
value: '{gutterNum: number, sizes: Array<number>}',
91-
details: 'Emit when user clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.',
99+
details: 'Emit when drag ends.',
100+
},
101+
{
102+
name: 'dragStart',
103+
value: '{gutterNum: number, sizes: Array<number>}',
104+
details: 'Emit when drag starts.',
92105
},
93106
{
94107
name: 'gutterDblClick',
95108
value: '{gutterNum: number, sizes: Array<number>}',
96109
details: 'Emit when user double clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.',
97110
},
111+
{
112+
name: 'gutterClick',
113+
value: '{gutterNum: number, sizes: Array<number>}',
114+
details: 'Emit when user clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.',
115+
},
98116
{
99117
name: 'transitionEnd',
100118
value: 'Array<number>',
@@ -108,23 +126,33 @@ export class DocComponent {
108126
type: 'Observable<{gutterNum: number, sizes: Array<number>}>',
109127
details: `Emit when dragging. Replace old <code>(dragProgress)</code> template event for better flexibility about change detection mechanism.<br><u>Warning: Running outside zone by design, if you need to notify angular add</u> <code>this.splitEl.dragProgress$.subscribe(x => this.ngZone.run(() => this.x = x));</code>`,
110128
},
129+
{
130+
name: 'getVisibleAreaSizes()',
131+
type: '() => Array<number>',
132+
details: 'Get all <b>visible</b> area sizes.',
133+
},
111134
{
112135
name: 'setVisibleAreaSizes()',
113136
type: '(Array<number>) => boolean',
114137
details:
115138
'Set all <b>visible</b> area sizes in one go, return a boolean to know if input values were correct. Useful when combined with <code>dragProgress$</code> to sync multiple splits.',
116139
},
117-
{ name: 'getVisibleAreaSizes()', type: '() => Array<number>', details: 'Get all <b>visible</b> area sizes.' },
118140
],
119141
}
120142

121143
readonly splitAreaDoc = {
122144
inputs: [
123145
{
124-
name: 'size',
146+
name: 'lockSize',
147+
type: 'boolean',
148+
default: 'false',
149+
details: `Lock area size, same as <code>minSize</code> = <code>maxSize</code> = <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
150+
},
151+
{
152+
name: 'maxSize',
125153
type: 'number',
126-
default: '-',
127-
details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100, If not, all areas will have the same size.<br><u>Pixel mode:</u> An area with wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`,
154+
default: 'null',
155+
details: `Maximum pixel or percent size, can't be bigger than provided <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
128156
},
129157
{
130158
name: 'minSize',
@@ -133,16 +161,16 @@ export class DocComponent {
133161
details: `Minimum pixel or percent size, can't be smaller than provided <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
134162
},
135163
{
136-
name: 'maxSize',
164+
name: 'order',
137165
type: 'number',
138166
default: 'null',
139-
details: `Maximum pixel or percent size, can't be bigger than provided <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
167+
details: `Order of the area. Used to maintain the order of areas when toggling their visibility. Toggling area visibility without specifying an <code>order</code> leads to weird behavior`,
140168
},
141169
{
142-
name: 'lockSize',
143-
type: 'boolean',
144-
default: 'false',
145-
details: `Lock area size, same as <code>minSize</code> = <code>maxSize</code> = <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`,
170+
name: 'size',
171+
type: "number|'*'",
172+
default: '-',
173+
details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100, If not, all areas will have the same size.<br><u>Pixel mode:</u> An area with wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`,
146174
},
147175
{
148176
name: 'visible',
@@ -155,19 +183,31 @@ export class DocComponent {
155183

156184
readonly cssClasses = {
157185
split: [
158-
{ name: 'as-init', details: 'Added after component initialization.' },
159-
{ name: 'as-horizontal / as-vertical', details: 'Depends on <code>&lt;as-split [direction]="x"&gt;</code>.' },
160-
{ name: 'as-disabled', details: 'Added when <code>&lt;as-split [disabled]="true"&gt;</code>.' },
161-
{ name: 'as-transition', details: 'Added when <code>&lt;as-split [useTransition]="true"&gt;</code>.' },
162-
{ name: 'as-dragging', details: 'Added while a gutter is dragged.' },
186+
{ name: 'ui-init', details: 'Added after component initialization.' },
187+
{
188+
name: 'ui-horizontal / ui-vertical',
189+
details: 'Depends on <code>&lt;ui-split [direction]="x"&gt;</code>.',
190+
},
191+
{
192+
name: 'ui-disabled',
193+
details: 'Added when <code>&lt;ui-split [disabled]="true"&gt;</code>.',
194+
},
195+
{
196+
name: 'ui-transition',
197+
details: 'Added when <code>&lt;ui-split [useTransition]="true"&gt;</code>.',
198+
},
199+
{ name: 'ui-dragging', details: 'Added while a gutter is dragged.' },
163200
],
164201
area: [
165-
{ name: 'as-split-area', details: 'Added on all areas.' },
166-
{ name: 'as-hidden', details: 'Added when <code>&lt;as-split-area [visible]="false"&gt;</code>.' },
202+
{ name: 'ui-split-area', details: 'Added on all areas.' },
203+
{
204+
name: 'ui-hidden',
205+
details: 'Added when <code>&lt;ui-split-area [visible]="false"&gt;</code>.',
206+
},
167207
],
168208
gutter: [
169-
{ name: 'as-split-gutter', details: 'Added on all gutters.' },
170-
{ name: 'as-dragged', details: 'Added on gutter while dragged.' },
209+
{ name: 'ui-split-gutter', details: 'Added on all gutters.' },
210+
{ name: 'ui-dragged', details: 'Added on gutter while dragged.' },
171211
],
172212
}
173213
}

0 commit comments

Comments
 (0)