I put a CustomButton on FullCalendar's header but i need to put an font-awesome icon.
customButtons: {
btnBloquearAgenda: {
icon: 'fa fa-lock',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'btnBloquearAgenda agendaDay,agendaWeek,month'
},
The button is showing "Undefined".
The icon value is appended to 'fc-icon-' and added as a class to the button's span element, i.e.
btnBloquearAgenda: {
icon: 'fa fa-lock',
click: function() {
alert('clicked the custom button!');
}
}
Would result in
<button type="button" class="fc-btnBloquearAgenda-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-fa fa-lock"></span>
</button>
My work around was to just add an extra "fa" to the icon value
customButtons: {
btnBloquearAgenda: {
icon: 'fa fa fa-lock',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next',
center: 'title',
right: 'btnBloquearAgenda agendaDay,agendaWeek,month'
},
Result:
<button type="button" class="fc-btnBloquearAgenda-button fc-button fc-state-default fc-corner-right">
<span class="fc-icon fc-icon-fa fa fa-lock"></span>
</button>
to put the icon on FullCalendar's header without changing the code,
try it with css,
put this one in diplay:
viewDisplay : function(view) {
$(".fc-button-month").find(".fc-button-content").addClass("icocon");
},
CSS
.icocon:before{
font-family: "FontAwesome";
content: "\f133\00a0";
color: #fff;
}
Simple, just use some jquery to replace the buttontext.
$(".fc-today-button").html('<i class="fa fa-calendar"></i>');
I used #user3776999's answer it worked in version 5. But when calendar rerendered, icons duplicated one by one. To fix duplication add this script tag before your js.
<script>
window.FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
https://github.com/fullcalendar/fullcalendar/issues/5544
Related
I want to change the background-color of the button when it's clicked.
app.component.html:
<button #LABEL *ngFor="let filtre of act" id="{{filtre.id}}" class="{{filtre.id}}"
[attr.data-label]="filtre.label"
(click)="applyFilterActivite(LABEL)"
value="{{filtre.label}}">
{{filtre.label}}
</button>
p.component.ts:
this.act = [
{
id: 'p',
label: 'P'
},
{
id: 've',
label: 'VE'
},
{
id: 'o',
label: 'O'
},
];
If by "when it's clicked" you mean, while it's being pressed, you can use the CSS selector :active.
Assuming the style will be the same for all, first give a class that is common to each of the buttons you generate:
<button #LABEL *ngFor="let filtre of act" id="{{filtre.id}}" class="myButton {{filtre.id}}"
[attr.data-label]="filtre.label"
(click)="applyFilterActivite(LABEL)"
value="{{filtre.label}}">
{{filtre.label}}
</button>
Then style it:
.myButton:active {
background-color: purple;
}
If instead you meant "give it a different style once it's clicked", then you can make the click event assign a class to the button:
(click)="applyFilterActivite(LABEL); $event.target.classList.add('myClickedButton')"
And style it:
.myClickedButton {
background-color: purple;
}
I use transtion in vue2. I added transition in css. Vue template show two box. One way use v-for and array, another way is use variable. btn2 is effective but btn1 not.
<style lang="sass">
.item
width: 120px
height: 120px
background-color: bisque
transition: margin-left 500ms
</style>
<template>
<div>
<div class="item" v-for="item in list" :key="item.index" :style="{marginLeft: item.index + 'px'}">{{ item.value }}</div>
<div class="item" :style="{marginLeft: left + 'px'}">123</div>
<button #click="addone">btn1</button>
<button #click="addtwo">btn2</button>
</div>
</template>
<script>
export default {
name: 'Heap',
data() {
return {
left: 100,
list: [
{
value: 12,
index: 10
}
]
}
},
methods: {
addone() {
this.list[0]['index']+=10
},
addtwo() {
this.left+=10
}
}
}
</script>
You are using the code :key="item.index" on your first div. Your code then updates that same index.
When a key's value changes, the component it is attached to re-renders. You are not seeing the animation occur because instead of dynamically incrementing the CSS, you are effectively just re-rendering the element with the new CSS.
The purpose of a key is to help Vue keep track of the identity of a given node in a list. It lets Vue know which nodes it can keep and patch up and which ones need to be rendered again.
You should use a static, non-changing value as a key where possible. In the following example I have added an id property to your object and used that as the key.
<style lang="sass">
.item
width: 120px
height: 120px
background-color: bisque
transition: margin-left 500ms
</style>
<template>
<div>
<div
v-for="item in list"
:key="item.id"
class="item"
:style="{marginLeft: item.index.toString() + 'px'}"
>
{{ item.value }}
</div>
<div class="item" :style="{marginLeft: left.toString() + 'px'}">123</div>
<button #click="addone">btn1</button>
<button #click="addtwo">btn2</button>
</div>
</template>
<script>
export default {
name: 'Example',
data() {
return {
left: 100,
list: [
{
id: '1',
value: 12,
index: 10,
},
],
};
},
methods: {
addone() {
this.list[0].index += 10;
},
addtwo() {
this.left += 10;
},
},
};
</script>
I would like to put favorite star icon at the upper right corner of the parent container. I created css with absolute position, but it doesn't work.
I created span field and used font-awesome (in this case fa fa-star, although it is not so important, because the same result is obtained for simple text).
Can anyone tell me how to place this star at the upper right corner of the parent container?
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 300,
style:'border:1px black solid',
layout: {
type: 'vbox',
align: 'middle'
},
defaults: {
margin: 5
},
items: [{
xtype: 'image',
height: 128,
width: 128,
src: 'https://www.disneyclips.com/images/images/roojumping2.gif'
}, {
xtype: 'component',
html: 'Hello'
},
{
html: '<span class="fa fa-star topright"></span>',
},
]
});
}
})
app.css
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 28px;
}
index.html
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
This is a simple way to do it, just put that listener on the child component:
listeners:{
afterRender: function (a){
var floatBox = document.createElement('div');
//classic doesn't have fontAwesome, use a image instead
floatBox.innerHTML = '<img class="fa fa-star topright" src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/16x16/star.png" ></img>';
a.ownerCt.el.dom.appendChild(floatBox) ;
}
}
That way, when the child component is rendered it put a float box on the parent component, you could put that listener on the main panel instead and just test for conditions to show, just remove the ownerCt part.
Classic 7.3.1 Material
I am not sure how to get the font awesome icons in the non-material themes.
Here is a fiddle using the classic toolkit.
You can drag the main container and the icon moves with the container.
You can style the button however you want and it has a tool-tip.
If you plan on allowing resize of the container then you will have to implement the resize event handler and call setPosition on the button.
Classic Toolkit fiddle
This puts a button in the top left corner of the browser.
let body = Ext.getBody();
let button = Ext.widget('button', {
text: 'Favorite',
iconCls: 'x-fa fa-star',
ui: 'round',
floating: true,
renderTo: body,
style: 'position: absolute; top: 20px; right: 20px;'
});
Fiddle floating button
I use AlertController with 2 input boxes. Due to that, I can see only half of the buttons. So how can I style it to show full buttons when there is a keypad is opened on the device?
I have tried this: But it is never applied on runtime.
1.scss
.alert-button-group {
margin-top: -25px !important;
}
.ts
myAlert(){
const alert = this.alertCtrl.create({
title: this.enterApiKeyText,
inputs: [
{
name: 'apiKey',
placeholder: this.apiKey
},
{
name: 'apiName',
placeholder: this.apiName
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
}
},
{
text: 'Save',
handler: (data) => {
}
}
}
]
});
alert.present();
}
.html
<ion-row>
<ion-col col-3 tappable (click)="myAlert()">
<button ion-fab mini>
<ion-icon name="add"></ion-icon>
</button>
</ion-col>
</ion-row>
I have found the solution.
Doc is here.
variables.scss
$alert-md-message-padding-bottom:0;
$alert-ios-message-padding-bottom:0;
I have a footer image which on click returns to the home page.
However, the image shall always be visible. So when the mobile keypad appears the image shall jump above the keypad.
Any idea how to do this?
EDITED :
Here is the directive I tired, but the image doesn't move upwards when the mobile keypad appears. The keypad hides the image:
(function () {
'use strict';
angular
.module('TestApp')
.directive('stickyText', ['$mdSticky', stickyText]);
function stickyText($mdSticky) {
return {
restrict: 'E',
template: '<span style="position: absolute; right: 0; bottom: 0;"> <img src="assets/img/icons/home.png" style="width:40px;height:40px;"> </span>',
link: function (scope, element) {
$mdSticky(scope, element);
}
}
}
})();
HTML code:
<sticky-text ui-sref="home"> </sticky-text>
I managed to move the footer above the keyboard with the following jquery:
$('form').on('focus', 'input, textarea', function() {
$("footer").addClass('aboveKeyboard');
});
$('form').on('blur', 'input, textarea', function() {
$("footer").removeClass('aboveKeyboard');
});
CSS:
.aboveKeyboard img{
top :30%;
}
HTML:
<footer ui-sref="homepg">
<img src="thumb_home.png" style="position: absolute; right: 0;bottom: 0;">
</footer>