README

为 Elemental 块添加一些样式选项。
（私有项目，不提供帮助/支持）

需求

dnadesign/silverstripe-elemental ^4 || ^5

有关此模块的 SilverStripe 4.3 和 Elemental 4.x 兼容版本，请参阅 2.x 发布分支。

安装

通过 Composer 安装模块

composer require derralf/elemental-styling

将所需的扩展应用于块类（例如，Core 模块中提供的 ElementContent 或应用于所有子元素的基础元素）mysite/_config/elements.yml

DNADesign\Elemental\Models\BaseElement:
extensions:
    - Derralf\ElementalStyling\ElementEditlink
    - Derralf\ElementalStyling\StyledTitle
    - Derralf\ElementalStyling\StylingMarginBottom
    - Derralf\ElementalStyling\StylingMarginTop
    - Derralf\ElementalStyling\StylingCustomInlineStyles

配置示例

基本/默认配置。将其添加到您的 mysite/_config/elements.yml


---
Name: elementalstyling
---
DNADesign\Elemental\Models\BaseElement:
  #  disable in line editing
  inline_editable: false
  # use included holder template ElementHolderStyled.ss
  controller_template: 'ElementHolderStyled'
  # StyledTitle config
  title_tag_default: 'h2'
  title_tag_variants:
    '': 'default'
    h2 : 'H2'
    h3 : 'H3'
    h4 : 'H4'
  title_alignment_variants:
    text-left: 'left'
    text-center: 'centered'
    text-right: 'right'
  # StylingMarginBottom config
  margin_bottom_variants:
    mb-0: '0 (none)'
    mb-1: 'XS'
    mb-2: 'Small'
    mb-3: 'Medium'
    mb-4: 'Large'
    mb-5: 'XL'
  # StylingMarginTop config
  margin_top_variants:
    mt-0: '0 (none)'
    mt-1: 'XS'
    mt-2: 'Small'
    mt-3: 'Medium'
    mt-4: 'Large'
    mt-5: 'XL'

覆盖子元素的标题标签变体或标题对齐类

My\Namespaced\Element:
  title_tag_variants:
    '': 'default'
    h3 : 'H3'
    h4 : 'H4'
  title_alignment_variants:  
    text-center: 'centered'

My\Namespaced\OtherElement:
  title_tag_variants: null
  title_alignment_variants: null

此外，您还可以应用 StylingMarginBottom 扩展的默认样式

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    - derralf/elemental-styling:client/dist/styles/elemental_styling_margin_bottom_variants.css

（有关禁用默认样式的说明，请参阅 Elemental 文档如何禁用默认样式）

扩展

ElementEditlink
为编辑器添加后端链接（需要修改 ElementHolder 模板）
Derralf\ElementalStyling\StyledTitle
为元素标题添加样式选项（标签，对齐）- 到内容选项卡。需要对 /您的 Element-模板进行修改）（
Derralf\ElementalStyling\StylingMarginBottom
将 CSS 选择器（底部边距）添加到元素/元素持有者 - 请参阅设置选项卡。
（需要修改 ElementHolder 模板）（
Derralf\ElementalStyling\StylingCustomInlineStyles
将内联 CSS 添加到元素/元素持有者 - 请参阅“专家设置”选项卡。
（需要修改 ElementHolder 模板）（

有关包含的修改后的 ElementHOlder 模板，请参阅 HolderTemplate。
有关 StylingMarginBottom 扩展，请参阅模板说明。

模板说明

ElementEditlink

在您的控制器类（如 mysite/code/PageController.php）中

Requirements::css('derralf/elemental-styling:client/dist/styles/elemental_editlink.css');
// based on jQuery
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink.js');
// non-jQuery
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink_vanilla.js');

StyledTitle

在您的元素模板中替换

<h2>$Title</h2>（或类似）
为
<% include Derralf\\Elements\\ElementTitleStyled %>
或类似
<{$TitleTagVariant} class="element__title {$TitleAlignmentVariant}">$Title</{$TitleTagVariant}>

StylingMarginBottom

默认配置使用 Bootstrap 4 空间选择器。

可选地，您可以在控制器类（如 mysite/code/PageController.php）中使用此模块提供的基本样式。

    Requirements::css('derralf/elemental-styling:dist/styles/elemental_styling_margin_bottom_variants.css');

使用 HolderTemplate 或将 class="{$MarginBottomVariant}" 添加到您的 ElementHolder 模板。

StylingCustomInlineStyles

使用 HolderTemplate 或将 style="{$CustomInlineStyles.ATT}" 添加到您的 ElementHolder 模板。

自定义持有者模板/控制器模板

此扩展包含一个修改后的控制器模板。按如下方式激活它： controller_template: 'ElementHolderStyled'（请参阅上面的配置示例）

模板可以在以下位置找到 templates/DNADesign/Elemental/Layout/ElementHolderStyled.ss

如果您没有使用上述需要特殊模板的任何扩展，则不需要设置 controller_template。

您还可以通过在 /themes/[您的主题]/templates/DNADesign/Elemental/Layout/ElementHolder.ss 中使用自定义模板来覆盖默认的 ElementHolder.ss。

derralf / elemental-styling

维护者

详细信息