
Enlace de Contacto
Un componente de enlace estilizado para mostrar información de contacto.- "Uso"
- "Props"
Copiar
Preguntar a la IA
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:example@example.com"
onClick={handleLinkClick}
>
example@example.com
</ContactLink>
</Router>
);
};
| ”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"
- "Props"
Copiar
Preguntar a la IA
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” | 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"
- "Props"
Copiar
Preguntar a la IA
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” | 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
- Props
Copiar
Preguntar a la IA
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 | 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 |