Skip to content

Commit 96bfb59

Browse files
farfromrefugfarfromrefug
committed
readme/doc
1 parent ed53702 commit 96bfb59

26 files changed

+430
-212
lines changed

‎README.md‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -669,6 +669,13 @@ If you have any questions/issues/comments please feel free to create an issue or
669669

670670
* [Installation](#installation)
671671
* [Configuration](#configuration)
672+
* [API](#api)
673+
* [CollectionView extensions](#collectionview-extensions)
674+
* [Events](#events)
675+
* [Propert](#propert)
676+
* [Methods](#methods)
677+
* [Usage](#usage)
678+
* [Simple Example](#simple-example)
672679
* [Demos and Development](#demos-and-development)
673680
* [Repo Setup](#repo-setup)
674681
* [Build](#build)
@@ -705,8 +712,83 @@ To install the plugin run:
705712
import install from '@nativescript-community/ui-collectionview-swipemenu';
706713
install();
707714
```
715+
716+
[](#api)
717+
718+
719+
[](#api)
720+
721+
## API
708722

709-
then simply use the `layoutStyle="waterfall"` as a collectionview property
723+
724+
725+
[](#collectionview-extensions)
726+
727+
728+
[](#collectionview-extensions)
729+
730+
## CollectionView extensions
731+
### Events
732+
733+
| Property | Description |
734+
| ------------------- | ---------------------------------------------------------------------------- |
735+
| swipeMenuOpen | Triggered when a menu is opened in the CollectionView. |
736+
| swipeMenuClose | Triggered when a menu is closed in the CollectionView. |
737+
738+
739+
### Propert
740+
### Methods
741+
742+
| Name | Return | Description |
743+
| ------------------------------------------------------ | ------ | ---------------------------------------------------------------------------------------------------------------------- |
744+
| closeCurrentMenu() | `void` | Close any opened menu in the CollectionView. |
745+
746+
747+
[](#usage)
748+
749+
750+
[](#usage)
751+
752+
## Usage
753+
754+
First very important note. For this plugin to work correctly, collectionview items must be an object!
755+
The plugin will add `startingSide` property to your items as needed to keep knowledge of which menu is opened and notify the template `SwipeMenu`. Might change in the future
756+
757+
You need to add `xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu"` to your page tag, and then simply use `<gvs:SwipeMenu/>` in order to add the widget to your page. Use `<gv:Gridview.itemTemplate/>` to specify the template for each cell:
758+
759+
### Simple Example
760+
761+
Create a simple array of objects in your JS/TS file.
762+
763+
```typescript
764+
const items = [
765+
{ index: 0, name: 'TURQUOISE', color: '#1abc9c' },
766+
{ index: 1, name: 'EMERALD', color: '#2ecc71' },
767+
{ index: 2, name: 'PETER RIVER', color: '#3498db' },
768+
{ index: 3, name: 'AMETHYST', color: '#9b59b6' },
769+
{ index: 4, name: 'WET ASPHALT', color: '#34495e' },
770+
{ index: 5, name: 'GREEN SEA', color: '#16a085' },
771+
{ index: 6, name: 'NEPHRITIS', color: '#27ae60' },
772+
{ index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
773+
{ index: 8, name: 'WISTERIA', color: '#8e44ad' },
774+
{ index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
775+
];
776+
```
777+
778+
```xml
779+
<!-- test-page.xml -->
780+
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:gv="@nativescript-community/ui-collectionview" xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu" >
781+
<GridLayout>
782+
<gv:CollectionView items="items" rowHeight="100">
783+
<gv:CollectionView.itemTemplate>
784+
<gvs:SwipeMenu startingSide="startingSide">
785+
<Label text="value" verticalAlignment="center"/>
786+
</gvs:SwipeMenu>
787+
</gv:CollectionView.itemTemplate>
788+
</gv:CollectionView>
789+
</GridLayout>
790+
</Page>
791+
```
710792

711793

712794
[](#demos-and-development)

‎docs/assets/search.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/classes/collectionview.CollectionView.html‎

Lines changed: 77 additions & 59 deletions
Large diffs are not rendered by default.

‎docs/classes/collectionview.CollectionViewBase.html‎

Lines changed: 79 additions & 61 deletions
Large diffs are not rendered by default.

‎docs/classes/swipemenu.CollectionViewWithSwipeMenu.html‎

Lines changed: 77 additions & 59 deletions
Large diffs are not rendered by default.

‎docs/enums/collectionview.ListViewViewTypes.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h1>Enumeration ListViewViewTypes</h1></div>
2020
<div class="tsd-comment tsd-typography"><p>Defines the different view types that RadListView can display in various scenarios.</p>
2121
</div></section><aside class="tsd-sources">
2222
<ul>
23-
<li>Defined in packages/collectionview/index.d.ts:39</li></ul></aside>
23+
<li>Defined in packages/collectionview/index.d.ts:40</li></ul></aside>
2424
<section class="tsd-panel-group tsd-index-group">
2525
<section class="tsd-panel tsd-index-panel">
2626
<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -38,7 +38,7 @@ <h3 class="tsd-anchor-link"><span>Item<wbr/>View</span><a href="#ItemView" aria-
3838
<div class="tsd-comment tsd-typography"><p>Identifies a view created using the itemTemplate value.</p>
3939
</div><aside class="tsd-sources">
4040
<ul>
41-
<li>Defined in packages/collectionview/index.d.ts:43</li></ul></aside></section></section></div>
41+
<li>Defined in packages/collectionview/index.d.ts:44</li></ul></aside></section></section></div>
4242
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
4343
<div class="tsd-navigation settings">
4444
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

‎docs/index.html‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,17 @@ <h2>Table of Contents</h2>
543543
<ul>
544544
<li><a href="#installation">Installation</a></li>
545545
<li><a href="#configuration">Configuration</a></li>
546+
<li><a href="#api">API</a></li>
547+
<li><a href="#collectionview-extensions">CollectionView extensions</a><ul>
548+
<li><a href="#events">Events</a></li>
549+
<li><a href="#propert">Propert</a></li>
550+
<li><a href="#methods">Methods</a></li>
551+
</ul>
552+
</li>
553+
<li><a href="#usage">Usage</a><ul>
554+
<li><a href="#simple-example">Simple Example</a></li>
555+
</ul>
556+
</li>
546557
<li><a href="#demos-and-development">Demos and Development</a><ul>
547558
<li><a href="#repo-setup">Repo Setup</a></li>
548559
<li><a href="#build">Build</a></li>
@@ -576,7 +587,78 @@ <h2>Configuration</h2>
576587
<p>To install the plugin run:</p>
577588
<pre><code class="language-typescript"><span class="hl-11">import</span><span class="hl-1"> </span><span class="hl-3">install</span><span class="hl-1"> </span><span class="hl-11">from</span><span class="hl-1"> </span><span class="hl-5">&#39;@nativescript-community/ui-collectionview-swipemenu&#39;</span><span class="hl-1">;</span><br/><span class="hl-12">install</span><span class="hl-1">();</span>
578589
</code></pre>
579-
<p>then simply use the <code>layoutStyle=&quot;waterfall&quot;</code> as a collectionview property</p>
590+
<p><a href="#api"></a></p>
591+
<p><a href="#api"></a></p>
592+
593+
<a href="#api-1" id="api-1" style="color: inherit; text-decoration: none;">
594+
<h2>API</h2>
595+
</a>
596+
<p><a href="#collectionview-extensions"></a></p>
597+
<p><a href="#collectionview-extensions"></a></p>
598+
599+
<a href="#collectionview-extensions" id="collectionview-extensions" style="color: inherit; text-decoration: none;">
600+
<h2>CollectionView extensions</h2>
601+
</a>
602+
603+
<a href="#events-1" id="events-1" style="color: inherit; text-decoration: none;">
604+
<h3>Events</h3>
605+
</a>
606+
<table>
607+
<thead>
608+
<tr>
609+
<th>Property</th>
610+
<th>Description</th>
611+
</tr>
612+
</thead>
613+
<tbody><tr>
614+
<td>swipeMenuOpen</td>
615+
<td>Triggered when a menu is opened in the CollectionView.</td>
616+
</tr>
617+
<tr>
618+
<td>swipeMenuClose</td>
619+
<td>Triggered when a menu is closed in the CollectionView.</td>
620+
</tr>
621+
</tbody></table>
622+
623+
<a href="#propert" id="propert" style="color: inherit; text-decoration: none;">
624+
<h3>Propert</h3>
625+
</a>
626+
627+
<a href="#methods-1" id="methods-1" style="color: inherit; text-decoration: none;">
628+
<h3>Methods</h3>
629+
</a>
630+
<table>
631+
<thead>
632+
<tr>
633+
<th>Name</th>
634+
<th>Return</th>
635+
<th>Description</th>
636+
</tr>
637+
</thead>
638+
<tbody><tr>
639+
<td>closeCurrentMenu()</td>
640+
<td><code>void</code></td>
641+
<td>Close any opened menu in the CollectionView.</td>
642+
</tr>
643+
</tbody></table>
644+
<p><a href="#usage"></a></p>
645+
<p><a href="#usage"></a></p>
646+
647+
<a href="#usage-1" id="usage-1" style="color: inherit; text-decoration: none;">
648+
<h2>Usage</h2>
649+
</a>
650+
<p>First very important note. For this plugin to work correctly, collectionview items must be an object!
651+
The plugin will add <code>startingSide</code> property to your items as needed to keep knowledge of which menu is opened and notify the template <code>SwipeMenu</code>. Might change in the future</p>
652+
<p>You need to add <code>xmlns:gvs=&quot;@nativescript-community/ui-collectionview-swipemenu&quot;</code> to your page tag, and then simply use <code>&lt;gvs:SwipeMenu/&gt;</code> in order to add the widget to your page. Use <code>&lt;gv:Gridview.itemTemplate/&gt;</code> to specify the template for each cell:</p>
653+
654+
<a href="#simple-example-6" id="simple-example-6" style="color: inherit; text-decoration: none;">
655+
<h3>Simple Example</h3>
656+
</a>
657+
<p>Create a simple array of objects in your JS/TS file.</p>
658+
<pre><code class="language-typescript"><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-2">items</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">0</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;TURQUOISE&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#1abc9c&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">1</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;EMERALD&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#2ecc71&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">2</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;PETER RIVER&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#3498db&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">3</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;AMETHYST&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#9b59b6&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">4</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;WET ASPHALT&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#34495e&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">5</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;GREEN SEA&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#16a085&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">6</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;NEPHRITIS&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#27ae60&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">7</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;BELIZE HOLE&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#2980b9&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">8</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;WISTERIA&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#8e44ad&#39;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">index:</span><span class="hl-1"> </span><span class="hl-4">9</span><span class="hl-1">, </span><span class="hl-3">name:</span><span class="hl-1"> </span><span class="hl-5">&#39;MIDNIGHT BLUE&#39;</span><span class="hl-1">, </span><span class="hl-3">color:</span><span class="hl-1"> </span><span class="hl-5">&#39;#2c3e50&#39;</span><span class="hl-1"> }</span><br/><span class="hl-1">];</span>
659+
</code></pre>
660+
<pre><code class="language-xml"><span class="hl-6">&lt;!-- test-page.xml --&gt;</span><br/><span class="hl-7">&lt;</span><span class="hl-8">Page</span><span class="hl-1"> </span><span class="hl-9">xmlns</span><span class="hl-1">=</span><span class="hl-10">&quot;http://schemas.nativescript.org/tns.xsd&quot;</span><span class="hl-1"> </span><span class="hl-9">xmlns:gv</span><span class="hl-1">=</span><span class="hl-10">&quot;@nativescript-community/ui-collectionview&quot;</span><span class="hl-1"> </span><span class="hl-9">xmlns:gvs</span><span class="hl-1">=</span><span class="hl-10">&quot;@nativescript-community/ui-collectionview-swipemenu&quot;</span><span class="hl-1"> </span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">GridLayout</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">gv:CollectionView</span><span class="hl-1"> </span><span class="hl-9">items</span><span class="hl-1">=</span><span class="hl-10">&quot;items&quot;</span><span class="hl-1"> </span><span class="hl-9">rowHeight</span><span class="hl-1">=</span><span class="hl-10">&quot;100&quot;</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">gv:CollectionView.itemTemplate</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">gvs:SwipeMenu</span><span class="hl-1"> </span><span class="hl-9">startingSide</span><span class="hl-1">=</span><span class="hl-10">&quot;startingSide&quot;</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;</span><span class="hl-8">Label</span><span class="hl-1"> </span><span class="hl-9">text</span><span class="hl-1">=</span><span class="hl-10">&quot;value&quot;</span><span class="hl-1"> </span><span class="hl-9">verticalAlignment</span><span class="hl-1">=</span><span class="hl-10">&quot;center&quot;</span><span class="hl-7">/&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;/</span><span class="hl-8">gvs:SwipeMenu</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;/</span><span class="hl-8">gv:CollectionView.itemTemplate</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;/</span><span class="hl-8">gv:CollectionView</span><span class="hl-7">&gt;</span><br/><span class="hl-1"> </span><span class="hl-7">&lt;/</span><span class="hl-8">GridLayout</span><span class="hl-7">&gt;</span><br/><span class="hl-7">&lt;/</span><span class="hl-8">Page</span><span class="hl-7">&gt;</span>
661+
</code></pre>
580662
<p><a href="#demos-and-development"></a></p>
581663
<p><a href="#demos-and-development"></a></p>
582664

‎docs/interfaces/collectionview.CollectionViewItemDisplayEventData.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h4>Hierarchy</h4>
2323
<ul class="tsd-hierarchy">
2424
<li><span class="target">CollectionViewItemDisplayEventData</span></li></ul></li></ul></section><aside class="tsd-sources">
2525
<ul>
26-
<li>Defined in packages/collectionview/index.d.ts:30</li></ul></aside>
26+
<li>Defined in packages/collectionview/index.d.ts:31</li></ul></aside>
2727
<section class="tsd-panel-group tsd-index-group">
2828
<section class="tsd-panel tsd-index-panel">
2929
<details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary">
@@ -42,18 +42,18 @@ <h3 class="tsd-anchor-link"><span>event<wbr/>Name</span><a href="#eventName" ari
4242
<div class="tsd-signature">event<wbr/>Name<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
4343
<p>Overrides EventData.eventName</p>
4444
<ul>
45-
<li>Defined in packages/collectionview/index.d.ts:31</li></ul></aside></section>
45+
<li>Defined in packages/collectionview/index.d.ts:32</li></ul></aside></section>
4646
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="index" class="tsd-anchor"></a>
4747
<h3 class="tsd-anchor-link"><span>index</span><a href="#index" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
4848
<div class="tsd-signature">index<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
4949
<ul>
50-
<li>Defined in packages/collectionview/index.d.ts:33</li></ul></aside></section>
50+
<li>Defined in packages/collectionview/index.d.ts:34</li></ul></aside></section>
5151
<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="object" class="tsd-anchor"></a>
5252
<h3 class="tsd-anchor-link"><span>object</span><a href="#object" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
5353
<div class="tsd-signature">object<span class="tsd-signature-symbol">:</span> <a href="../classes/collectionview.CollectionView.html" class="tsd-signature-type" data-tsd-kind="Class">CollectionView</a></div><aside class="tsd-sources">
5454
<p>Overrides EventData.object</p>
5555
<ul>
56-
<li>Defined in packages/collectionview/index.d.ts:32</li></ul></aside></section></section></div>
56+
<li>Defined in packages/collectionview/index.d.ts:33</li></ul></aside></section></section></div>
5757
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
5858
<div class="tsd-navigation settings">
5959
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">

0 commit comments

Comments
 (0)