Affix

Fixar um elemento na janela de visualização durante a rolagem. Útil para navegação, barras de ferramentas ou botões de ação.

Importação

import { Affix } from 'asterui'

Exemplos

Affix Básico

O elemento fica fixo quando rolado além de sua posição.

import { Affix, Button } from 'asterui'

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

export default App

Com Callback

Seja notificado quando o estado do affix muda.

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 na Parte Inferior

Fixar elemento na parte inferior da janela de visualização.

import { Affix, Button } from 'asterui'

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

export default App

Alvo Personalizado

Affix dentro de um contêiner com rolagem.

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`

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo a ser fixado	`React.ReactNode`	-
`offsetTop`	Deslocamento do topo quando fixo (pixels)	`number`	-
`offsetBottom`	Deslocamento da parte inferior quando fixo (pixels)	`number`	-
`target`	Elemento alvo da rolagem	`() => HTMLElement \| Window`	-
`onChange`	Callback quando o estado do affix muda	`(affixed: boolean) => void`	-
`className`	Classes CSS adicionais	`string`	-

Acessibilidade

Usa CSS position: sticky para melhor desempenho
Não captura o foco do teclado quando fixado
O conteúdo permanece no fluxo do documento quando não está fixado