Apprenez à créer, positionner et personnaliser les fenêtres des fenêtres dans votre application React avec le composant popup Kendoreact.
Les popups sont des éléments d’interface utilisateur qui affichent du contenu dans une couche flottante au-dessus de l’interface d’application principale. Ils sont couramment utilisés pour les info-bulles, les menus déroulants, les menus de contexte et d’autres scénarios où vous devez afficher des informations supplémentaires sans perturber le flux de travail de l’utilisateur.
Le Composant contextuel React À partir des progrès, la bibliothèque de l’interface utilisateur de Kendoreact fournit une solution flexible pour implémenter ces éléments flottants dans les applications React.
Dans cet article, nous explorerons comment créer, positionner et personnaliser les fenêtres contextuelles à l’aide du composant contextuel Kendoreact.
Le composant contextuel de Kendoreact fait partie de Kendoreact gratuitce qui signifie que vous pouvez l’utiliser dans vos projets sans aucune licence ni exigence d’enregistrement!
Le composant contextuel React, qui fait partie de la bibliothèque d’interface utilisateur de Kendoreact, simplifie le processus de création de contenu flottant qui peut être ancré à des éléments spécifiques ou positionnés à des coordonnées absolues. Il gère la logique de positionnement, la détection des limites et les animations hors de la boîte.
Le composant contextuel de Kendoreact est distribué à travers le @ Progress / Kendo-REACT-POPUP Package NPM et peut être importé directement:
import { Popup } from '@progress/kendo-react-popup';
Voici un exemple de base de la façon dont nous pouvons utiliser le composant contextuel:
import * as React from 'react';
import { Popup } from '@progress/kendo-react-popup';
import { Button } from '@progress/kendo-react-buttons';
const App = () => {
const anchor = React.useRef(null);
const [show, setShow] = React.useState(false);
const onClick = () => {
setShow(!show);
};
return (
<div>
<Button type="button" onClick={onClick} ref={anchor}>
{show ? 'Hide' : 'Show'}
</Button>
<Popup anchor={anchor.current && anchor.current.element} show={show}>
This is Popup Content!
</Popup>
</div>
);
};
export default App;
L’exemple ci-dessus crée un bouton (avec l’aide du Composant du bouton Kendoreact) qui bascule une fenêtre contextuelle lorsqu’il est cliqué. La fenêtre contextuelle est ancrée à l’élément bouton à l’aide d’un React refet sa visibilité est contrôlée par le show variable d’état.
La visibilité du composant contextuel est contrôlée à travers le montrer soutenir. Quand show est défini sur truela popup apparaît; Quand c’est falsela popup est cachée. Cette approche déclarative facilite l’intégration des popups dans la gestion de l’État de notre application:
const [show, setShow] = React.useState(false);
const togglePopup = () => {
setShow(!show);
};
En gérant le show état, nous pouvons créer des fenêtres contextuelles qui répondent à diverses interactions utilisateur, telles que cliquer sur un bouton (comme nous l’avons vu ci-dessus), survoler un élément ou se concentrer sur un champ de saisie.
Positionnement
L’une des caractéristiques les plus utiles de la popup Kendoreact est son système de positionnement flexible. Le composant peut être positionné de deux manières principales: ancré à un élément ou placé à des coordonnées absolues. Nous avons déjà vu un exemple de la façon dont la fenêtre contextuelle peut être ancrée à un élément, donc pour les scénarios où nous devons positionner la fenêtre contextuelle à des coordonnées spécifiques, nous pouvons utiliser le compenser soutenir:
import { Offset } from '@progress/kendo-react-popup';
const offset: Offset = { left: 150, top: 50 };
<Popup offset={offset} show={true}>
Popup content at absolute position
</Popup>
Cet exemple positionne la fenêtre contextuelle de 150 pixels de la gauche et 50 pixels du haut du document.
Alignement
La composante popup traite à la fois l’ancre et la popup elle-même comme des éléments rectangulaires avec neuf points de pivot (coins, bords et centre). Nous pouvons contrôler avec précision comment ces éléments s’alignent en utilisant le anchoral et popupalign accessoires:
const anchorAlign = { horizontal: 'right', vertical: 'bottom' };
const popupAlign = { horizontal: 'left', vertical: 'top' };
<Popup
anchor={anchor.current}
anchorAlign={anchorAlign}
popupAlign={popupAlign}
show={show}
>
Precisely aligned popup!
</Popup>
Cette configuration aligne le coin supérieur à gauche de la fenêtre contextuelle dans le coin inférieur de l’ancre.
Animation
Le composant contextuel prend en charge les animations pour les transitions d’ouverture et de fermeture. Nous pouvons activer les animations et personnaliser leur durée en utilisant le animer soutenir:
<Popup
anchor={anchor.current}
show={show}
animate={{
openDuration: 1000,
closeDuration: 900
}}
>
Animated popup content!
</Popup>
L’exemple ci-dessus animera lentement l’ouverture et la fermeture de la fenêtre contextuelle par une seconde complète et proche d’une seconde, respectivement.
Style et personnalisation
Pour personnaliser l’apparence du composant contextuel, nous pouvons appliquer des classes CSS personnalisées en utilisant le popup-espèce soutenir:
<Popup
anchor={anchor.current}
show={show}
popupClass="custom-popup"
>
Styled popup content
</Popup>
Définissez ensuite nos styles personnalisés:
.custom-popup {
background-color: #f5f5f5;
border: 2px solid #0055ff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
Cet exemple aura désormais un style personnalisé appliqué à notre popup.
Tandis que Kendoreact fournit un dédié Infraction Composant, créant une infraction personnalisée à l’aide du composant popup nous donne un contrôle supplémentaire sur les propriétés de style, de comportement et d’animation. Cette approche est utile lorsque nous avons besoin d’installations à bille qui correspondent aux exigences de conception spécifiques ou se comportent différemment de la mise en œuvre standard de l’infiltration de Kendoreact.
Voici un exemple de création d’un composant Info-tools personnalisé à l’aide du composant contextuel:
import * as React from 'react';
import { Popup } from '@progress/kendo-react-popup';
import './styles.css';
const Tooltip = ({ children, content, position = 'top' }) => {
const [show, setShow] = React.useState(false);
const anchor = React.useRef(null);
const getAlignment = (position) => {
const alignments = {
top: {
anchorAlign: { horizontal: 'center', vertical: 'top' },
popupAlign: { horizontal: 'center', vertical: 'bottom' },
},
bottom: {
anchorAlign: { horizontal: 'center', vertical: 'bottom' },
popupAlign: { horizontal: 'center', vertical: 'top' },
},
left: {
anchorAlign: { horizontal: 'left', vertical: 'middle' },
popupAlign: { horizontal: 'right', vertical: 'middle' },
},
right: {
anchorAlign: { horizontal: 'right', vertical: 'middle' },
popupAlign: { horizontal: 'left', vertical: 'middle' },
},
};
return alignments[position];
};
const { anchorAlign, popupAlign } = getAlignment(position);
return (
<>
<b>
<span
ref={anchor}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
style={{ cursor: 'help' }}
>
{children}
</span>
</b>
<Popup
anchor={anchor.current}
show={show}
anchorAlign={anchorAlign}
popupAlign={popupAlign}
animate={{ openDuration: 200, closeDuration: 100 }}
popupClass="tooltip-popup"
>
<div className="tooltip-content">{content}</div>
</Popup>
</>
);
};
const App = () => {
return (
<div style={{ padding: '50px' }}>
<p>
Hover over the{' '}
<Tooltip content="This is helpful information!" position="top">
highlighted text
</Tooltip>{' '}
to see the tooltip.
</p>
<p>
You can also position tooltips{' '}
<Tooltip content="I appear on the right!" position="right">
on the right
</Tooltip>{' '}
or{' '}
<Tooltip content="I appear on the left!" position="left">
on the left
</Tooltip>
.
</p>
</div>
);
};
export default App;
Pour donner à l’info-bulle une apparence de fond noir distinctif, nous pouvons ajouter le CSS suivant:
.tooltip-popup {
background-color: #000;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
max-width: 250px;
}
.tooltip-popup::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
}
.tooltip-popup[data-position='top']::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: #000;
}
L’exemple ci-dessus montre un composant info-bulle réutilisable qui accepte content et position accessoires. L’infiltration apparaît lorsqu’il oscille sur l’élément enveloppé et prend en charge plusieurs options de positionnement.
Le getAlignment Fonction Maptes des noms de position dans les configurations d’alignement appropriées, ce qui facilite la position de positionner les info-bulles. Le style audacieux sur l’élément d’ancrage fournit un repère visuel que des informations supplémentaires sont disponibles sur le plan de survol.
Conclure
Le Composant contextuel de Kendoreact Fournit une bonne base pour créer des éléments d’interface utilisateur flottants dans les applications React. Son système de positionnement flexible, sa prise en charge d’animation et ses options de personnalisation le rendent adapté à un large éventail de cas d’utilisation, des simples infractions à des outils aux menus déroulants complexes.
N’oubliez pas que le composant contextuel fait partie des composants que vous pouvez utiliser maintenant (en production!) Gratuit. Alors continuez, essayez-le par vous-même!
Source link