Skip to content

Commit

Permalink
Minor improvements components.md
Browse files Browse the repository at this point in the history
  • Loading branch information
WebVPF authored Mar 8, 2024
1 parent ce91195 commit bd9ee80
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions plugin/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ namespace Acme\Blog\Components;

class BlogPosts extends \Cms\Classes\ComponentBase
{
public function componentDetails()
public function componentDetails(): array
{
return [
'name' => 'Blog Posts',
Expand Down Expand Up @@ -68,10 +68,10 @@ You would be able to access its `posts` method through the `blogPosts` variable.
Components must be registered by overriding the `registerComponents` method inside the [Plugin registration class](registration#registration-file). This tells the CMS about the Component and provides a **short name** for using it. An example of registering a component:

```php
public function registerComponents()
public function registerComponents(): array
{
return [
'Winter\Demo\Components\Todo' => 'demoTodo'
\Acme\Blog\Components\Todo::class => 'demoTodo'
];
}
```
Expand All @@ -83,16 +83,16 @@ This will register the Todo component class with the default alias name **demoTo
When you add a component to a page or layout you can configure it using properties. The properties are defined with the `defineProperties` method of the component class. The next example shows how to define a component property:

```php
public function defineProperties()
public function defineProperties(): array
{
return [
'maxItems' => [
'title' => 'Max items',
'description' => 'The most amount of todo items allowed',
'default' => 10,
'type' => 'string',
'validationPattern' => '^[0-9]+$',
'validationMessage' => 'The Max Items property can contain only numeric symbols'
'title' => 'Max items',
'description' => 'The most amount of todo items allowed',
'default' => 10,
'type' => 'string',
'validationPattern' => '^[0-9]+$',
'validationMessage' => 'The Max Items property can contain only numeric symbols',
]
];
}
Expand Down Expand Up @@ -146,7 +146,7 @@ A `dropdown` allows you to select a single value from a series of options. A `se
The option list for `dropdown` and `set` properties can be static or dynamic. Static options are defined with the `options` property for dropdowns and the `items` property for sets. Example:

```php
public function defineProperties()
public function defineProperties(): array
{
return [
'units' => [
Expand All @@ -173,7 +173,7 @@ public function defineProperties()
The list of options or items could be fetched dynamically from the server when the Inspector is displayed. If the `options` parameter is omitted for dropdowns or the `items` parameter is omitted for sets, the list is considered dynamic. The component class must define a method returning this list. The method should have a name in the following format: `get*Property*Options`, where **Property** is the property name, for example: `getCountryOptions`. The method returns an array of options with the option values as keys and option labels as values. Example of a dynamic dropdown list definition:

```php
public function defineProperties()
public function defineProperties(): array
{
return [
'country' => [
Expand All @@ -193,7 +193,7 @@ public function getCountryOptions()
Dynamic `dropdown` and `set` lists can depend on other properties. For example, the state list could depend on the selected country. The dependencies are declared with the `depends` parameter in the property definition. The next example defines two dynamic dropdown properties and the state list depends on the country:

```php
public function defineProperties()
public function defineProperties(): array
{
return [
'country' => [
Expand Down Expand Up @@ -233,7 +233,7 @@ public function getStateOptions()
Sometimes components need to create links to the website pages. For example, the blog post list contains links to the blog post details page. In this case the component should know the post details page file name (then it can use the [page Twig filter](/docs/v1.2/markup/filters/page)). Winter includes a helper for creating dynamic dropdown page lists. The next example defines the postPage property which displays a list of pages:

```php
public function defineProperties()
public function defineProperties(): array
{
return [
'postPage' => [
Expand Down

0 comments on commit bd9ee80

Please sign in to comment.