sunshineup/silverstripe-elemental-style

元素块的动态样式。

维护者

详细信息

github.com/sunnysideup/silverstripe-elemental-style

源代码

安装: 10

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 3

类型：silverstripe-vendormodule

4.4.5 2024-07-08 00:52 UTC

Requires

BSD-3-Clause 6ff2cf72321425e1b8f3e635f4f2a53f8e4d1285

cmssilverstripe

This package is auto-updated.

Last update: 2024-09-08 01:15:13 UTC

README

简介

通过YML文件将您想要的任何样式下拉字段添加到任何元素中。

样式按位置分组。这允许您在模板中的各种位置插入CSS类，而不仅仅是容器本身。

您可能想在模板内添加额外样式的示例之一是当您需要提供更改网格中列数的能力时。

更新

  • v4.4.2 : 小更新。能够分组样式。响应式辅助函数用于为不同视口创建单个样式的多个版本。
  • v4.4.0 : 现在有了额外的字段。多选、选项集和图像选项集。
  • v4.3.0 : 包含样式的前端编辑。几乎实时结果显示您的元素应用各种样式后的样子。您还可以使用后端预览区域访问此功能。

待办事项

  • 将前端编辑器移动到iframe
  • 改进响应式辅助UI

需求

  • SilverStripe ^4.0
  • dnadesign/silverstripe-elemental ^4.0

安装

composer require jellygnite/silverstripe-elemental-style

示例配置

在您的配置中包含以下信息

  • 'Index' : 样式字段的唯一标识符
  • 'Title' : 样式字段的标签
  • 'Description' : 可选的简要描述
  • 'Location' : 在模板的不同位置使用此样式
  • 'Tab' : 要添加样式字段的标签页名称
  • 'After' : 或，要添加样式字段之后的现有字段名称
  • 'Styles' : 在样式字段中出现的样式数组 ['title' => 'css classes']
  • 'Prefix' : 输出样式的前缀
  • 'Suffix' : 输出样式的后缀
  • 'Options' : 创建不同表单字段的选项数组。滑块和多选（列表框）是可用的字段类型。
  • 'Default' : 允许在下拉字段未选择任何内容时设置默认值。注意这不必存在于允许的样式选项中，即它可以是你想要的任何东西。
  • 'Group' : 在一行上分组多个样式。使用驼峰命名法为Group命名，因为这将用作Group标题。
  • 'Responsive' : 这是一个快速创建针对响应式视口的多个样式的辅助函数。

方法1

您可以为单个元素添加额外的样式，例如

    private static $extra_styles = [
		'ElementBackgroundColor' => [
			'Title' => 'Element Background Color',
			'Description' => 'Set the background color for the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Prefix' => 'bg-',
			'Styles' => [
				'Inherit' => '',
			]
		],
		'ElementPaddingVertical' => [
			'Title' => 'Element Padding Vertical',
			'Description' => 'Adjust the padding on top and bottom sides of the block element',
			'Location' => 'element.class',
			'Prefix' => 'py-',
			'Styles' => [
				'Default' => '',
				'None' => '0',
				'X-Small' => '2',
				'Small' => '4',
				'Medium' => '6',
				'Large' => '8',
				'X-Large' => '9',
			],
			'Responsive' => [
				'Mobile' => [
				],
				'Tablet' => [
					'Prefix' => 'py-sm-', // You can override any of the original style options
				],
				'Desktop' => [
					'Prefix' => 'py-lg-',
				],
			],
		],
		'ElementPaddingTop' => [
			'Title' => 'Element Padding Top',
			'Description' => 'Adjust the padding on top side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'pt-0',
				'X-Small' => 'pt-2',
				'Small' => 'pt-4',
				'Medium' => 'pt-6',
				'Large' => 'pt-8',
				'X-Large' => 'pt-9',
			]
		],
		'ElementPaddingBottom' => [
			'Title' => 'Element Padding Bottom',
			'Description' => 'Adjust the padding on bottom side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'pb-0',
				'X-Small' => 'pb-2',
				'Small' => 'pb-4',
				'Medium' => 'pb-6',
				'Large' => 'pb-8',
				'X-Large' => 'pb-9',
			]
		],
		'ElementMarginVertical' => [
			'Title' => 'Element Margin Vertical',
			'Description' => 'Adjust the margin on top and bottom sides of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'my-0',
				'X-Small' => 'my-2',
				'Small' => 'my-4',
				'Medium' => 'my-6',
				'Large' => 'my-8',
				'X-Large' => 'my-9',
			]
		],
		'ElementMarginTop' => [
			'Title' => 'Element Margin Top',
			'Description' => 'Adjust the margin on top side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'mt-0',
				'X-Small' => 'mt-2',
				'Small' => 'mt-4',
				'Medium' => 'mt-6',
				'Large' => 'mt-8',
				'X-Large' => 'mt-9',
				'Negative Small' => 'mt-n4',
				'Negative Medium' => 'mt-n6',
			]
		],
		'ElementMarginBottom' => [
			'Title' => 'Element Margin Bottom',
			'Description' => 'Adjust the margin on bottom side of the block element',
			'Tab' => 'Container',
			'Location' => 'element.class',
			'Styles' => [
				'Default' => '',
				'None' => 'mb-0',
				'X-Small' => 'mb-2',
				'Small' => 'mb-4',
				'Medium' => 'mb-6',
				'Large' => 'mb-8',
				'X-Large' => 'mb-9',
			]
		],
	];

选项例如

		'SwatchShape' => [
			'Title' => 'Swatch Shape',
			'Description' => 'Set the border radius as a percentage from 0% (square) to 50% (circle).',
			'Tab' => 'Palette',
			'Location' => 'item.swatch.style',
			'Prefix' => 'border-radius:',
			'Suffix' => '%;',
			'Options' => [
				'Type' => 'slider',
				'Min' => '0',
				'Max' => '50',
				'Step' => '5',
				'Unit' => '%',
			],
		],
		'ImageSettings' => [
			'Title' => 'Image Settings',
			'Description' => 'Adjust the look of the image',
			'Location' => 'image.css',
			'Styles' => [
				'Round border' => 'b-circle',
				'Scale on hover' => 'hover-scale',
				'No background colour' => 'bg-none',
			]
			'Options' => [
				'Type' => 'multiselect',
			],
		],

方法2

或通过yml文件添加，例如，使样式对扩展BaseElement的元素可用

DNADesign\Elemental\Models\BaseElement:
  extra_styles:
    # Then define your styles
    MarginTop:
      'Title': 'Margin Top'
      'Description': 'Adjust the margin on the top'
      'Styles':
        'None': 'mt-0'
        'Small': 'mt-4'
    GridMobile:
      'Title': 'Grid Mobile'
      'Description': 'Set the number of columns for a grid'
      'Location': 'grid'
      'Tab': 'Layout'
      'Group': 'Grid'
      'Styles':
        'Full': 'uk-child-width-1-1'
        'Two column': 'uk-child-width-1-2'
        'Three column': 'uk-child-width-1-3'
    GridTablet:
      'Title': 'Grid Tablet'
      'Description': 'Set the number of columns for a grid'
      'Location': 'grid'
      'Tab': 'Layout'
      'Group': 'Grid'
      'Styles':
        'Full': 'uk-child-width-1-1'
        'Two column': 'uk-child-width-1-2'
        'Three column': 'uk-child-width-1-3'

方法3

使用元素上的扩展作为替代方法，创建一个名为CustomBaseElementExtension.php的文件。

<?php

use SilverStripe\ORM\DataExtension;

class CustomBaseElementExtension extends DataExtension 
{

	private static $extra_styles = [
		'Background' => [
			'Title' => 'Background',
			'Description' => '',
			'Styles' => [
				'Inherit' => '',
				'Default'=> 'bg-default',
				'Blue'=> 'bg-blue',
				'Grey'=> 'bg-grey',
			]
		],
		'PaddingTop' => [
			'Title' => 'Padding Top',
			'Description' => 'Adjust the padding on top side',
			'Styles' => [
				'Default' => '',
				'None' => 'pt-0',
				'Small' => 'pt-4',
				'Medium' => 'pt-6',
				'Large' => 'pt-8',
				'X-Large' => 'pt-9',
			]
		],
		'PaddingBottom' => [
			'Title' => 'Padding Bottom',
			'Description' => 'Adjust the padding on bottom side',
			'Styles' => [
				'Default' => '',
				'None' => 'pb-0',
				'Small' => 'pb-4',
				'Medium' => 'pb-6',
				'Large' => 'pb-8',
				'X-Large' => 'pb-9',
			]
		],
		'PaddingVertical' => [
			'Title' => 'Padding Vertical',
			'Description' => 'Adjust the padding on top and bottom sides',
			'Styles' => [
				'Default' => '',
				'None' => 'py-0',
				'Small' => 'py-4',
				'Medium' => 'py-6',
				'Large' => 'py-8',
				'X-Large' => 'py-9',
			]
		],
		'MarginTop' => [
			'Title' => 'Margin Top',
			'Description' => 'Adjust the margin on top side',
			'Styles' => [
				'Default' => '',
				'None' => 'mt-0',
				'Small' => 'mt-4',
				'Medium' => 'mt-6',
				'Large' => 'mt-8',
				'X-Large' => 'mt-9',
			]
		],
		'MarginBottom' => [
			'Title' => 'Margin Bottom',
			'Description' => 'Adjust the margin on bottom side',
			'Styles' => [
				'Default' => '',
				'None' => 'mb-0',
				'Small' => 'mb-4',
				'Medium' => 'mb-6',
				'Large' => 'mb-8',
				'X-Large' => 'mb-9',
			]
		],
	];
}

然后在您的.yml文件中

DNADesign\Elemental\Models\BaseElement:
  extensions:
    - CustomBaseElementExtension

在模板中使用样式

在模板中使用样式有几种方法。

原始$StyleVariant变量将输出所有不使用位置选项的样式。例如

<section class="element <% if $StyleVariant %> $StyleVariant<% end_if %> id="$Anchor">

$StyleByLocation方法更强大，允许您创建可在模板中使用的多个样式。

<section class="element $StyleByLocation('element.class')" id="$Anchor">

您不必限制自己只使用它来使用类名。

private static $extra_styles = [
	'MenuAnimation' => [
		'Title' => 'Menu Animation',
		'Description' => '',
		'Location' => 'offcanvas.options',
		'Tab' => 'Appearance.Navigation',
		'Prefix' => 'mode:',
		'Suffix' => ';',
		'Styles' => [
			'Slide' => '',
			'Push' => 'push',
			'Reveal' => 'reveal',
			'None' => 'none',
		]
	],
];

在模板中

<div id="offcanvas" data-uk-offcanvas="{$StyleByLocation('offcanvas.options')}" style="display:none">

前端编辑

为了查看前端编辑功能，您需要确保以下事项

  • 在草稿模式下查看页面，即 /page-url?stage=Stage
  • 将此代码添加到您的Page.ss模板的页面底部，在</body>关闭标签之前
<% include Jellygnite/ElementalStyle/EditStyleForm %>
  • 将此代码添加到您的ElementHolder.ss模板的最高级HTML标签data-jes-element="$ID"中，例如
<section class="element $StyleByLocation('element.class')" id="$Anchor" data-jes-element="$ID">
	$Element
</section>

注意

样式的最低要求如下。标题将使用样式的索引（在本例中为'MarginTop'）。

DNADesign\Elemental\Models\BaseElement:
  extra_styles:
    MarginTop:
      'Styles':
        'None': 'mt-0'
        'Small': 'mt-4'

您可以通过将索引设置为null来在每个元素的基础上禁用继承的样式，例如

Namespace\YourElement:
  extra_styles:
    MarginTop: null