布局 Layouts

布局是自定义显示,用于查看集合中的项目并与之交互。 这使得处理特定类型的数据模型(例如地图位置或日历事件)变得更加人性化。

什么是布局?

从电子商务平台到物联网车队以及介于两者之间的所有数据模型,数据模型的形状和目的差异很大。虽然您的 Directus 项目数据可能存储在集合中 (即 SQL 数据表),但此表表示并不总是与信息交互最人性化的方式。布局提供更人性化、更直观的显示来查看集合中的项目并与之交互。

虽然 excel 样式的数据表通常与数据在数据库中的存储方式非常相似,但这并不总是最人性化的数据查看方式。 布局提供直观的显示来查看集合中的项目并与之交互。

工作方式

要调整项目的布局,请按照下列步骤操作。

  1. 导航到内容模块并选择所需的集合。 2.在页面侧边栏,点击 “布局选项”
  2. 选择您想要使用的所需布局。
  3. 根据需要自定义布局。

自定义控件

可以在以下三个位置找到自定义控件。

  • 布局选项 - 位于侧边栏中。
  • 子标题 - 位于页面标题下方和页面区域上方。
  • 页面区域 — 网页的中心,显示所有项目。

这些控制通常分为三大类。

  • 样式和格式
    这些是对布局显示方式的附加自定义,例如每个项目的大小、图像的裁剪方式等。
  • 显示的字段值
    大多数布局允许您选择使用哪些字段值来表示集合页面上的每个项目。 例如,对于博客文章,最好有英雄形象、博客标题、日期、作者等。
  • 手动和自动排序
    某些布局可能允许按值按升序和降序对项目进行排序、项目的拖放重新定位等。

关键要点

在浏览布局时,记住以下几点可能会有所帮助。

  • 布局不会普遍适用于所有集合。
    布局是针对特定数据模型量身定制的。例如,为了正常工作,地图布局要求集合配置地图字段,日历布局要求集合配置日期时间字段。
  • 每个布局的控件都不同。
    每个布局以不同的方式呈现数据,因此某些自定义可能不适用于某些布局。例如,地图布局将每个项目显示为地图上的图钉,因此此布局没有用于排序的控件。
  • 布局的控件可能位于不同的位置。
    根据布局,相同的控件可能位于侧边栏、副标题或页面区域的“布局选项”下_(和项目本身)_。例如,表格布局允许您设置子标题中显示的字段值,而卡片布局允许您设置布局选项菜单中显示的字段值。

表格布局

此布局支持所有形式的数据,因为它直接反映了数据在集合中的存储方式。这是内容模块中使用的默认布局。它包括以下控件。

布局选项

  • Spacing - 调整一行占用的垂直空间。

副标题

  • 调整列宽 - 单击并拖动列分隔符以根据需要调整大小。
  • 添加字段 - 在页面子标题中选择 add 并选择所需的字段。
  • 删除字段 - 在列标题中选择 arrow_drop_down 并单击 “隐藏字段”
  • 按列排序项目 - 在列标题中选择 arrow_drop_down 并按升序或降序排序。
  • 设置文本对齐方式 - 在列标题中选择 arrow_drop_down 并设置左、右或居中。
  • 切换和重新排序列 - 单击列标题,然后根据需要拖放。
  • 全选 - 单击选择列标题中的 check_box_outline_blank

页面区域

  • 选择项目 - 在所需项目的选择列中单击 check_box_outline_blank
  • 手动排序项目 - 在配置的排序列中切换 sort 以拖放 drag_handle 项目。

手动排序需要配置
仅当您在集合的数据模型设置中 配置排序字段 时可用。

卡片布局

这种平铺布局非常适合优先考虑图像_(例如用户或博客文章)_的集合。这是 用户目录文件库 的默认设置。它包括以下控件。

布局选项

  • Image Source - 设置用作显示图像的字段。
  • Title — 设置显示模板以用作标题。
  • Subtitle — 设置显示模板以用作字幕。
  • Image Fit - 设置图像如何适合卡片。
  • Fallback Icon - 设置默认图标以在项目没有图像时显示。

副标题

  • Card Size - 切换显示在页面区域中的卡片尺寸。
  • Order Field — 单击以从下拉菜单中选择您希望排序的字段。
  • Order Direction — 切换升序和降序。
  • Select All — 单击选择列标题中的 check_circle 全选”

页面区域

  • 选择项目 - 在所需项目的选择列中单击 radio_button_unchecked

日历布局

此布局非常适合具有面向时间的数据 (例如事件和约会) 的集合。它包括以下控件。

布局选项

  • 显示模板 - 设置字段值和文本的组合以表示日历上的项目。
  • 开始日期字段 - 选择字段以确定每个项目在日历上的开始时间。
  • 结束日期字段 - 选择字段以确定日历上每个项目的结束时间。
  • 一周的第一天 — 在日历上定义一周的开始。

副标题

  • 切换月份和年份 - 使用副标题中的 V 形符号跨时间移动。
  • 今天 - 单击以跳转到日历上的当前日期。
  • 月周日列表 - 调整用于在页面区域中显示项目的时间间隔。

页面区域

  • 选择项目 - 单击日历上的项目以打开其项目页面。

配置要求
要使用此布局,集合将需要至少一个日期时间 Field 来设置开始时间,但理想情况下需要两个日期时间字段 (设置开始时间和结束时间)

地图布局

此布局非常适合强调地理空间数据的集合。它提供了一个世界地图,其中项目显示为点、线和其他几何图形。可以使用以下选项:

布局选项

  • Basemap - 选择用于集合的地图提供者。
  • 地理空间字段 - 选择要在屏幕上显示的地理空间字段类型:
    • Map JSON Point - 支持基于经纬度的单点位置。
    • 地图几何 - 支持几何区域,例如线条和多边形。
  • 显示模板 - 选择将鼠标悬停在地图上的项目上时显示的字段。
  • Cluster Nearby Data - 切换附近的项目是否聚集到单个引脚中。

副标题

地图布局上没有副标题。

页面区域

  • 缩放 - 点击页面区域左上角的addremove来放大和缩小。
  • 找到我的位置 — 单击 my_location 以放大您在地图上的当前位置。
  • 重新构图 - 单击左上角的方块以调整地图区域的大小和重新构图。
  • 选择项目 - 单击单个项目以进入其项目页面。
  • 选择多项 - 单击并拖动以一次选择多个项目,打开项目页面。

配置要求
要使用此布局,集合必须配置一个地图字段。

看板布局【云托管独享】

此布局非常适合用作项目管理工具或待办事项列表的集合,其中每个项目代表一个任务,因为它根据项目的状态将项目分组到列中_(例如“未开始”、“进行中”、“在审查”、“完成”或定义的任何其他状态)_。可以使用以下控件。

布局选项

  • 分组依据 - 选择用于定义项目状态的字段。详情见下文。
  • 卡片标题 - 选择字段用途作为每个看板的标题。
  • 卡片文本 - 选择一个字段以在每个项目上显示附加文本。

布局选项>高级

  • 卡片标签 - 选择要在项目上显示的标签字段。
  • 卡片日期 - 选择要在每个项目上显示的日期时间字段。
  • 卡片图像 - 选择要在每个项目上显示的图像字段。
  • Card Image Fit - 切换是否裁剪图像适合。
  • 卡用户 - 选择用户创建字段以在右下角显示他们的头像。
  • Show Ungrouped - 切换显示包含未分配状态的项目的列。

副标题
看板布局没有副标题。

页面区域

  • 创建任务和分配状态 - 单击状态列中的 add,项目页面将打开。
  • 排序面板 - 拖放项目以重新定位或更改任务状态。
  • 添加状态面板 - 单击 add_box 并添加组名(即新状态列)。
  • 编辑或删除状态栏 - 点击more_horiz,然后点击edit进行编辑或delete删除.

配置要求
要使此布局正常工作,您需要在集合上配置适当的状态 Field,然后在布局选项中的 “分组依据” 下识别此字段 菜单。