Download the PHP package wwwision/neos-modulecomponents without Composer
On this page you can find all versions of the php package wwwision/neos-modulecomponents. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download wwwision/neos-modulecomponents
More information about wwwision/neos-modulecomponents
Files in wwwision/neos-modulecomponents
Package neos-modulecomponents
Short Description Flow package with utilities and components to create Fusion based backend modules with the common Neos look and feel
License GPL-3.0-or-later
Informations about the package neos-modulecomponents
Fusion Components for Neos Backend Modules
Neos package with utilities and components to create Fusion based backend modules with the common look and feel
Usage
- In the
composer.json
file of a Neos package (let's assume a package key ofSome.Package
), add the following dependency:
Afterwards make sure to install the new dependencies by running
- Configure a Neos Backend Module as documented via
Settings.yaml
:
[!IMPORTANT]
Make sure to specify the providedmodule.css
andmodule.js
as "additionalResources"
-
Provide a corresponding privilege target and grant it to any role that should have access to the module via
Policy.yaml
: -
Create a corresponding MVC controller and override the default View implementation:
- Create a corresponding Fusion definition
For example in <Package-root>/Resources/Private/Fusion/Root.fusion
:
[!IMPORTANT]
Don't forget to include the Fusion components viainclude: resource://Wwwision.Neos.ModuleComponents/Private/Fusion/Root.fusion
- Navigate to the new backend module
Log in as Neos administrator and navigate to the new module via the module navigation, or head straigt to /neos/administration/some-module
Localization
By setting the flag translateContent
of the NeosBE:Module
component, all strings prefixed with "LLL:" will be translated.
By default, the translation files are expected in the path Resources/Private/Translations/<locale>/Modules.xlf
See documentation for more details.
Example
Note: This will also work for flash messages:
A corresponding XLIFF file at <Package-root>/Resources/Private/Translations/en/Modules.xlf
could look like this:
[!TIP]
If the "LLL:" prefix makes it into the output, thetranslateContent
prop is probably not set on theNeosBE:Module
component If the output contains "[someString]" the corresponding translation item could not be found – check id, file paths and locale!
For more advanced localization options (different locales, quantities, different source path) the NeosBE:Translate component can be used!
Example package
See Wwwision.Neos.ExampleModule for an example Neos Module that demonstrates most of the Components provided by this package.
Typography
In contrast to the default Neos backend style, the CSS file provided with this package adds different headline font sizes and default styling for unordered and ordered lists:
Headings
List items
Components
Badge
A simple badge aka label, potentially with custom error level
Example
Button
A button that can be used as
- Link to actions of the current module
- Link to other modules
- Trigger to show a modal
- Submit button for forms
Example
FlashMessage
Renders and removes flash messages as unordered list
Note: This component is used by NeosBE:Module
and usually does not have to be added manually
Example
Icon
Renders and removes flash messages as unordered list
Note: This component is used by NeosBE:Module
and usually does not have to be added manually
Example
Modal
Modal dialog that is hidden by default and can be shown via the Button
component
Note: To display a form within a modal, use the ModalForm component
Example
ModalForm
Modal dialog containing a Form that is hidden by default and can be shown via the Button
component
Example
Module
The root component used to render the backend module content for one MVC action
Example
With the translateContent
prop set to true
, "LLL:
ModuleLink
A link pointing to a different Neos Backend Module
Example
Pagination
Page navigation usually combined with a NeosBE:Table
component
Example
RelativeTime
A DateTime value that is rendered as relative time using Intl.RelativeTimeFormat()
on the client side
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
Example
Table
This package contains a collection of components to render arbitrary tables
Example - Basic
Example - Clickable Row
Example - Collapsed Row
ToggleButton
A button that can be used to toggle visibility of other HTML elements or components
Example
[!NOTE]
This button is commonly used to expandNeosBE:Table.CollapsedRow
components, see example above
Translate
A component to translate strings using XLIFF
[!NOTE] By default, corresponding translation files are expected in
<Package-root>/Resources/Private/Translations/<locale>/<Source>.xlf
[!TIP] For simple cases "LLL:"-prefixed strings can be used instead of this component, see Localization
Example
Contribution
Contributions in the form of issues or pull requests are highly appreciated.
License
See LICENSE