README

简介

本模块扩展了 SilverStripe Elemental Blocks，通过预定义的样式元素类集来增强其功能。

预定义样式类

• StylingHeight - 改变块的高度
• StylingHorizontalAlign - 改变块的水平对齐方式
• StylingLimit - 改变块的限制
• StylingSize - 改变块的大小
• StylingStyle (从核心模块扩展) - 核心模块扩展类的特殊增强
• StylingTextAlign - 改变块内的文本对齐方式
• StylingVerticalAlign - 改变块垂直对齐方式
• StylingWidth - 改变块的宽度 (示例使用 Bootstrap Grid 语法)

该模块为每种样式提供基本标记，但您可以选择编辑和/或替换这些预定义样式。

需求

• SilverStripe CMS ^4.0
• SilverStripe Elemental Blocks ^4

安装

• 使用 Composer 安装模块

composer require fractas/elemental-stylings

• 按照Elemental Blocks 模块的安装说明进行操作
• 在块类上应用所需的样式类扩展 (例如，与核心模块一起提供的 ElementContent) mysite/_config/elements.yml

  DNADesign\Elemental\Models\ElementContent:
    extensions:
      - Fractas\ElementalStylings\StylingHeight
      - Fractas\ElementalStylings\StylingHorizontalAlign
      - Fractas\ElementalStylings\StylingStyle
      - Fractas\ElementalStylings\StylingTextAlign
      - Fractas\ElementalStylings\StylingVerticalAlign
      - Fractas\ElementalStylings\StylingWidth

• 根据您的偏好添加所需的样式，请参阅配置示例
• 可选地，您可以将此模块提供的基本 CSS 样式要求添加到控制器类中，如：mysite/code/PageController.php

      Requirements::css('fractas/elemental-stylings:client/dist/css/stylings.css');

• 构建和刷新您的项目 vendor/bin/sake dev/build flush=1

完整配置示例

这是一个用于在 YML 配置中使用 Stylings 类的示例配置。

mysite/_config/elements.yml

DNADesign\Elemental\Models\ElementContent:
  extensions:
    - Fractas\ElementalStylings\StylingHeight
    - Fractas\ElementalStylings\StylingHorizontalAlign
    - Fractas\ElementalStylings\StylingStyle
    - Fractas\ElementalStylings\StylingTextAlign
    - Fractas\ElementalStylings\StylingVerticalAlign
    - Fractas\ElementalStylings\StylingWidth
  styles:
    light: 'Light background color with Dark text'
    dark: 'Dark background color with White text'
  textalign:
    left: 'Left'
    right: 'Right'
    center: 'Center'
  horalign:
    left: 'Left'
    right: 'Right'
    center: 'Center'
  veralign:
    top: 'Top'
    middle: 'Middle'
    bottom: 'Bottom'
  height:
    small: 'Small'
    medium: 'Medium'
    large: 'Large'
  width:
    col-sm-6: '50%'
    col-sm-4: '33.33%'
    col-sm-12: '100%'

实现示例：'图文' 元素

• 新元素类文件：ElementContentImage.php
• 新元素模板文件：ElementContentImage.ss

屏幕截图

更新后的 GridField，显示应用样式的预览：

块的样式标签，包含特定样式的图标：

报告问题

请创建一个问题，报告您发现的任何错误或缺少的功能。

许可

请参阅许可

鸣谢

图标来自 IcoMoon - Free by IcoMoon