Icono de pila

Resumen

Pase el icono principal mediante la ranura de nodo icon y el elemento apilado mediante stackedIcon. El contenedor mide 16 px de ancho y alto; el elemento apilado se coloca de forma absoluta a 8 px de la izquierda y 7 px de la parte superior, por lo que sobresale de la esquina inferior derecha. Un avatar cuadrado de 12 px es el tamaño previsto para un logotipo de aplicación. Ambos nodos son decorativos, así que mantenga una etiqueta visible junto al icono. Deja espacio para el desbordamiento del elemento apilado al colocar contenido adyacente. El ejemplo utiliza un espacio de 12 px entre el contenedor del icono y su etiqueta.

Uso

import { StackIcon } from 'twenty-ui/components/data-display';
import { IconBuildingSkyscraper } from 'twenty-ui/icon';
import { Avatar } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const CompanyFieldLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <StackIcon
      icon={<IconBuildingSkyscraper size={16} />}
      stackedIcon={
        <Avatar size="xs" shape="square" variant="outline" name="Stripe" />
      }
    />
    <Text>Companies</Text>
  </Text>
);

Los atributos nativos, los eventos, className, style y ref se aplican al div externo. render reemplaza ese objetivo mediante la composición de Base UI y conserva ambos nodos de icono.

”Props”

string

CSS class applied to the container root.

ReactNode

requerido

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

requerido

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.

Desarrolladores

Aplicaciones

API

Autoalojamiento

Contribuir

Biblioteca de IU

Resumen

Uso

”Props”

​Resumen

​Uso

​”Props”

Resumen

Uso

”Props”