Pages

Getting started
# Installation ## Download the bundle Start by requiring the bundle in Composer: $ composer require harmony-project/ui-bundle "~1.1" Composer will install the bundle into your `vendor` directory and add the dependency to your `composer.json` file. ## Enable the bundle (Symfony 3 only) Enable the bundle by registering it in your `AppKernel` class: <?php // app/AppKernel.php public function registerBundles() { $bundles = [ // ... new \Harmony\Bundle\UiBundle\HarmonyUiBundle(), // ... ]; }
Semantic UI form rendering
Forms created with the Symfony Form component and Twig templates can be customized to render as Semantic UI forms using [the form theme][form-theme] included in this bundle. For more information on using form themes, take a look at the [Symfony Forms documentation][form-theming]. # Render a single form To render a single form with the Semantic UI form theme, include the `form_theme` tag inside your template: {% extends 'base.html.twig' %} {% form_theme form '@HarmonyUi/form/semantic_2_layout.html.twig' %} {% block content %} {# ... render the form #} {{ form(form) }} {% endblock %} # Render all forms To render all forms in your application with the Semantic UI form theme, add the following configuration for the Twig component to your Symfony application: # app/config/config.yml (Symfony 3) # config/packages/twig.yaml (Symfony 4) twig: form_themes: - '@HarmonyUi/form/semantic_2_layout.html.twig' [form-theming]: https://symfony.com/doc/current/form/form_customization.html#form-theming [form-theme]: https://github.com/harmony-project/ui-bundle/blob/master/Resources/views/form/semantic_2_layout.html.twig
Semantic UI menu rendering
Menus created with KnpMenuBundle and Twig templates can be customized to render as Semantic UI menus using [the menu template][menu-template] included in this bundle. For more information on KnpMenuBundle, take a loot at [the official documentation][knp-menu-bundle]. # Render a single menu To render a single menu with the Semantic UI menu template, add the `template` parameter in the `knp_menu_render` call: {{ knp_menu_render('AppBundle:Builder:mainMenu', {'template': '@HarmonyUi/menu/semantic_2_menu.html.twig'}) }} # Render all menus To render all menus in your application with the Semantic UI menu template, add the following configuration for KnpMenuBundle to your Symfony application: # app/config/config.yml (Symfony 3) knp_menu: twig: template: '@HarmonyUi/menu/semantic_2_menu.html.twig' # Add CSS classes to the menu When using this bundle's menu template, CSS classes can simply be added to the menu using the built-in features of KnpMenuBundle, the `ui` and `menu` classes will automatically be wrapped around your classes. // Example code # Render menu items only Because the purpose of the KnpMenu component is to create only hierarchical menus, this bundle includes a way to render a menu without it's enclosing HTML-tag by using the `bare` option. This allows for greater customization when creating a menu. <div class="ui menu"> {{ knp_menu_render('AppBundle:Builder:primaryMenu', {'template': '@HarmonyUi/menu/semantic_2_menu.html.twig', 'bare': true}) }} <div class="right menu"> {{ knp_menu_render('AppBundle:Builder:secondaryMenu', {'template': '@HarmonyUi/menu/semantic_2_menu.html.twig', 'bare': true}) }} </div> </div> [knp-menu-bundle]: https://github.com/KnpLabs/KnpMenuBundle [menu-template]: https://github.com/harmony-project/ui-bundle/blob/master/Resources/views/menu/semantic_2_menu.html.twig