lala/list-style
composer require lala/list-style
Neos Package that adds the option to change the list-style of uls and ols.
0.3.1
- Requires
- neos/neos-ui: ^5.3 || ^7.3 || ^8.0
Lala.ListStyle
Neos Package that adds the option to change the list-style of uls and ols.
Warning
This package is WIP.
Please keep the following caveats in mind:
- This plugin does not support adding classes to the lists. Instead, it will add an attribute
list-style-type="circle"
to the list - When changing the style of a list, the complete list has to be selected in the editor, otherwise the list will be split up into multiple lists with different styles
- It is not possible to allow only a subset of the configured styles per property
- Does not work for ordered lists (yet)
Installation
composer require lala/list-style:dev-master
Usage
- Enable formatting for a property:
'Neos.Demo:Content.Text':
superTypes:
'Neos.Neos:Content': true
'Neos.NodeTypes.BaseMixins:TextMixin': true
properties:
text:
ui:
inline:
editorOptions:
formatting:
# Enable unordered lists
ul: true
# Enable custom list styles
listStyle: true
- Create a list in the editor
- Select the whole using the cursor
- Open the dropdown and change the list style
Styling
Please note that this plugin does not supply list styles on it's own.
There is a ListStyles.css
file in Resources/Public
that you can include if needed:
prototype(Neos.Neos:Page) {
head.stylesheets {
listStyles = Neos.Fusion:Component {
href = Neos.Fusion:ResourceUri {
path = 'resource://Lala.ListStyle/Public/ListStyles.css'
}
renderer = afx`
<link rel="stylesheet" href={props.href} media="all" />
`
}
}
}
Customization
The available list styles can be customized through the Settings:
Lala:
ListStyle:
styles:
ul:
default:
value: ''
title: 'Default'
circle:
value: 'neos-list-circle'
title: 'Circle'
square:
value: 'neos-list-square'
title: 'Square'
# To disable styles, set them to NULL
# square: ~
The title
is used as the button label in the backend, the value
will be the value of the list-style-type
attribute of the list.
Make sure to add styling for your custom list styles.
The same vendor provides 2 package(s).