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.