README

允许您在 SilverStripe 中创建一个 elemental 网格。功能包括

1. 在 CMS 内拖动和重新排序
2. 轻松创建自己的瓦片
3. 轻松删除和编辑瓦片

它还包含一些基本的瓦片。

安装

在命令行中运行以下命令

composer require otago/tiles

以公开模块资源

composer vendor-expose

该模块需要 elemental blocks。如果您没有此模块，则在安装时将会提示。

自定义您的瓦片

将您自己的模板放入 themes/<themename>/templates/Tiles/tilename.ss。例如，要在简单主题中创建自己的 ContentTile，请创建一个文件在 themes/simple/templates/Tiles/ContentTile.ss

<div class="tile">
	<div class="tile__$CSSName tile__size$getSize <% if $Color %>$Color<% end_if %>">
		$Content
	</div>
</div>

如果您想支持 MSIE，您可以使用 -ms-grid-row 和 -ms-grid-column CSS 值与 $Col 和 $Row 一起使用，以便正确显示网格。

构建源代码

您需要 node 6. 嘿。

npm run watch

在 Windows 上获取环境变量

npm install -g win-node-env

此模块使用时尚的现代 react 进行渲染。所以你知道它是快速且敏捷的。

使用方法

在 composer 安装后，您将有一个瓦片模块作为元素。因此，您不需要做任何事情（除非您限制了每个页面上的元素）。

如果您想在页面上直接放置 tilefield，您也可以这样做。以下示例显示了如何操作

use OP\Fields\TileField;

class MyPage extends Page {

	static $has_many = [
		'Tiles' => Models\Tile::class
	];

	function getCMSFields() {
		$fields = parent::getCMSFields();
		$fields->addFieldToTab('Root.Main', TileField::create('Tiles', 'Tiles'));
		return $fields;
	}
}

允许用户指定他们想要的列数

您可以提供一个 DataObject，其中 Cols val 将被写入。因此，您可以有 3、2 或您想要的任何列宽

use OP\Fields\TileField;

class MyTilePage extends Page {
	private static $db = [
		'Cols' => 'Int'
	];
	private static $has_many = [
		'Tiles' => Tile::class
	];
	private static $owns = [
		'Tiles'
	];
	public function getCMSFields() {
		$fields = parent::getCMSFields();
		$tilefield = TileField::create('Tiles', 
			'Tiles',
			$this->Tiles(), 
			null, 
			$this // this var requires a db object Cols to remember how many cols it is wide
		);
		
		$fields->addFieldToTab('Root.Main', $tilefield);
		return $fields;
	}
}

在字段中指定瓦片类型

您可以将 CMS 下拉列表限制为有限数量的瓦片。当您有一个只想显示特定类型瓦片的页面时，这非常有用。这是通过传递 $dataList 参数完成的

		$tile = DataObject::create(array('Name'=>'StaffHubResourceTile', 'NiceName' => StaffHubResourceTile::functionGetNiceName()));
		
		$fields->addFieldToTab('Root.Main', TileField::create('Tiles', 'Tiles', ArrayList::create(array($tile))));

升级

以下是 modulelegacy.yml 文件，用于将您的瓦片从 SS 3 转换到 4

---
Name: mymodulelegacy
---
SilverStripe\ORM\DatabaseAdmin:
  classname_value_remapping:
    GalleryTile: OP\Models\GalleryTile
    ContentTile: OP\Models\ContentTile
    LinkTile: OP\Models\LinkTile
    AnnouncementTile: OP\Models\AnnouncementTile
    PhotoTile: OP\Models\PhotoTile
    Slide: OP\Models\Slide