Vai al contenuto principale

Panoramica

Passa l’icona principale tramite lo slot del nodo icon e l’elemento sovrapposto tramite stackedIcon. Il contenitore è largo e alto 16 px; l’elemento sovrapposto è posizionato in modo assoluto a 8 px da sinistra e 7 px dall’alto, quindi fuoriesce dall’angolo inferiore destro. Un avatar quadrato di 12 px è la dimensione prevista per il logo di un’applicazione. Entrambi i nodi sono decorativi, quindi mantieni un’etichetta visibile accanto all’icona. Lascia spazio per la fuoriuscita dell’elemento sovrapposto quando posizioni i contenuti adiacenti. L’esempio utilizza uno spazio di 12 px tra il contenitore dell’icona e la relativa etichetta.

Utilizzo

Gli attributi nativi, gli eventi, className, style e ref si applicano al div esterno. render sostituisce tale destinazione tramite la composizione di Base UI, preservando entrambi i nodi delle icone.

Props

string
CSS class applied to the container root.
ReactNode
obbligatorio
Main icon content. The caller controls its dimensions and stroke.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the div root while preserving the icon content and native props.
ReactNode
obbligatorio
Smaller content stacked on the bottom-right corner of the main icon, such as a 12px avatar.
CSSProperties
Inline styles applied to the container root.