Download the PHP package tangoman/front-bundle without Composer
On this page you can find all versions of the php package tangoman/front-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package front-bundle
TangoMan Front Bundle
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.
Features
- Navigation bar
- Dropdown
- Menus
- Tabs
- Buttons
- Search forms
- Inputs
- Selects
- Options
- Optgroups
- Checkboxes
- Radio buttons
- Reset button
- Submit button
All elements can :
- Own class
- Own id
Links, buttons, menu items, tabs can :
- Own icons
- Own translatable labels
- Own badges
- Own parameters
- Being disabled
- Being displayed on specific pages
- Being firewalled
- Trigger callbacks
- Show tooltips
- Toggle popovers
- Toggle modals
- Toggle dropdowns
- Toggle accordion
And buttons can :
- Submit form on change
You can easily create your own template as well.
Installation
Step 1: Download the Bundle
Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:
This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.
Step 2: Enable the Bundle
Then, enable the bundle by adding it to the list of registered bundles
in the app/AppKernel.php file of your project:
Since TangoMan Front Bundle requires TangoMan Callback Bundle enable it in the app/AppKernel.php as well.
Usage
Front Assets
Assets should copy automatically, if for whatever reason you need to reinstall them manually type following command :
In order for elements to display properly include the following <link> tag in your ::base.html.twig
Wich will enable TangoMan Front Bundle custom css. (You can use your own css is you want to.)
In order for forms to behave like expected include the following <script> tags inside your javascript block.
Navbar component
If you're using default navbar template, name your routes like the following:
- 'app_login'
- 'app_check'
- 'app_logout'
- 'app_user_profile'
- 'app_user_edit'
- 'app_admin_index'
- 'homepage'
Search / filter form component
Place use statement in the controller
Build object in the controller
Integrate in Twig
Ordered list component
Inputs
| Attribute | Status | Default value |
|---|---|---|
| class | optional | form-control |
| disabled | optional | null |
| icon | optional | null |
| id | optional | tango-input-{{ input.name }} |
| label | optional | null |
| name | mandatory | null |
| pages | optional | [] |
| placeholder | optional | null |
| roles | optional | ['IS_AUTHENTICATED_ANONYMOUSLY'] |
| submit | optional | false |
| type | optional | text |
| value | auto | app.request.get(input.name) |
Selects
| Attribute | Status | Default value |
|---|---|---|
| class | optional | 'form-control' |
| disabled | optional | null |
| icon | optional | null |
| id | optional | tango-select-{{ input.name }} |
| label | optional | null |
| name | mandatory | null |
| options | optional | null |
| pages | optional | [] |
| placeholder | optional | null |
| roles | optional | ['IS_AUTHENTICATED_ANONYMOUSLY'] |
| submit | optional | false |
| type | optional | 'text' |
Buttons
| Attribute | Status | Default value |
|---|---|---|
| attributes | optional | null |
| badge | optional | null |
| class | optional | 'btn btn-primary' |
| data | optional | null |
| disabled | optional | null |
| href | optional | null |
| icon | optional | null |
| id | optional | null |
| label | optional | null |
| pages | optional | [] |
| parameters | optional | null |
| roles | optional | ['IS_AUTHENTICATED_ANONYMOUSLY'] |
| route | mandatory | null |
Links
| Attribute | Status | Default value |
|---|---|---|
| attributes | optional | null |
| badge | optional | null |
| class | optional | null |
| data | optional | null |
| disabled | optional | null |
| href | optional | null |
| icon | optional | null |
| id | optional | null |
| label | optional | null |
| pages | optional | [] |
| parameters | optional | null |
| roles | optional | ['IS_AUTHENTICATED_ANONYMOUSLY'] |
| route | mandatory | null |
Options
| Attribute | Status | Default value |
|---|---|---|
| disabled | optional | null |
| id | optional | null |
| name | mandatory | null |
| pages | optional | [] |
| roles | optional | ['IS_AUTHENTICATED_ANONYMOUSLY'] |
| value | mandatory | null |
Examples
Inputs
Selects
Optgroups
Buttons
Button Groups
TangoMan Front Bundle classes
- .tango-actions
- .tango-btn-group
- .tango-button-badge
- .tango-button-icon
- .tango-form
- .tango-form-btn
- .tango-form-checkbox
- .tango-form-group
- .tango-link-badge
- .tango-link-icon
- .tango-thead
- .tango-tooltip-wrapper
Error
When you get to see Twig_Error_Runtime Symfony Exception
Impossible to access an attribute ("foobar") on a null variable.
It means your json is invalid. Don't worry you probrably just missed a comma somewhere.
Bootstrap 3 toggles
| Title | Toggle | Parameters | Attributes | Link |
|---|---|---|---|---|
| Button | data-toggle="button" | buttons-single-toggle | ||
| Buttons | data-toggle="buttons" | buttons | ||
| Collapse | data-toggle="collapse" | data-target data-parent href | collapse | |
| Dropdowns | data-toggle="dropdown" | dropdowns | ||
| Modals | data-toggle="modal" | data-target="..." | rel="modal" | modals |
| Popovers | data-toggle="popover" | data-placement data-trigger data-content title | rel="popover" | popovers |
| Togglable pills | data-toggle="pill" | pills | ||
| Togglable tabs | data-toggle="tab" | tabs | ||
| Tooltips | data-toggle="tooltip" | data-original-title data-placement title | tooltips |
Note
If you find any bug please report here : Issues
License
Copyright (c) 2018 Matthias Morin
Distributed under the MIT license.
If you like TangoMan Front Bundle please star! And follow me on GitHub: TangoMan75 ... And check my other cool projects.