FloatButton

Bouton d’action flottant qui reste fixe sur la page pour un accès rapide aux actions courantes.

Importation

import { FloatButton } from 'asterui'

Exemples

De base

Simple bouton d'action flottant.

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          onClick={() => alert('Button clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Avec infobulle

Bouton flottant avec infobulle au survol.

</>

+

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          tooltip="Add new item"
          type="primary"
          onClick={() => alert('Add clicked!')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Types

Types de boutons par défaut et primaire.

</>

+♥

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          type="default"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">♥</span>}
          type="primary"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Formes

Formes de boutons cercle et carré.

</>

++

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="circle"
          className="!absolute !right-20 !bottom-4"
        />
        <FloatButton
          icon={<span className="text-lg">+</span>}
          shape="square"
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Avec badge

Bouton flottant avec badge de notification.

</>

5💬

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg">
        <FloatButton
          icon={<span className="text-lg">💬</span>}
          badge={5}
          onClick={() => alert('You have 5 unread messages')}
          className="!absolute !right-4 !bottom-4"
        />
      </div>
    )
}

export default App

Groupe de boutons flottants

Groupe de boutons flottants qui s'étendent au clic.

</>

+?💬↻

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-48 bg-base-200 rounded-lg">
        <FloatButton.Group
          icon={<span className="text-lg">+</span>}
          className="!absolute !right-4 !bottom-4"
        >
          <FloatButton
            icon={<span>?</span>}
            onClick={() => alert('Help section')}
          />
          <FloatButton
            icon={<span>💬</span>}
            onClick={() => alert('Contact support')}
          />
          <FloatButton
            icon={<span>↻</span>}
            onClick={() => alert('Refreshing...')}
          />
        </FloatButton.Group>
      </div>
    )
}

export default App

Retour en haut

Bouton de défilement vers le haut qui apparaît après avoir fait défiler vers le bas.

</>

BackTop button appears after scrolling down 400px

import { FloatButton } from 'asterui'

function App() {
  return (
      <div className="relative h-32 bg-base-200 rounded-lg flex items-center justify-center text-base-content/60">
        <p>BackTop button appears after scrolling down 400px</p>
      </div>
    )
}

export default App

API

FloatButton

Propriété	Description	Type	Défaut
icon	Icône à afficher dans le bouton	React.ReactNode	-
description	Texte de description sous l’icône	React.ReactNode	-
type	Type/couleur du bouton	'default' | 'primary'	'default'
shape	Forme du bouton	'circle' | 'square'	'circle'
tooltip	Texte d’infobulle au survol	string	-
tooltipPlacement	Position de l’infobulle	'left' | 'right' | 'top' | 'bottom'	'left'
badge	Contenu du badge à afficher	number | React.ReactNode	-
href	URL du lien (rendu comme ancre)	string	-
target	Cible du lien	string	-
onClick	Gestionnaire d’événement de clic	() => void	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

FloatButton.Group

Propriété	Description	Type	Défaut
children	Composants FloatButton à regrouper	React.ReactNode	-
flower	Organiser les boutons en disposition quart de cercle (radiale)	boolean	false
shape	Forme du bouton pour les enfants	'circle' | 'square'	'circle'
icon	Icône du bouton déclencheur principal	React.ReactNode	-
mainAction	Icône du bouton d’action principal (remplace le déclencheur lorsque ouvert)	React.ReactNode	-
onMainAction	Gestionnaire de clic pour le bouton d’action principal	() => void	-
showClose	Afficher le bouton de fermeture lorsque ouvert	boolean	false
type	Type/couleur du bouton	'default' | 'primary'	'default'
position	Position à l’écran	'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'	'bottom-right'
offset	Distance du bord en pixels	number	24
data-testid	ID de test pour les tests	string	-

FloatButton.BackTop

Propriété	Description	Type	Défaut
visibilityHeight	Distance de défilement avant l’apparition du bouton (pixels)	number	400
target	Élément cible de défilement	() => HTMLElement | Window	-
onClick	Gestionnaire d’événement de clic (appelé avant le défilement)	() => void	-
icon	Icône personnalisée	React.ReactNode	-
duration	Durée de l’animation de défilement en ms	number	450
position	Position à l’écran	'bottom-right' | 'bottom-left'	'bottom-right'
offset	Distance du bord en pixels	number	24
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise l’élément <button> natif pour une prise en charge appropriée du clavier
• Prend en charge la prop href pour rendre comme ancre pour la fonctionnalité de lien
• Les infobulles fournissent un contexte pour les lecteurs d’écran lorsqu’elles sont présentes
• Les états de focus sont clairement visibles pour la navigation au clavier
• L’expansion du groupe est accessible au clavier
• Le bouton BackTop apparaît/disparaît en fonction de la position de défilement