Mode non style CSS et Kendoreact

Tirez parti du contrôle granulaire des classes d’utilité CSS du vent arrière et des avantages de développement accélérés de Kendoreact avec le mode non style.

CSS du vent arrière est devenu un outil populaire dans le développement du frontend moderne en raison de son approche de l’utilité d’abord du style. Contrairement aux méthodologies CSS traditionnelles qui s’appuient sur des classes de composants prédéfinies ou des feuilles de style externe, le vent arrière permet aux développeurs de composer des styles directement dans HTML à l’aide de classes d’utilité. Pour une introduction plus détaillée sur Tailwind CSS, ses avantages et ses cas d’utilisation du monde réel, consultez notre article précédent –Une introduction sur le vent arrière CSS: avant, inconvénients et cas d’utilisation du monde réel.

Dans cet article, nous explorerons comment progresser Kendoreact Mode non style Permet une intégration transparente avec le vent arrière CSS. Cela permet aux développeurs de personnaliser entièrement les styles de composants tout en conservant le puissant KENDOREACT FEULTATS DE L’INUS puissante.

Où le vent arrière s’intègre-t-il avec des bibliothèques de composants comme Kendoreact?

Alors que Tailwind CSS fournit un contrôle granulaire sur le style, des bibliothèques de composants d’interface utilisateur comme Kendoreact rationalisez le développement en offrant des composants prédéfinis et riches en fonctionnalités. Ces bibliothèques permettent aux développeurs d’implémenter des éléments d’interface utilisateur accessibles et interactifs hors de la boîte permettant la personnalisation. Pour voir la différence entre l’utilisation du vent arrière ou une bibliothèque de composants comme Kendoreact, illustrons rapidement ce qu’il faudrait pour créer un simple <button> élément.

Dans Tailwind CSS, nous appliquons des classes d’utilité directement à un élément de bouton HTML:

<button
  className="bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300"
>
  Click Me
</button>

Chaque classe utilisée dans l’exemple ci-dessus est un utilitaire de la bibliothèque de vent arrière. Cette approche fournit un contrôle à grains fins, donc le bouton semble précisément lorsque nous le définissons, sans les styles externes interférant.

Avec kendoreact, nous utilisons un prédéteint Bouton de réaction composant:

import { Button } from "@progress/kendo-react-buttons";

const KendoButton = () => {
  return <Button type="button">Click Me</Button>;
};

export default KendoButton;

Dans l’exemple ci-dessus, le Button Le composant de Kendoreact est livré avec des styles intégrés, des fonctionnalités d’accessibilité et des comportements prédéfinis, permettant aux développeurs d’implémenter rapidement un bouton poli et cohérent sans appliquer manuellement des cours d’utilité.

Par défaut, les composants Kendoreact ont des styles prédéfinis pour une interface utilisateur poli et cohérente. Cependant, il existe des cas où les développeurs ont besoin de plus de contrôle sur l’apparence des composants (par exemple, pour utiliser les cadres CSS basés sur les services publics comme le vent arrière CSS). C’est là que Kendoreact Mode non style entre en jeu.

Mode non style à Kendoreact

Le mode Unyled permet aux développeurs d’utiliser des composants KendoreAct tout en remplaçant le style intégré, leur donnant un contrôle total sur l’apparence du composant. En désactivant ou en modifiant les styles par défaut, nous pouvons appliquer des classes personnalisées – y compris celles du vent arrière – pour styliser les composants en fonction de nos besoins.

Pour permettre le mode non sylusité à Kendoreact, nous pouvons envelopper les composants souhaités à l’intérieur du UnstyledContext.Provider. Cela nous permet de passer un ensemble de noms de classe personnalisés et de styles qui dictent la façon dont les composants seront rendus. Par exemple, lorsque vous travaillez avec le Composant de la forme réaginous pouvons personnaliser sa structure et son apparence sans s’appuyer sur les styles Kendoreact intégrés:

import { UnstyledContext } from '@progress/kendo-react-common';
import { formPreset } from './form-preset';

<UnstyledContext.Provider value={formPreset}>
  <Form .../>
</UnstyledContext.Provider>

Dans l’exemple ci-dessus, le formPreset L’objet agit comme une configuration qui définit comment les différents éléments de forme doivent être stylisés. Il s’agit d’un ensemble structuré de noms de classe qui détermine l’apparence de la composante de forme dans divers états et configurations. Voici un exemple de la façon dont cette configuration peut être structurée:

const formPreset = {
  uForm: {
    form: {
      main: "border-0",
      size: {
        small: "mt-2",
        medium: "mt-5",
        large: "mt-[1.125rem]",
      },
    },
    field: {
      main: "flex",
    },
    
  },
  uButton: {
    wrapper: {
      main: "px-3 py-2 rounded-md shadow-sm",
      size: {
        medium: "px-2 py-1",
        large: "px-3 py-2",
      },
      themeColor: {
        primary: "bg-primary text-white hover:bg-primary-hover",
      },
    },
    
  },
  
};

export { formPreset };

Dans ce qui précède formPreset Configuration, les classes d’utilité du vent arrière sont appliquées à différents éléments du formulaire, uform et ubuttonpermettant un contrôle à grain fin sur le style des éléments de forme et de bouton.

S’appuyant sur cette fondation, voici un exemple plus complet d’un formulaire Kendoreact utilisant le vent arrière pour le style:

import React from "react";
import { Button } from "@progress/kendo-react-buttons";
import { SvgIcon, UnstyledContext } from "@progress/kendo-react-common";
import {
  Field,
  FieldWrapper,
  Form,
  FormElement,
} from "@progress/kendo-react-form";
import { InputClearValue, TextBox } from "@progress/kendo-react-inputs";
import { Label } from "@progress/kendo-react-labels";
import { xIcon } from "@progress/kendo-svg-icons";
import { formPreset } from "./form-preset";

const FormTextBox = (fieldRenderProps) => {
  const { name, label, placeholder } = fieldRenderProps;
  const [value, setValue] = React.useState("");
  const handleChange = (e) => {
    setValue(e.value);
  };
  const clearClick = () => {
    setValue("");
  };
  return (
    <div
      className="block"
      style={{
        width: "100%",
      }}
    >
      <Label>{label}</Label>
      <TextBox
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={handleChange}
        suffix={() => (
          <InputClearValue onClick={clearClick}>
            <SvgIcon icon={xIcon} />
          </InputClearValue>
        )}
      />
    </div>
  );
};

const App = (_props) => {
  return (
    <section>
      <UnstyledContext.Provider value={tailwindForm}>
        <br />
        <Form
          render={(_formRenderProps) => {
            return (
              <FormElement>
                <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2 grid-cols-1">
                  <FieldWrapper className="col-span-1">
                    <Field
                      placeholder="Glen"
                      name="firstName"
                      label="First Name"
                      component={FormTextBox}
                    />
                  </FieldWrapper>
                  <FieldWrapper className="col-span-1">
                    <Field
                      placeholder="glen_stracke@email.com"
                      name="email"
                      label="Email"
                      component={FormTextBox}
                    />
                  </FieldWrapper>
                </div>
                <div className="p-0 overflow-visible border-t mt-5 border-base">
                  <Button themeColor={"primary"} className="form-button">
                    Book a slot
                  </Button>
                </div>
              </FormElement>
            );
          }}
        />
      </UnstyledContext.Provider>
    </section>
  );
};

export default App;

Le formPreset La configuration est importée et transmise à UnstyledContext.Provider Pour appliquer des styles personnalisés. Les champs de formulaire sont appelés à l’aide de classes de vent arrière pour un espacement et une disposition cohérents, tandis que FieldWrapper Les composants offrent un alignement de forme approprié. Le bouton Soumettre est également personnalisé à l’aide des cours d’utilité de Tailwind et de Kendoreact themeColor.

Notre exemple de formulaire exploite le vent arrière pour la personnalisation tout en conservant la fonctionnalité de Kendoreact!

Conclure

L’utilisation de CSS à vent de queue avec le mode non instylé de KendoreAct offre aux développeurs un contrôle complet sur le style des composants tout en tirant parti des fonctionnalités puissantes d’une bibliothèque de composants d’interface utilisateur. Cette approche permet aux équipes de maintenir la cohérence de la conception tout en bénéficiant de la méthodologie de l’utilité de Tailwind. Cependant, il est important de considérer les compromis. L’application de styles personnalisés nécessite une configuration supplémentaire et le maintien de la cohérence dans un grand projet peut devenir difficile sans organisation minutieuse.

Le mode non style est actuellement pris en charge uniquement pour des composants Kendoreact spécifiques, y compris Réagir les animations, Boutons de réaction, plusieurs entrées de date de réaction et réagir la forme. Vous avez peut-être besoin d’approches de style alternatives si votre projet repose sur d’autres composants Kendoreact qui ne prennent pas en charge le mode non style. Pour une liste complète des composants pris en charge et plus de détails, visitez le Documentation en mode non syntylé de Kendoreact.

Et pour l’explorer par vous-même, téléchargez un essai gratuit de 30 jours!

Commencer