README

此Neos包的目的是帮助您创建类似DP Architekten网站（DP Architekten）上的卡片列表。该包包含两种类型的列表：基本卡片列表和可筛选卡片列表。

安装

在app/Packages/Application下下载并解压包。
运行composer install和npm install。
对于基本卡片列表，使用Onedrop.CardLists:List和Onedrop.CardLists:Card。
对于具有筛选和列表视图的卡片列表，使用Onedrop.CardLists:FilterableList和Onedrop.CardLists:FilterableCard。

Onedrop.CardLists:List

对于基本卡片列表，您需要一个用于列表本身的NodeType和一个用于卡片的NodeType。

为卡片创建一个yaml文件

'My.Site:Card':
  superTypes:
    'Onedrop.CardLists:Card': true
  ui:
    label: i18n
  properties:
    text:
      type: string
      defaultValue: ''
      ui:
        inlineEditable: true
        aloha:
          placeholder: 'Text'

为列表创建一个yaml文件

'My.Site:List':
  superTypes:
    'Onedrop.CardLists:List': true
  ui:
    label: i18n
  childNodes:
    cards:
      type: 'Neos.Neos:ContentCollection'
      constraints:
        nodeTypes:
          '*': false
          'My.Site:Card': true

为卡片创建一个fusion文件

prototype(My.Site:Card) < prototype(Neos.Neos:Content) {
    sectionName = 'Main'

    image = Neos.NodeTypes:Image {
        @context.node = ${node}
        maximumWidth = 512
        maximumHeight = 512
    }

    id = ${node.identifier}
}

为列表创建一个fusion文件

prototype(Onedrop.IbReitberger:TeamMemberList) < prototype(Onedrop.CardLists:List) {
    listTitle = ${Translation.translate('listTitle', null, [], 'Templates/List', 'My.Site')}
}

为卡片创建一个fluid模板

<f:section name="Main">
    <div class="card--wrapper">
        <div class="card">
            <div class="card--header row">
                <div class="card--image col-sm-6">
                    {image -> f:format.raw()}
                </div>
                <div class="sliding-card--header-text col-sm-6">
                    <neos:contentElement.editable property="name" tag="h3"/>
                    <neos:contentElement.editable property="text" tag="p" />
                </div>
            </div>
        </div>
    </div>
</f:section>

为列表创建一个fluid模板

<f:section name="Main">
    <div class="card-list">
        <div class="title-bar">
            <div class="container">
                <div class="title-bar--container">
                    <div class="title-bar--left">
                        <h1>{listTitle -> f:format.raw()}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div id="grid-view" class="grid container">
            {cards -> f:format.raw()}
        </div>
    </div>
</f:section>
</html>

创建翻译文件。

该包包含基本卡片列表的示例实现（Onedrop.CardLists:ExampleList）。

Onedrop.CardLists:FilterableList

可筛选卡片列表是基本卡片列表的扩展，与基本卡片列表有以下不同：

标题栏包含下拉菜单，用于按属性筛选卡片
标题栏包含两个按钮，用于在网格视图和列表视图之间切换（而基本卡片列表只有网格视图）
每张卡片都可以分配一个类别，通过它进行筛选
每张卡片都可以分配一个组，用于在列表视图中分组元素

创建可筛选卡片列表的步骤与创建基本卡片列表的步骤类似，但有以下调整：

卡片从Onedrop.CardLists:FilterableCard继承，而不是从Onedrop.CardLists:Card继承。
列表从Onedrop.CardLists:FilterableList继承，而不是从Onedrop.CardLists:List继承。
在卡片的fusion文件中，添加行id = ${node.identifier}。

在列表的fusion文件中，创建一个名为json的Neos.Fusion:RawCollection。

json = Neos.Fusion:RawCollection {
    collection = ${q(node).children('cards').children('[instanceof Onedrop.CardLists:Card]')}
    itemName = 'listItem'
    itemRenderer = Neos.Fusion:RawArray {
        name = ${q(listItem).property('name')}
        id = ${listItem.identifier}
        group = ${q(q(listItem).property('group')).property('name')}
        category = ${q(q(listItem).property('category')).property('name')}
        property = ${q(listItem).property('property')}
        link = Neos.Neos:NodeUri {
            node = ${listItem}
        }
    }
    @process.json = ${Json.stringify(value)}
}

对于集合中的每个项目，JSON对象传递名称、id、组、类别以及任何其他应可筛选的属性。

在卡片的fluid模板中，将卡片的id设置为grid-{id -> f:format.raw()}。
在卡片的fluid模板中，通过给它们一个以list-property-开头的id来标记在列表视图中可见的属性，例如list-property-name。确保每个id的后缀与在fusion或yaml中定义的对应属性名称相同。

在列表的fluid模板中，通过选择下拉菜单和视图切换按钮扩展标题栏

<div class="title-bar--right">
    <div class="filter-list" id="filter-list">
        <div class="filter-list--select filter-icon-angle-down">
            <select id="filter-select-category">
                <option>Category</option>
                <option class="d-none">Remove filter</option>
            </select>
        </div>
        <div class="filter-list--select filter-icon-angle-down">
            <select id="filter-select-property">
                <option>Property</option>
                <option class="d-none">Remove filter</option>
            </select>
        </div>
    </div>
    <div class="btn grid-btn active" id="grid-btn"><i class="filter-icon-grid"></i></div>
    <div class="btn list-btn" id="list-btn"><i class="filter-icon-list"></i></div>
</div>

确保选择id以filter-select-开头，并且后缀与应筛选卡片的属性名称相同。
请注意，选择中定义的第一个选项是筛选器的名称，第二个选项用于删除活动筛选器，并且需要具有d-none类才能使筛选器正常工作。所有其他选择选项将动态添加。

在列表的流体模板中，添加组别和类别的配置选项。

<f:if condition="{neos:rendering.inBackend()} && {neos:rendering.inEditMode()}">
    <div class="filter-config alert alert-info">
        <h2>Categories (only visible in backend):</h2>
        <div class="filter-config--list">
            {categories -> f:format.raw()}
        </div>
        <h2>Groups (only visible in backend:</h2>
        <div class="filter-config--list">
            {groups -> f:format.raw()}
        </div>
    </div>
</f:if>

该包包含了一个可过滤卡片列表的示例实现（Onedrop.CardLists:ExampleFilterableList）。

页面列表

可以使用Onedrop.CardLists插件列出页面。您可以按照以下方式构建页面列表：

创建一个列表节点类型和一个卡片节点类型，如上所述，但将列表的超类型设置为Onedrop.CardLists:PageList或Onedrop.CardLists:FilterablePageList。
创建一个继承自Onedrop.CardLists:Page或Onedrop.CardLists:FilterablePage的页面节点类型。
在列表的融合中，将模板路径设置为resource://Onedrop.CardLists/Private/Templates/NodeTypes/PageList.html或resource://Onedrop.CardLists/Private/Templates/NodeTypes/FilterablePageList.html，或者如果您想创建自己的模板，将部分路径设置为resource://Onedrop.CardLists/Private/Templates/NodeTypes/Partials，这样您就可以在您的模板中使用我们的Flowpack.Listable:Listable模板扩展。
在列表的融合文件中，让NEOS知道列表元素应该是卡片。您可以通过在文件底部添加一段类似以下代码的代码块来实现：
```
prototype(My.Site:ListablePageShort) < prototype(My.Site:Card) {
    link = Neos.Neos:NodeUri {
        node = ${node}
    }
}
```

滑动卡片

此包还包含用于DP Architekten网站上的下拉卡片所用的JS和CSS。要使用这些，请按照以下方式调整您的卡片模板：

将card类替换为sliding-card。

在模板中，在卡片标题下方添加以下流体代码：

<f:if condition="{neos:rendering.inBackend()}">
    <f:then>
        <!-- your body -->
        <div class="sliding-card--dropdown-btn">
            <i class="filter-icon-angle-up"></i>
        </div>
    </f:then>
    <f:else>
        <!-- your body -->
        <div class="sliding-card--dropdown-btn">
            <i class="filter-icon-angle-down"></i>
        </div>
    </f:else>
</f:if>

onedrop / cardlists

维护者

详细信息

README

安装

Onedrop.CardLists:List

Onedrop.CardLists:FilterableList

页面列表

滑动卡片