@nativescript-community/ui-collectionview-swipemenu

一个 NativeScript CollectionView 滑动菜单插件。

目录

• 安装
• 配置
• API
• CollectionView 扩展
  • 事件
  • 属性
  • 方法
• 用法
  • 简单示例
• 演示和开发
  • 仓库设置
  • 构建
  • 演示
• 贡献
  • 更新仓库
  • 更新说明
  • 更新文档
  • 发布
  • 修改子模块
• 问题

安装

从您项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-collectionview-swipemenu

配置

要安装插件，请运行

import install from '@nativescript-community/ui-collectionview-swipemenu';
install();

API

CollectionView 扩展

事件

属性

方法

用法

第一个非常重要的注意事项。为了使此插件正确工作，collectionView 项目必须是一个对象！插件将根据需要向您的项目添加 startingSide 属性，以保留对打开哪个菜单的知识并通知模板 SwipeMenu。未来可能会有所改变

您需要将 xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu" 添加到您的页面标签中，然后简单地使用 <gvs:SwipeMenu/> 将小部件添加到您的页面中。使用 <gv:Gridview.itemTemplate/> 指定每个单元格的模板

简单示例

在您的 JS/TS 文件中创建一个简单的对象数组。

const items = [
    { index: 0, name: 'TURQUOISE', color: '#1abc9c' },
    { index: 1, name: 'EMERALD', color: '#2ecc71' },
    { index: 2, name: 'PETER RIVER', color: '#3498db' },
    { index: 3, name: 'AMETHYST', color: '#9b59b6' },
    { index: 4, name: 'WET ASPHALT', color: '#34495e' },
    { index: 5, name: 'GREEN SEA', color: '#16a085' },
    { index: 6, name: 'NEPHRITIS', color: '#27ae60' },
    { index: 7, name: 'BELIZE HOLE', color: '#2980b9' },
    { index: 8, name: 'WISTERIA', color: '#8e44ad' },
    { index: 9, name: 'MIDNIGHT BLUE', color: '#2c3e50' }
];

<!-- test-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:gv="@nativescript-community/ui-collectionview" xmlns:gvs="@nativescript-community/ui-collectionview-swipemenu" >
    <GridLayout>
        <gv:CollectionView items="items" rowHeight="100">
            <gv:CollectionView.itemTemplate>
                <gvs:SwipeMenu startingSide="startingSide">
                    <Label text="value" verticalAlignment="center"/>
                </gvs:SwipeMenu>
            </gv:CollectionView.itemTemplate>
        </gv:CollectionView>
    </GridLayout>
</Page>

演示和开发

仓库设置

此仓库使用子模块。如果您没有使用 --recursive 进行克隆，那么您需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。 npm 不会工作。

要开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行 npm start（或 yarn start 或 pnpm start）。这将列出所有常用脚本。

构建

npm run build.all

警告：似乎 yarn build.all 不会总是工作（在 node_modules/.bin 中找不到二进制文件），这就是为什么文档明确使用 npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

演示设置有点特别，如果您想修改/添加演示，您不必直接在 demo-[ng|react|svelte|vue] 中工作。您需要在 demo-snippets/[ng|react|svelte|vue] 中工作。您可以从每个味道的 install.ts 开始，了解如何注册新演示

贡献

更新仓库

您可以非常容易地更新仓库文件

首先更新子模块

npm run update

然后提交更改，然后更新公共文件

npm run sync

然后您可以根据需要运行 yarn|pnpm，如果有的话，提交更改的文件

更新说明

npm run readme

更新文档

npm run doc

发布

发布完全由 lerna 处理（您可以添加 -- --bump major 来强制进行主要版本发布）只需运行

npm run publish

修改子模块

此仓库使用 https:// 子模块，这意味着您无法直接推送到子模块。一个简单的解决方案是修改 ~/.gitconfig 并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时创建一个问题或开始在 NativeScript 社区 Discord 中进行对话。