Kibatic UX Bundle

https://github.com/kibatic/ux-bundle
Admin
A Symfony UX bundle providing components and helpers for creating modals and managing Turbo Frames...
Tokens:997
Snippets:12
Trust Score:8.4
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Kibatic UX Bundle

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Install the Kibatic UX Bundle using Composer and Yarn. Ensure to import the TurboHelper for specific features.

```bash
composer require kibatic/ux-bundle
yarn install --force
```

```javascript
import TurboHelper from "@kibatic/ux-bundle/dist/turbo-helper";
```

--------------------------------

### Open Global Modal via Link (Twig Include)

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Alternatively, use a Twig include for a global modal link, specifying URL, text, and optional parameters like frame targeting and close behavior.

```twig
{% include '@KibaticUX/_turbo-modal-link.html.twig' with {
    'link_url': path('my_route', {'key': 'value' Р'}),
    'link_text': 'My link',
    'link_class': 'nice-link',
    'frame_target_top': false,
    'close_on_success': false,
} %}
```

--------------------------------

### Open Global Modal via Button (Twig Include)

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Use a Twig include for a global modal button, defining URL, text, icon, size, and behavior options.

```twig
{% include '@KibaticUX/_turbo-modal-btn.html.twig' with {
    'btn_url': path('app_user_edit', {'id': user.id}),
    'btn_text': 'Edit',
    'btn_icon': 'edit',
    'btn_size': 'large',
    'frame_target_top': false,
    'close_on_success': false,
} %}
```

--------------------------------

### Open Global Modal via Link (Twig)

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Use a Twig link with the 'modal' attribute to open a global modal. The href attribute should point to the route that will render the modal content.

```twig
<twig:a href="{{ path('my_route') }}" modal>My link</twig:a>
```

--------------------------------

### Open Global Modal via Button (Twig)

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Use a Twig button with the 'modal' attribute to trigger a global modal. Specify the href, size, icon, and text for the button.

```twig
<twig:btn href="{{ path('app_user_edit', {'id': 123}) }}" modal size="large" icon="edit">Edit</twig:a>
```

--------------------------------

### Open Local Modal with Stimulus (Twig Embed)

Source: https://github.com/kibatic/ux-bundle/blob/main/README.md

Embed a local modal using a Twig embed for 'common/stimulus-modal.html.twig'. This allows placing HTML content, like form fields, within a modal.

```twig
<button type="button" data-bs-toggle="modal" data-bs-target="#ma-modal">Plus de préférences</button>

{% embed 'common/stimulus-modal.html.twig' with {modal_id: 'ma-modal'} %}
    {% set modal_title %}Mes préférences{% endset %}
    {% set modal_content %}
        {{ form_row(form.sports) }}
        {{ form_row(form.films) }}
        {{ form_row(form.plats) }}
    {% endset %}
{% endembed %}
```
Tokens:
Raw