Skip to content

Commit be7ccfa

Browse files
committed
📝 Update README, add documentations
1 parent d27037b commit be7ccfa

File tree

3 files changed

+85
-0
lines changed

3 files changed

+85
-0
lines changed

README.md

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ The bulk of the documentation is stored in the [`docs`](docs/index.md) directory
1616
* [Prerequisites](docs/index.md#prerequisites)
1717
* [Installation](docs/index.md#installation)
1818
* [Configuration](docs/index.md#configuration)
19+
* [Theme customization](docs/theme_customization.md#theme-customization)
20+
* [Overriding CSS classes](docs/theme_customization.md#overriding-css-classes)
21+
* [Class block list](docs/theme_customization.md#class-block-list)
22+
* [Custom Form Types](docs/custom_form_types.md#custom-form-types)
23+
* [SwitchType](docs/custom_form_types.md#switchtype)
1924

2025
## Credits
2126

docs/custom_form_types.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Custom Form Types
2+
3+
This bundle provide the following custom form types:
4+
5+
## SwitchType
6+
7+
The `SwitchType` type has the same behavior as the `CheckboxType` type and allows to display a checkbox as a [toggle switch](https://flowbite.com/docs/components/forms/#toggle-switch):
8+
9+
```php
10+
namespace App\Form;
11+
12+
use TalesFromADev\FlowbiteBundle\Form\Type\SwitchType
13+
14+
class TemplateType extends AbstractType
15+
{
16+
public function buildForm(FormBuilderInterface $builder, array $options): void
17+
{
18+
$builder
19+
->add('switch', SwitchType::class)
20+
;
21+
}
22+
}
23+
```

docs/theme_customization.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# Theme customization
2+
3+
## Overriding CSS classes
4+
5+
All used CSS classes are contained in [Twig blocks](https://github.com/talesfromadev/flowbite-bundle/blob/main/templates/form/default.twig#L244)
6+
which allows to customize the theme very easily.
7+
8+
Create a new theme in your `templates` directory and make it use the bundle `default` theme:
9+
10+
```php
11+
# templates/form/layout.html.twig
12+
13+
{% use '@Flowbite/form/default.html.twig' %}
14+
```
15+
16+
Now, just override the desire block with any Tailwind CSS class you want:
17+
18+
```php
19+
# templates/form/layout.html.twig
20+
21+
{% use '@Flowbite/form/default.html.twig' %}
22+
23+
{% block class_submit -%}
24+
# use any Tailwind CSS class you want ...
25+
{%- endblock class_submit %}
26+
```
27+
28+
## Class block list
29+
30+
Here is a list of all available class block:
31+
32+
* Label
33+
* class_label
34+
* class_input_radio_label
35+
* Input
36+
* class_input_text
37+
* class_input_range
38+
* class_input_file
39+
* class_input_radio
40+
* class_input_checkbox
41+
* class_input_switch
42+
* Select
43+
* class_select
44+
* Textarea
45+
* class_textarea
46+
* Button / Submit
47+
* class_button
48+
* class_submit
49+
* Various
50+
* class_time_separator
51+
* class_addon
52+
* class_help_text
53+
* Error
54+
* class_label_error
55+
* class_input_radio_label_error
56+
* class_input_error
57+
* class_text_error

0 commit comments

Comments
 (0)