I rather like the focus animation on buttons (e.g., when tabbing through them). I'd like to apply the same animation on hover as well.
It looks like this, but pulsating:
It looks like it adds a prefix-focusVisible class when focused, and it makes some modifications to an internal <span> in the button. It looks like ButtonBase has a ripple ref that it calls pulsate() on, which I think is what activates it.
Is there a clean way I can invoke this on hover for Buttons?
One of the Button props is touchRippleRef, which exposes a pulsate() function. I wrapped the Button component, and got the pulsing-ripple-animation on hover working:
function LinkButton(props: ButtonProps) {
const touchRippleRef = useRef<TouchRippleActions>(null)
return <Button
{...props}
touchRippleRef={touchRippleRef}
onMouseEnter={() => touchRippleRef.current?.pulsate()}
onMouseLeave={() => touchRippleRef.current?.stop()}
/>
}
Works like a charm.
Related
enter image description here
For example—
in this image when i hover on the button (click) on the left side, the tooltip is going out of the red bordered container.
same thing happens for the right side button.
i want to change the tooltip position dynamically so that it stays inside the container for both the cases.
p.s - new to stackoverflow. If anything is wrong please pardon.
thanks in advance.
<Tooltip
title=“aaa”
arrow
placement=“bottom”
>
<button> click </button>
</Tooltip>
this is code for the MUI tooltip.i tried to look for props that can help me with this but failed.
You can do this by accessing the PopperProps in the Tooltip component.
The documentation for this is a little buried, but Tooltip has access to all MUI Popper component properties, which contain the popperOptions. Within the API properties definitions for the Popper component, MUI refers you to popper.js docs. These docs will then tell you how you can apply PopperProps to get different behaviors. Check out popper.js.org for further info.
const boundingElement = useRef();
[...]
<div
ref={boundingElement}
>
<Tooltip
title="Tooltip Tooltip Tooltip Tooltip Tooltip"
PopperProps={{
popperOptions: {
modifiers: [
{
name: "preventOverflow",
options: {
boundary: boundingElement.current
}
}
]
}
}}
>
<div>Tooltip Hover Div</div>
</Tooltip>
</div>
Ok, for label, we got ClickHandler, ie, when we click on the label it will do something.
But I want to do something like Right-ClickHandler for Label, ie, when user right click on the label, it will do something.
Some people say put the widget into DeckPanel & do the RightClick Hanler on it. But if we have a lot of labels, then
does each label have to be put into a deck panel?
If that is the case then the code maybe complicated, so I want to do the RightClick handler for label just like i do normal ClickHandler. How to do do?
I am heavily recommending this example (Which is bit old but the right way to deal with context menu).
lable.sinkEvents(Event.ONCONTEXTMENU);
lable.addHandler(
new ContextMenuHandler() {
#Override
public void onContextMenu(ContextMenuEvent event) {
event.preventDefault();
event.stopPropagation();
popupMenu.setPopupPosition( //custom menu here
event.getNativeEvent().getClientX(),
event.getNativeEvent().getClientY());
popupMenu.show();
}
}, ContextMenuEvent.getType())
Continue reading ....
I'm currently working with IceFaces 1.8, and have been trying to find an simple way to chain effects on UI Components. For example, I have a "Show Help" link at the top right of the page. When clicked, help text will appear below certain controls for users. I'd like this text to appear by sliding down, then highlighting.
I have a basic isRenderHelp() method on my bean that returns true or false, and use that to render effects using the fire attribute on the <ice:effect> tag, so it looks something like this:
<ice:effect effectType="slidedown" fire="#{myBean.renderHelp}">
<ice:effect effectType="slideup" fire="#{!myBean.renderHelp}">
This works causing the help section to slide in and out as the help link toggles the renderHelp flag in the bean. There is the small exception that renderHelp returns null before the link is clicked for the first time to prevent the slideup animation from firing on the first page render.
Now, I noticed looking through the showcase code for 1.8 that there is an EffectQueue class that extends Effect. This allows me to add mutliple Effects to the queue in my bean, and return the queue from a getEffect method that I can then assign to a panelGroup effect attribute. However, it does not execute the events in the queue, despite having their priorities set. I'm sure I'm not using it properly, and I'm wondering how it should be used.
Normally I'd use jQuery for this type of thing, but the UI uses many partial submits. Our page is displayed via a Liferay portlet, so on any partialSubmit the view is rerendered, undoing any modifications to the DOM by jQuery.
So is there any simple way to chain effects in IceFaces 1.8? Suggestions?
here is how I implemented the effectQueue to appear and fade the text.
private EffectQueue effectQueue;
public Effect getSaveSettingsEffect() {
return effectQueue;
}
public void fireEffect(ActionListener e) {
if(effectQueue == null) {
effectQueue = new EffectQueue("apperAndFade");
Appear appear = new Appear();
appear.setDuration(2);
effectQueue.add(appear);
Fade fade = new Fade();
fade.setDuration(3);
effectQueue.add(fade);
effectQueue.setTransitory(true);
}
effectQueue.setFired(false);
}
facelet:
<ice:commandButton value="fireEffect" action="#{bean.fireEffect}"/>
<ice:outputText value="text" style="display: none;" effect="#{bean.effectQueue}"/>
is it possible in TinyMCE to know which button was clicked? so I could place specific action on specific event of a specific button.
the buttons here are default control-buttons like bold/italic/select-font not a custom button one.
probably in the init, but I have no idea what to call. I could capture the editor's events but not the button's.
For example, let's say I want a messagebox popped-up everytime bold button is clicked. How to capture the click event of bold button? is creating custom button the only way?
No, you can define an own command and call this command (+ the defualt action) on buttonklick. I do not know if you want a generic way for all buttons. But it is easy to do it just for one or two buttons.
Example: We want to put an action on the bold button.
First we define an own command in one of our own plugins (in the "init : function(ed, url)" -section):
ed.addCommand('my_bold', this.my_bold, this); //calls the function my_bold
Then we overwrite the default action with an the command:
if (ed.controlManager.get('bold')){
ed.controlManager.get('bold').settings.cmd='my_bold_action';
};
Now, we only need to define the function my bold
my_bold: function() {
// exectution of regular command
this.editor.execCommand('Bold');
// now do whatever you like here
...
},
ed.controlManager must be called in "onInit" methode :
ed.onInit.add(function(editor) {
.......
........
if (editor.controlManager.get('bold')){
editor.controlManager.get('bold').settings.cmd='my_bold_action';
};
});
I was studying the jQuery UI Sortable widget and it said that all callback functions receive a ui object. Two of its properties are ui.helper nad ui.item. ui.helper is mentioned to be mostly a clone of ui.item, but I can't get the significance of calling it 'helper'. Also, the offset and position properties are defined in terms of the helper and not the item. What's the difference between the two ?
One of the answers mention that the helper fills the void, but the I read in the docs that the helper element is "used for dragging display". What exactly is this helper element and why is it named so?
From what I understand ui.helper is a "clone" of the ui.item. It is cloned so you can edit it with css and make it look like whatever you want it to look like while you are dragging it and it won't effect the original ui.item. So if you had a box and while it was being dragged you wanted it to turn into a blue box with curved edges but only while it was dragging you can by modifying ui.helper.
The helper is the element that fills the void (with visibility: hidden) when the item is dragged.