README

为Elemental块添加一些样式选项。
(私人项目，不提供帮助/支持)

要求

SilverStripe CMS ^4.3
dnadesign/silverstripe-elemental ^4.0

对于此模块的SilverStripe 4.2和Elemental 3.x兼容版本，请参阅1.x版本分支。

安装

通过Composer安装模块

composer require derralf/elemental-styling

在Block类上应用所需的扩展（例如，Core模块中提供的ElementContent或应用于所有子元素的BaseElement）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扩展的模板说明，请参阅Template Notes。

模板说明

ElementEditlink

在您的控制器类，例如mysite/code/PageController.php中

Requirements::css('derralf/elemental-styling:client/dist/styles/elemental_editlink.css');
Requirements::javascript('derralf/elemental-styling:client/dist/js/elemental_editlink.js');

StyledTitle

在您的elements-templates中替换

<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/[YourTheme]/templates/DNADesign/Elemental/Layout/ElementHolder.ss 中使用自定义模板来覆盖默认的 ElementHolder.ss。

huubl / silverstripe-elemental-styling

维护者

详细信息