Skip to content

Commit f5f74af

Browse files
jissereitsmajissereitsma
committed
Extend docs
1 parent f1b7548 commit f5f74af

1 file changed

Lines changed: 63 additions & 5 deletions

File tree

‎README.md‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,76 @@
44
a faster way. No more ugly UiComponents that nobody understands. Create grids and forms quickly. And gradually add
55
features to them, without getting stuck.**
66

7-
The LokiAdminComponents are based on the [Loki Components](https://github.com/LokiExtensions/Loki_Components)
8-
module which is also used in the [LokiCheckout](https://loki-checkout.com/). However, this admin tool shows
9-
that the Loki Extension suite can be applied in many more places.
7+
The LokiAdminComponents are based on the [Loki Components](https://github.com/LokiExtensions/Loki_Components) module which is also used in the [LokiCheckout](https://loki-checkout.com/). However, this admin tool shows that the Loki Extension suite can be applied in many more places.
108

11-
*Note that this library makes use of Alpine.js in the Magento Admin Panel. However, TailwindCSS is not used: We stick to the native Magento Admin Panel classes instead.*
9+
*Note that this library makes use of Alpine.js in the Magento Admin Panel. As for CSS, we stick to the native Magento Admin Panel classes instead: Everything looks the same.*
1210

1311
## Installation
1412
```bash
1513
composer require loki/magento2-admin-components
16-
bin/magento module:enable Loki_AdminComponents Loki_Components
14+
bin/magento module:enable Loki_AdminComponents Loki_Components Loki_CssUtils Loki_Base
1715
```
1816

17+
## Getting started with a grid
18+
First create a module that generates a page in the Admin Panel (`etc/module.xml`, `registration.php`, a backend controller action class, perhaps `acl.xml` and `menu.xml`).
19+
20+
In your new XML layout file, add the following:
21+
22+
```xml
23+
<?xml version="1.0"?>
24+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
25+
<update handle="loki_admin_components_grid"/>
26+
27+
<body>
28+
<referenceContainer name="content">
29+
<block
30+
name="yireo-training.example-admin.grid"
31+
template="Loki_AdminComponents::grid.phtml">
32+
<arguments>
33+
<argument name="provider" xsi:type="string">
34+
Magento\Catalog\Api\ProductRepositoryInterface
35+
</argument>
36+
</arguments>
37+
</block>
38+
</referenceContainer>
39+
</body>
40+
</page>
41+
```
42+
43+
And you're done. After refreshing the Magento cache, you now have a product grid.
44+
45+
Refer to the [documentation](loki-extensions.com/docs/admin-components) for fine-tuning this grid.
46+
47+
## Getting started with a form
48+
Again, first create a module that generates a page in the Admin Panel (`etc/module.xml`, `registration.php`, a backend controller action class, perhaps `acl.xml` and `menu.xml`).
49+
50+
In your new XML layout file, add the following:
51+
52+
```xml
53+
<?xml version="1.0"?>
54+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
55+
<update handle="loki_admin_components_form"/>
56+
57+
<body>
58+
<referenceContainer name="content">
59+
<block
60+
name="yireo-training.example-admin.form"
61+
template="Loki_AdminComponents::form.phtml">
62+
<arguments>
63+
<argument name="provider" xsi:type="string">
64+
Magento\Catalog\Api\ProductRepositoryInterface
65+
</argument>
66+
</arguments>
67+
</block>
68+
</referenceContainer>
69+
</body>
70+
</page>
71+
```
72+
73+
And you're done. After refreshing the Magento cache, you now have a basic product form.
74+
75+
Refer to the [documentation](loki-extensions.com/docs/admin-components) for fine-tuning this form.
76+
1977
## Examples
2078
As a demo, you could opt to install the following examples:
2179

0 commit comments

Comments
 (0)