IntΓ©grations

IntΓ©grer des choses avec glamorous

create-react-app

Voici un exemple d'utilisation de glamorous avec create-react-app.

next.js

This translation is out of date.
Can you help update it?

Thanks for your interest in helping to update the website translations! The link below will take you to GitHub showing all the changes that happened between the last time /pages/integrations/content/fr/next.md was updated to when the /pages/integrations/content/next.md was most recently updated. Unfortunately this includes all file changes, not just changes in /pages/integrations/content/fr/next.md. So you'll have to click the "Files changed" tab, then search for /pages/integrations/content/fr/next.md in the changes. Then you can open the editor link to update the translation. Thanks again!!

jest

Voici un exemple d'utilisation de glamorous avec jest.

✨ polished

glamorous fonctionne avec les mixins, les helpers et les raccourcis de ✨ polished :

const MyStyledParagraph = glamorous.p({
  fontSize: 20,
  color: lighten(0.5, '#000'),
})

Vous pouvez aussi utiliser l'opérateur de décomposition sur les propriétés d'un objet pour appliquer des mixins de ✨ polished plus complexes directement sur des composants glamorous :

function GlamorousLogo() {
  return (
    <glamorous.Div
      width={400}
      height={400}
      border="2px solid"
      borderColor={mix(0.5, '#fff', '#000')}
      {...borderRadius('top', '5px')}
    >
    </glamorous.Div>
  );
}
CodeSandbox

styled-system

glamorous fonctionne avec des fonctions facilitatrices provenant de styled-system.

DΓ©monstration interactive
CodeSandbox

glamorous-pseudo

Une abstraction pratique

Avec les composants intΓ©grΓ©s, si vous souhaitez utiliser des pseudo-Γ©tats, vous devez utiliser la prop css. Si vous prΓ©fΓ©rez ne pas faire cela, vous pouvez utiliser glamorous-pseudo.

Inspiration

Cela a Γ©tΓ© inspirΓ© par ce tweet de @tkh44. Merci !

CodeSandbox

glamor

Vous pouvez utiliser glamor pour définir un style CSS et utiliser l'attribut className pour l'appliquer à un composant glamorous. Ceci est très pratique pour créer des objets réutilisables pour la gestion du style ou s'amuser avec des animations et la gestion des keyframes par exemple.

const { css } = glamor

// DΓ©claration des keyframes avec glamor
const bounce = css.keyframes({
	'0%': { transform: `scale(1.1)` },
	'100%': { transform: `scale(0.9)` }
})

// CrΓ©ation d'un composant utilisant le style dΓ©fini auparavant
const AnimatedDiv = glamorous.div({
	fontSize: 50,
	width: '100%',
	textAlign: 'center',

	// Animer le div avec les keyframes
	animation: `${bounce} 0.25s infinite ease-in-out alternate`
})

render(
	<AnimatedDiv>😎</AnimatedDiv>
)
😎

recompose

glamorous crΓ©e des composants simples. Si vous souhaitez complexifier un composant, vous pouvez le faire facilement en l'encapsulant dans un autre composant:

Exemple d'inclusion d'un composant glamorous

Si cela est un peu trop abstrait pour vous alors vous pouvez utiliser recompose.

CodeSandbox

preact

There is no translation for this. Can you help translate it?

This library supports preact out of the box. Just change module name from glamorous to glamorous/preact and you're all set.

If you don't want to type glamorous/preact every time, you can use webpack's resolve.alias or babel's resolver plugin to shorten the module name to your liking.

import { render, h } from "preact"
import { H1, Span } from "glamorous/preact"

const Heart = <Span color="tomato">❀</Span>

const App = () =>
  <H1 textDecoration="underline">
    glamorous {Heart} preact
  </H1>

render(
  <App/>,
  document.body
)

Contributeurs:

patitonar's GitHub avatarpaulmolluzzo's GitHub avatarpksjce's GitHub avatarbhough's GitHub avatarkentcdodds's GitHub avatarigitscor's GitHub avatartkh44's GitHub avatarmarzelin's GitHub avatar