Affix

Rendre un élément fixe dans la fenêtre lors du défilement. Utile pour la navigation, les barres d’outils ou les boutons d’action.

Importation

import { Affix } from 'asterui'

Exemples

Affix basique

L'élément devient fixe une fois dépassé lors du défilement.

</>

Affixed Button

import { Affix, Button } from 'asterui'

function App() {
  return (
      <Affix offsetTop={80}>
        <Button color="primary">Affixed Button</Button>
      </Affix>
    )
}

export default App

Avec callback

Recevoir une notification lorsque l'état affix change.

</>

Not Affixed

import { Affix, Button } from 'asterui'
import { useState } from 'react'

function App() {
  const [affixed, setAffixed] = useState(false)
  
  return (
      <Affix offsetTop={80} onChange={setAffixed}>
        <Button type={affixed ? 'primary' : 'neutral'}>
          {affixed ? 'Affixed!' : 'Not Affixed'}
        </Button>
      </Affix>
    )
}

export default App

Affix en bas

Fixer l'élément en bas de la fenêtre.

</>

Bottom Affixed

import { Affix, Button } from 'asterui'

function App() {
  return (
      <Affix offsetBottom={20}>
        <Button color="secondary">Bottom Affixed</Button>
      </Affix>
    )
}

export default App

Cible personnalisée

Affix dans un conteneur défilable.

</>

Sticky Header

import { Affix } from 'asterui'

function App() {
  return (
      <div id="scroll-container" className="h-64 overflow-auto">
        <Affix offsetTop={0} target={() => document.getElementById('scroll-container')!}>
          <div className="bg-primary text-primary-content p-2">
            Sticky Header
          </div>
        </Affix>
        {/* Scrollable content */}
      </div>
    )
}

export default App

API

Affix

Propriété	Description	Type	Défaut
children	Contenu à rendre fixe	React.ReactNode	-
offsetTop	Décalage depuis le haut lorsque fixe (pixels)	number	-
offsetBottom	Décalage depuis le bas lorsque fixe (pixels)	number	-
target	Élément cible de défilement	() => HTMLElement | Window	-
onChange	Callback lorsque l’état affix change	(affixed: boolean) => void	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise CSS position: sticky pour de meilleures performances
• Ne piège pas le focus clavier lorsque fixe
• Le contenu reste dans le flux du document lorsqu’il n’est pas fixe