"Lucky Wheel" Votre prochaine destination de voyage

Envie de voyager à nouveau? Ne vous inquiétez pas, nous avons ce qu'il vous faut avec notre roue porte-bonheur improvisée, alimentée par les commandes Card et Rotator pour ASP.NET AJAX.

Envie de voyager à nouveau? Je parie que vous êtes. Nous sommes tous. Ne vous inquiétez pas, nous vous avons couvert avec notre roue porte-bonheur improvisée 🎡. Et même si ce n'est pas le moment de voyager, nous attendons avec impatience les moments passionnants dans un proche avenir. Alors, faites un tour et découvrez quelle est votre destination chanceuse. Ne soyez pas timide et partagez vos résultats dans les commentaires.

La «roue porte-bonheur» présentée dans ce billet de blog est alimentée par le RadRotator et les composants RadCard, qui font partie de Telerik UI pour ASP.NET AJAX suite. Découvrez comment exploiter facilement les styles prédéfinis de notre nouveau composant Card et l'intégrer à n'importe quel contrôle de modèle grâce à la démo d'intégration révélée plus tard dans le blog.

Ce que nous allons couvrir dans ce billet de blog:

Présentation des composants de la carte

Lancée pour la première fois dans R3 2020, la RadCard est l'un de nos derniers ajouts aux 120+ composants (et encore plus à venir bientôt ) de notre suite Telerik UI riche et mature pour ASP.NET AJAX. Assurez-vous donc de passer à la dernière version avant de l'essayer vous-même! Lisez l'intégralité du blog pour vous familiariser avec lui et exploiter tout son potentiel.

L'interface utilisateur Telerik pour ASP.NET AJAX Card control est conçu pour vous aider à organiser le contenu lors de la création de catalogues, de boutiques en ligne, de tableaux de bord ou même de blogs. Il attire rapidement l'attention de l'utilisateur avec sa mise en page élégante, composée d'un titre, d'une image, du texte comme corps et peut-être d'un pied de page. Utilisez des cartes pour créer de superbes interfaces utilisateur qui permettent à vos utilisateurs d'accéder facilement aux informations qui les intéressent le plus.

Le composant lui-même est un contrôle Web très flexible héritant de la classe RadWebControl et peut contenir des éléments HTML simples ainsi que d'autres contrôles Web Forms. Vous permettant de créer la carte du côté serveur, ajoutez-y des contrôles par programme et accédez-y ultérieurement. Vous pouvez simplifier vos conceptions avec le moins de code possible, surtout si vous n'êtes pas un grand fan de CSS. Mais même si vous l'êtes, il vous fera gagner du temps de développement et vous donnera un bon démarrage.

Caractéristiques et fonctionnalités

La meilleure partie de la carte est qu'elle est extrêmement personnalisable. Bénéficiez d'un nombre illimité d'options et associez la carte à l'unique exigences de votre application. [19659003] Pour obtenir facilement l'apparence souhaitée, vous pouvez choisir parmi certains des CardComponents prédéfinis, la plupart héritant de System.Web.UI.HtmlControls.HtmlContainerControl. Les blocs de construction peuvent être personnalisés avec des sous-composants comme en-tête, titre et sous-titre, corps, pied de page, actions et plus encore. Consultez notre page de documentation pour une liste complète des propriétés disponibles et de leurs valeurs. En fonction du CardComponent utilisé, vous aurez des propriétés prédéfinies qui définiront les classes CSS nécessaires pour vous. Pour des ajustements précis, vous pouvez toujours ajouter des attributs HTML, des classes personnalisées et des styles en ligne à la fois à la carte et à ses composants.

Un autre trait fort du composant RadCard est sa capacité à s'intégrer parfaitement dans un ItemTemplate. Il vous permet non seulement de créer la structure de la carte en ajoutant ses composants de carte, mais également d'ajouter des expressions de liaison ou même d'autres contrôles. Avec l'aide de quelques classes CSS d'aide, le contenu de la carte peut être orienté verticalement ou horizontalement, et les actions peuvent être étirées, centrées, alignées au début ou à la fin, comme démontré dans la Orientation de la carte démo.

Il est si flexible que vous pouvez facilement personnaliser tout le composant pour qu'il tourne en survol avec seulement quelques styles. Imaginez ce que vous pouvez faire avec plus de styles et un tout petit peu de JavaScript. N'hésitez pas à implémenter le code ci-dessous sur votre page et profitez des acrobaties RadCard.

    
        
             Survolez-moi, je vais faire un tonneau pour vous :)
        
    

La ​​riche fonctionnalité de la carte lui permet d'être utilisée dans de nombreux scénarios d'application. Quelques exemples sont l'intégration avec d'autres contrôles tels que Repeater, ListView et DataGrid, où vous pouvez représenter les données d'une manière belle, cohérente et structurée. La démo «Lucky Wheel» présentée dans la section suivante du blog montre une intégration avec un RadRotator. La roue en forme de carrousel représente une section d'images en rotation, qui, une fois sélectionnées, affichent des informations détaillées pour la carte spécifique.

Démo d'intégration «Lucky Wheel»

Nous rêvons tous de nos prochaines vacances et avons tellement besoin de nous évader. Que vous souhaitiez des vacances à la plage ensoleillées, un safari en Afrique ou que vous ne puissiez tout simplement pas décider où aller ensuite, faites tourner la roue porte-bonheur et voyez où le vent vous emmène.

Petite présentation de ce que vous verrez dans la Démo en ligne de Lucky Wheel avec RadRotator – la page de destination est un contrôle Rotator comportant un certain nombre de destinations de voyage. Chaque destination est représentée par une carte qui se compose d'un titre, d'une image, d'une une liste des attractions touristiques ainsi que quelques boutons d'action. Sélectionnez une destination en cliquant sur une image ou faites simplement tourner la roue en cliquant sur le bouton «J'ai de la chance».

Une fois la destination sélectionnée, vous pouvez la vérifier Détails en cliquant sur l'action «Plus d'infos». Cela chargera notre exemple d'application TripXpert dans une RadWindow. Vous n'avez pas oublié notre charmant exemple d'application de planificateur de voyage n'est-ce pas? d'autre part ouvrira une autre RadWindow, cette fois avec un RadListView local qui utilise une disposition RadCard différente pour son ItemTemplate. Vous pouvez y voir les attractions que vous pouvez visiter pour la destination que vous avez sélectionnée.

Récapitulation

Dans cet article, nous avons couvert les bases du composant Card, sa fonctionnalité et son intégration avec d'autres commandes comme RadRotator. Que vous envisagiez de développer une application de voyage ou que vous souhaitiez simplement vous amuser, n'hésitez pas à essayer la «Lucky wheel» et à partager vos impressions dans la section commentaires ci-dessous.