I'd like to customize the inputSubmit template. I would like a template like that:
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="mdi-content-send right"></i>
</button>
For the moment I do that:
'inputSubmit' => '<button type="{{type}}" class="btn waves-effect waves-light" {{attrs}}>Submit<i class="mdi-content-send right"></i>'
It's working but I'd like to customize the text directly in the view template.
How can I do that ?
Thank you in advance :)
The input function allows you to override templates on the fly:
$this->Form->input('name', ['templates' => ['inputContainer' => '...']]);
Additionally, The create function also allows to override the templates for all inputs inside that form:
$this->Form->create($entity, ['templates' => ['inputContainer' => '...']]);
In my case I've made CustomFormHelper, which extends the FormHelper and overrides the template. As in example below.
class CustomFormHelper extends FormHelper
{
public function __construct(View $View, array $config = []) {
$this->_defaultConfig['templates']['inputContainer'] = '<div class="test">{{content}}</div>';
parent::__construct($View, $config);
}
}
Related
I try to add and remove class on three buttons.
When I click, a class should be add and remove on others buttons.
I have a const:
const [genderActive, setGenderActive] = useState('');
const isGenderActive = (active) => {
setGenderActive(active);
};
the HTML:
<div aria-label="title" role="group" class="btn-group">
<button name="0" type="button" className={genderActive === 0 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(0)}>M.</button>
<button name="1" type="button" className={genderActive === 1 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(1)}>Mme.</button>
<button name="2" type="button" className={genderActive === 2 ? 'selected btn btn-primary' : 'btn btn-primary' } onClick={isGenderActive(2)}>Mx</button>
</div>
When I compile the react I have an error:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
I have find multiple post with this error but I can't solve the problem.
Do you how I can solve this one ?
Because you call isGenderActive on render. So state change and re-render. You just update to make sure isGenderActive only call when click:
onClick={() => isGenderActive(0)}
I have an array of blocked_users and now I don't want to show some buttons if a user is in Blocked_users.Here is my angualr.component.html
<div *ngIf="!(userId in event.blocked_users)">
<a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>
Here the if condition is not working.So can anyone please tell how to use the if condition if we don't want to show a button to some blocked_users.Any suggestions will be appreciated.
A computed property in the component class would do the trick I think.
#Component({
selector: 'my-app',
template:`
<button *ngIf="isUserAllowed">My Button</button>
`
})
export class AppComponent {
blockedUsers = [];
userId = 'someId';
get isUserAllowed():boolean{
return !this.blockedUsers.includes(this.userId);
}
}
It should be like:
<div *ngIf="!isBlockedUser(userId,event.blocked_users)">
<a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>
and in ts:
public isBlockedUser(currentUserId, blockedUserIds): boolean {
return blockedUserIds.find(id => id == currentUserId) != undefined;
}
You should *ngIf over an object , it should be something like,
<div *ngIf="!event.blocked_users">
<a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>
you can create a function in your component which will check if user exists in blocked_users like this
XYZ.component.html
*<div *ngIf="!isUserExists(userId)">
<a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>*
XYZ.component.ts
isUserExists(userId)() {
let result = this.blocked_users.filter(user => user.id == usersId);
if(result.length > 0) {
return true;
} else {
return false
}
}
You want to check if userId is anywhere in blocked_users.
You should have a function in your component that check if this is true or not instead of trying to do it in your template. Your template then needs to use the result of that function in the *ngIf:
Component
//Returns true if the user isn't in the blocked list, otherwise false
get isUserAllowed():boolean{
return !this.event.blocked_users.some(e=>e.id===this.userId);
}
You can also use includes instead of some here, but Stackblitz sometimes complains about includes and I like comparing just the id, so I used some
Template
<div *ngIf="isUserAllowed">
<a class="btn btn-primary" (click)="onjoin(event.id)" >JOIN</a><br>
</div>
Here's a Stackblitz to illustrate. Hope it helps :)
How to design the link in cakephp3 while using reverse routing? I have an anchor tag and that has a class but in reverse routing it already has the anchor and it is in array, so how can I design the link like background and add class?
Note: I want to design the anchor tag which name is cancel in my program
<div class="btn btn-secondary waves-effect w-md">
<?=
$this->Html->link(
'Cancel', array('controller' => 'Users', 'action' => 'dashboard')
);
?>
</div>
I have tried to add another array but it didn't work.
Html->link('Edit', array('controller' => 'Users', 'action' => 'edituser'),
array('class' =>"btn btn-custom waves-light waves-effect w-md")
);?>
I have a Helper as the following:
class IconHelper extends Helper{
public function showList(){
//render a template from ctp file
$template = loadFromTemplate('path/to/my.ctp');
}
}
I want a function to render a .ctp template and return it .
I found View Cells:
In the case that your content can is small inline template, then you can use the Helper, as following:
class IconHelper extends Helper{
public function show($icon){
$template = '<a class="btn btn-default">'.$icon.'</a>';
return $template
}
but in the case when the content is saved in a template CTP file, the best practice is to use the View Cells:
//helper class
class IconListCell extends Cell{
public function display($icon){
//script .....
$this->set(copmat('icon));
}
}
//file: src/Template/Cell/show.ctp
<a class="btn btn-default" style="font-size: 40px;width: 70px;">
<span class="'.$icon.'" id="icon-value-button" data-pack="default">/span>
</a>
I have this code:
<button type="submit" name="submit" class="btn green pull-right">
Potvrdi <i class="m-icon-swapright m-icon-white"></i>
</button>
How can I make Zend_Form_Element_Button with these attributes? (including tag, it is an icon that goes with the text "Potvrdi" as label on button)
I have done this so far:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right');
Thank you.
The quickest solution is to disable escaping for the label and include the HTML code directly in the label:
$submit = new Zend_Form_Element_Button('submit');
$submit ->setLabel('Potvrdi <i class="m-icon-swapright m-icon-white"></i>')
->setAttrib('type', 'submit')
->setAttrib('class', 'btn green pull-right')
->setAttrib('escape', false);
However, If you plan to use this type of button often in your source code, you should consider writing your own Zend_Form_Element (e.g. My_Form_Element_IconButton) that takes care of adding these tags.