Enlaces

​

Enlace de Contacto

Un componente de enlace estilizado para mostrar información de contacto.

"Uso"

import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:[e-mail]"
        onClick={handleLinkClick}
      >
        [e-mail]
      </ContactLink>
    </Router>
  );
};

"Props"

”Props”	Tipo	Descripción
”className”	string	”Nombre opcional para estilización adicional”
href	string	La URL o ruta objetivo del enlace
onClick	”función”	Función de devolución de llamada que se activa cuando se hace clic en el enlace
hijos	React.ReactNode	El contenido que se mostrará dentro del enlace

​

Enlace Sin Estilo

Un componente de enlace estilizado para mostrar enlaces.

"Uso"

import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

"Props"

”Props”	Tipo	Descripción
nombreDeClase	string	Nombre opcional para estilo adicional
href	string	La URL o ruta objetivo del enlace
onClick	función	Función de devolución de llamada que se activa cuando se hace clic en el enlace
hijos	React.ReactNode	El contenido que se mostrará dentro del enlace

​

Enlace Redondeado

Un enlace de estilo redondeado con un componente Chip para enlaces.

"Uso"

import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};

"Props"

”Props”	Tipo	Descripción
href	cadena	La URL o ruta objetivo del enlace
hijos	React.ReactNode	El contenido que se mostrará dentro del enlace
onClick	”función”	Función de devolución de llamada que se activa cuando se hace clic en el enlace

​

Enlace Social

Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter).

Uso

import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};

Props

Props	Tipo	Descripción
href	string	La URL o ruta objetivo del enlace
hijos	React.ReactNode	El contenido que se mostrará dentro del enlace
tipo	string	El tipo de enlaces sociales. Las opciones incluyen: url, LinkedIn, y Twitter
onClick	función	Función de devolución de llamada que se activa cuando se hace clic en el enlace