{"id":24650743,"url":"https://github.com/tangoman75/frontbundle","last_synced_at":"2026-04-15T18:04:35.069Z","repository":{"id":57064985,"uuid":"104493815","full_name":"TangoMan75/FrontBundle","owner":"TangoMan75","description":"TangoMan Front Bundle provides an easy way to add front elements to your pages. TangoMan Front Bundle makes building back-office for your app a brease.","archived":false,"fork":false,"pushed_at":"2018-04-08T21:33:33.000Z","size":232,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-25T18:16:32.733Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TangoMan75.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-22T16:07:44.000Z","updated_at":"2020-09-04T19:29:00.000Z","dependencies_parsed_at":"2022-08-24T07:50:28.789Z","dependency_job_id":null,"html_url":"https://github.com/TangoMan75/FrontBundle","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangoMan75%2FFrontBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangoMan75%2FFrontBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangoMan75%2FFrontBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TangoMan75%2FFrontBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TangoMan75","download_url":"https://codeload.github.com/TangoMan75/FrontBundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244686451,"owners_count":20493447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-25T18:16:34.627Z","updated_at":"2026-04-15T18:04:35.038Z","avatar_url":"https://github.com/TangoMan75.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"TangoMan Front Bundle\n=====================\n\n**TangoMan Front Bundle** provides an easy way to add front elements to your pages.\n**TangoMan Front Bundle** makes building back-office for your app a brease.\n\nFeatures\n========\n\n- Navigation bar\n    - Dropdown\n- Menus\n- Tabs\n- Buttons\n- Search forms\n    - Inputs\n    - Selects\n    - Options\n        - Optgroups\n    - Checkboxes\n    - Radio buttons\n    - Reset button\n    - Submit button\n\nAll elements can :\n\n- Own class\n- Own id\n\nLinks, buttons, menu items, tabs can :\n\n- Own icons\n- Own translatable labels\n- Own badges\n- Own parameters\n- Being disabled\n- Being displayed on specific pages\n- Being firewalled\n- Trigger callbacks\n- Show tooltips\n- Toggle popovers\n- Toggle modals\n- Toggle dropdowns\n- Toggle accordion\n\nAnd buttons can :\n\n- Submit form on change\n\nYou can easily create your own template as well.\n\nInstallation\n============\n\nStep 1: Download the Bundle\n---------------------------\n\nOpen a command console, enter your project directory and execute the\nfollowing command to download the latest stable version of this bundle:\n\n```bash\n$ composer require tangoman/front-bundle\n```\n\nThis command requires you to have Composer installed globally, as explained\nin the [installation chapter](https://getcomposer.org/doc/00-intro.md)\nof the Composer documentation.\n\nStep 2: Enable the Bundle\n-------------------------\n\nThen, enable the bundle by adding it to the list of registered bundles\nin the `app/AppKernel.php` file of your project:\n\n```php\n\u003c?php\n// app/AppKernel.php\n\n// ...\nclass AppKernel extends Kernel\n{\n    // ...\n\n    public function registerBundles()\n    {\n        $bundles = array(\n            // ...\n            new TangoMan\\FrontBundle\\TangoManFrontBundle(),\n            new TangoMan\\CallbackBundle\\TangoManCallbackBundle(),\n        );\n\n        // ...\n    }\n}\n```\n\nSince **TangoMan Front Bundle** requires **[TangoMan Callback Bundle](https://github.com/TangoMan75/CallbackBundle)** enable it in the `app/AppKernel.php` as well.\n\nUsage\n=====\n\nFront Assets\n------------\n\nAssets should copy automatically, if for whatever reason you need to reinstall them manually type following command :\n\n```console\n$ php bin/console assets:install TangoManFrontBundle\n```\n\nIn order for elements to display properly include the following `\u003clink\u003e` tag in your `::base.html.twig`\nWich will enable **TangoMan Front Bundle** custom css. (You can use your own css is you want to.)\n```twig\n{% block stylesheet %}\n    {{ parent() }}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset('bundles/tangomanfront/css/tangoman-front-bundle.css') }}\"\u003e\n{% endblock %}\n```\nIn order for forms to behave like expected include the following `\u003cscript\u003e` tags inside your javascript block.\n```twig\n{% block javascript %}\n    {{ parent() }}\n    \u003cscript src=\"{{ asset('bundles/tangomanfront/js/tangoman-front-bundle.js') }}\"\u003e\u003c/script\u003e\n{% endblock %}\n```\n\nNavbar component\n----------------\n\nIf you're using default navbar template,\nname your routes like the following:\n\n - 'app_login'\n - 'app_check'\n - 'app_logout'\n - 'app_user_profile'\n - 'app_user_edit'\n - 'app_admin_index'\n - 'homepage'\n\nSearch / filter form component\n------------------------------\n\n### Place use statement in the controller\n\n```php\nuse TangoMan\\FrontBundle\\Model\\Button;\nuse TangoMan\\FrontBundle\\Model\\ButtonGroup;\nuse TangoMan\\FrontBundle\\Model\\Item;\nuse TangoMan\\FrontBundle\\Model\\Menu;\nuse TangoMan\\FrontBundle\\Model\\Modal;\nuse TangoMan\\FrontBundle\\Model\\SearchForm;\nuse TangoMan\\FrontBundle\\Model\\SearchInput;\nuse TangoMan\\FrontBundle\\Model\\SearchOption;\nuse TangoMan\\FrontBundle\\Model\\Th;\nuse TangoMan\\FrontBundle\\Model\\Thead;\n```\n\n### Build object in the controller\n\n```php\n\u003c?php\n// AppBundle/Controller/DefaultController.php\nnamespace AppBundle\\Controller;\n\n// ...\n\nclass DefaultController extends Controller\n{\n    /**\n     * @Route(\"/user/index\")\n     */\n    public function indexAction()\n    {\n        // ...\n\n        $form = new SearchForm();\n\n        // Number\n        $input = new SearchInput();\n        $input-\u003esetLabel('Id')\n            -\u003esetName('e-id')\n            -\u003esetType('number');\n        $form-\u003eaddInput($input);\n\n        // Text\n        $input = new SearchInput();\n        $input-\u003esetLabel('User')\n            -\u003esetName('user-username')\n            -\u003esetType('text');\n        $form-\u003eaddInput($input);\n\n        // Select\n        $input = new SearchInput();\n        $input-\u003esetLabel('Role')\n            -\u003esetName('roles-type')\n            -\u003esetPlaceholder('All')\n            -\u003esetType('select');\n\n        $option = new SearchOption();\n        $option-\u003esetName('Administrator')\n            -\u003esetValue('ROLE_ADMIN');\n        $input-\u003eaddOption($option);\n\n        $option = new SearchOption();\n        $option-\u003esetName('User')\n            -\u003esetValue('ROLE_USER');\n        $input-\u003eaddOption($option);\n        $form-\u003eaddInput($input);\n\n        // Submit\n        $input = new SearchInput();\n        $input-\u003esetLabel('Filter')\n            -\u003esetType('submit')\n            -\u003esetIcon('glyphicon glyphicon-search');\n        $form-\u003eaddInput($input);\n\n        return $this-\u003erender(\n            'user/index.html.twig',\n            [\n                'form' =\u003e $form,\n                'users' =\u003e $users,\n            ]\n        );\n    }\n}\n```\n\n### Integrate in Twig\n\n```twig\n\u003cdiv id=\"search-form\" class=\"jumbotron\"\u003e\n    {{ searchForm(form) }}\n\u003c/div\u003e\n```\n\nOrdered list component\n----------------------\n\n```twig\n\u003ctable class=\"table table-striped\"\u003e\n    {{ thead(thead) }}\n    \u003ctbody\u003e\n    {% for user in users %}\n        \u003ctr\u003e\n            \u003ctd\u003e\n            ...\n```\n\nInputs\n------\n\n|  Attribute  |   Status  |          Default value           |\n|-------------|-----------|----------------------------------|\n| class       | optional  | form-control                     |\n| disabled    | optional  | null                             |\n| icon        | optional  | null                             |\n| id          | optional  | tango-input-{{ input.name }}     |\n| label       | optional  | null                             |\n| name        | mandatory | null                             |\n| pages       | optional  | []                               |\n| placeholder | optional  | null                             |\n| roles       | optional  | ['IS_AUTHENTICATED_ANONYMOUSLY'] |\n| submit      | optional  | false                            |\n| type        | optional  | text                             |\n| value       | auto      | app.request.get(input.name)      |\n\nSelects\n-------\n\n|  Attribute  |   Status  |          Default value           |\n|-------------|-----------|----------------------------------|\n| class       | optional  | 'form-control'                   |\n| disabled    | optional  | null                             |\n| icon        | optional  | null                             |\n| id          | optional  | tango-select-{{ input.name }}    |\n| label       | optional  | null                             |\n| name        | mandatory | null                             |\n| options     | optional  | null                             |\n| pages       | optional  | []                               |\n| placeholder | optional  | null                             |\n| roles       | optional  | ['IS_AUTHENTICATED_ANONYMOUSLY'] |\n| submit      | optional  | false                            |\n| type        | optional  | 'text'                           |\n\nButtons\n-------\n\n| Attribute  |   Status  |          Default value           |\n|------------|-----------|----------------------------------|\n| attributes | optional  | null                             |\n| badge      | optional  | null                             |\n| class      | optional  | 'btn btn-primary'                |\n| data       | optional  | null                             |\n| disabled   | optional  | null                             |\n| href       | optional  | null                             |\n| icon       | optional  | null                             |\n| id         | optional  | null                             |\n| label      | optional  | null                             |\n| pages      | optional  | []                               |\n| parameters | optional  | null                             |\n| roles      | optional  | ['IS_AUTHENTICATED_ANONYMOUSLY'] |\n| route      | mandatory | null                             |\n\nLinks\n-----\n\n| Attribute  |   Status  |          Default value           |\n|------------|-----------|----------------------------------|\n| attributes | optional  | null                             |\n| badge      | optional  | null                             |\n| class      | optional  | null                             |\n| data       | optional  | null                             |\n| disabled   | optional  | null                             |\n| href       | optional  | null                             |\n| icon       | optional  | null                             |\n| id         | optional  | null                             |\n| label      | optional  | null                             |\n| pages      | optional  | []                               |\n| parameters | optional  | null                             |\n| roles      | optional  | ['IS_AUTHENTICATED_ANONYMOUSLY'] |\n| route      | mandatory | null                             |\n\nOptions\n-------\n\n| Attribute |   Status  |          Default value           |\n|-----------|-----------|----------------------------------|\n| disabled  | optional  | null                             |\n| id        | optional  | null                             |\n| name      | mandatory | null                             |\n| pages     | optional  | []                               |\n| roles     | optional  | ['IS_AUTHENTICATED_ANONYMOUSLY'] |\n| value     | mandatory | null                             |\n\nExamples\n========\n\nInputs\n------\n\n```json\n\"inputs\": [\n    {\n        \"type\": \"text\",\n        \"icon\": \"glyphicon glyphicon-user\",\n        \"name\": \"user-username\",\n        \"label\": \"User\"\n    },\n    {\n        \"type\": \"email\",\n        \"icon\": \"glyphicon glyphicon-envelope\",\n        \"name\": \"user-email\",\n        \"label\": \"Email\"\n    }\n]\n```\n\nSelects\n-------\n\n```json\n\"inputs\": [\n    {\n        \"type\": \"select\",\n        \"name\": \"roles-type\",\n        \"label\": \"Role\",\n        \"icon\": \"glyphicon glyphicon-king\",\n        \"placeholder\": \"All roles\",\n        \"options\": [\n            {\n                \"name\": \"Super Admin\",\n                \"value\": \"ROLE_SUPER_ADMIN\"\n            },\n            {\n                \"name\": \"Admin\",\n                \"value\": \"ROLE_ADMIN\"\n            },\n            {\n                \"name\": \"Super User\",\n                \"value\": \"ROLE_SUPER_USER\"\n            },\n            {\n                \"name\": \"User\",\n                \"value\": \"ROLE_USER\"\n            }\n        ]\n    }\n]\n```\n\nOptgroups\n---------\n\n```json\n\"inputs\": [\n    {\n        \"type\": \"select\",\n        \"name\": \"foo\",\n        \"label\": \"Test\",\n        \"icon\": \"fa fa-facebook\",\n        \"placeholder\": \"Test\",\n        \"optgroups\": [\n            {\n                \"label\": \"FooGroup\",\n                \"options\": [\n                    {\n                        \"name\": \"Foo 1\",\n                        \"value\": \"foo1\"\n                    },\n                    {\n                        \"name\": \"Foo 2\",\n                        \"value\": \"foo2\"\n                    }\n                ]\n            },\n            {\n                \"label\": \"BarGroup\",\n                \"disabled\": true,\n                \"options\": [\n                    {\n                        \"name\": \"Bar 1\",\n                        \"value\": \"bar1\"\n                    },\n                    {\n                        \"name\": \"Bar 2\",\n                        \"value\": \"bar2\"\n                    }\n                ]\n            }\n        ]\n    }\n]\n```\n\nButtons\n-------\n\n```json\n\"buttons\": [\n   {\n       \"icon\": \"glyphicon glyphicon-edit\",\n       \"label\": \"Edit\",\n       \"class\": \"btn btn-warning btn-sm\",\n       \"route\": \"app_admin_user_edit\",\n       \"tooltip\": \"Edit '~user~' profile\",\n       \"parameters\": {\n           \"id\": '~user.id~'\n       },\n       \"roles\": [\"ROLE_ADMIN\",\"ROLE_SUPER_ADMIN\"]\n   },\n   {\n       \"icon\": \"glyphicon glyphicon-trash\",\n       \"label\": \"Delete\",\n       \"class\": \"btn btn-danger btn-sm\",\n       \"route\": \"app_admin_user_delete\",\n       \"parameters\": {\n           \"id\": '~user.id~'\n       },\n       \"tooltip\": \"Delete '~user~' profile\",\n       \"modal\": \".my-modal\",\n       \"roles\": [\"ROLE_ADMIN\",\"ROLE_SUPER_ADMIN\"]\n   }\n]\n```\n\nButton Groups\n-------------\n\n```json\n\"inputs\": [\n    {\n        \"type\": \"buttonGroup\",\n        \"class\": \"pull-right\",\n        \"buttons\": [\n            {\n                \"type\": \"submit\",\n                \"label\": \"Filter\",\n                \"badge\": '~users|length~',\n                \"icon\": \"glyphicon glyphicon-search\"\n            },\n            {\n                \"type\": \"reset\",\n                \"label\": \"Reset\",\n                \"icon\": \"glyphicon glyphicon-remove\",\n                \"class\": \"btn btn-warning\"\n            }\n        ]\n    }]\n```\n\n**TangoMan Front Bundle** classes\n=================================\n\n- .tango-actions\n- .tango-btn-group\n- .tango-button-badge\n- .tango-button-icon\n- .tango-form\n- .tango-form-btn\n- .tango-form-checkbox\n- .tango-form-group\n- .tango-link-badge\n- .tango-link-icon\n- .tango-thead\n- .tango-tooltip-wrapper\n\nError\n=====\n\nWhen you get to see `Twig_Error_Runtime` Symfony Exception\n\u003e Impossible to access an attribute (\"foobar\") on a null variable.\n\nIt means your json is invalid. Don't worry you probrably just missed a comma somewhere.\n\nBootstrap 3 toggles\n===================\n\n|      Title      |         Toggle         |                   Parameters                   |   Attributes  |                                             Link                                             |\n|-----------------|------------------------|------------------------------------------------|---------------|----------------------------------------------------------------------------------------------|\n| Button          | data-toggle=\"button\"   |                                                |               | [buttons-single-toggle](https://getbootstrap.com/docs/3.3/javascript#buttons-single-toggle) |\n| Buttons         | data-toggle=\"buttons\"  |                                                |               | [buttons](https://getbootstrap.com/docs/3.3/javascript#buttons)                             |\n| Collapse        | data-toggle=\"collapse\" | data-target data-parent href                   |               | [collapse](https://getbootstrap.com/docs/3.3/javascript#collapse)                           |\n| Dropdowns       | data-toggle=\"dropdown\" |                                                |               | [dropdowns](https://getbootstrap.com/docs/3.3/javascript#dropdowns)                         |\n| Modals          | data-toggle=\"modal\"    | data-target=\"...\"                              | rel=\"modal\"   | [modals](https://getbootstrap.com/docs/3.3/javascript#modals)                               |\n| Popovers        | data-toggle=\"popover\"  | data-placement data-trigger data-content title | rel=\"popover\" | [popovers](https://getbootstrap.com/docs/3.3/javascript#popovers)                           |\n| Togglable pills | data-toggle=\"pill\"     |                                                |               | [pills](https://getbootstrap.com/docs/3.3/javascript#pills)                                 |\n| Togglable tabs  | data-toggle=\"tab\"      |                                                |               | [tabs](https://getbootstrap.com/docs/3.3/javascript#tabs)                                   |\n| Tooltips        | data-toggle=\"tooltip\"  | data-original-title data-placement title       |               | [tooltips](https://getbootstrap.com/docs/3.3/javascript#tooltips)                           |\n\nNote\n====\n\nIf you find any bug please report here : [Issues](https://github.com/TangoMan75/FrontBundle/issues/new)\n\nLicense\n=======\n\nCopyright (c) 2018 Matthias Morin\n\n[![License][license-MIT]][license-url]\nDistributed under the MIT license.\n\nIf you like **TangoMan Front Bundle** please star!\nAnd follow me on GitHub: [TangoMan75](https://github.com/TangoMan75)\n... And check my other cool projects.\n\n[Matthias Morin | LinkedIn](https://www.linkedin.com/in/morinmatthias)\n\n[license-MIT]: https://img.shields.io/badge/Licence-MIT-green.svg\n[license-url]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangoman75%2Ffrontbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftangoman75%2Ffrontbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftangoman75%2Ffrontbundle/lists"}