mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
feat(docs): link done
This commit is contained in:
Junior Garcia
parent
fa404913bd
commit
69d9e2bcdc
@ -22,7 +22,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
|
||||
<Tabs
|
||||
aria-label="Language selector"
|
||||
classNames={{
|
||||
base: "absolute right-3 bottom-10",
|
||||
base: "absolute right-3 bottom-4",
|
||||
cursor: "bg-zinc-400 dark:bg-zinc-700",
|
||||
tabList:
|
||||
"bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
|
||||
@ -32,7 +32,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
|
||||
size="xs"
|
||||
onSelectionChange={handleToggle}
|
||||
>
|
||||
<Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#93adcb]" />} />
|
||||
<Tab key="vite-react-ts" title={<TypescriptIcon className="text-lg text-[#3b69ff]" />} />
|
||||
<Tab key="vite-react" title={<JavascriptIcon className="text-lg text-[#dbbe82]" />} />
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -18,7 +18,7 @@ const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...pr
|
||||
);
|
||||
};`;
|
||||
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
import {CameraIcon} from './CameraIcon';
|
||||
|
||||
export default function App() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const App = `import { Avatar } from "@nextui-org/react";
|
||||
const App = `import {Avatar} from "@nextui-org/react
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
|
||||
@ -3,7 +3,7 @@ const App = `import { Link } from "@nextui-org/react";
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
<Link isExternal href="https://github.com/nextui-org/nextui">
|
||||
<Link isExternal aria-visible={true} href="https://github.com/nextui-org/nextui">
|
||||
External Link
|
||||
</Link>
|
||||
<Link
|
||||
|
||||
@ -8,6 +8,7 @@ import customAnchorIcon from "./custom-anchor-icon";
|
||||
import block from "./block";
|
||||
import nextjs from "./nextjs";
|
||||
import customImpl from "./custom-impl";
|
||||
import polymorphic from "./polymorphic";
|
||||
|
||||
export const linkContent = {
|
||||
usage,
|
||||
@ -20,4 +21,5 @@ export const linkContent = {
|
||||
block,
|
||||
nextjs,
|
||||
customImpl,
|
||||
polymorphic,
|
||||
};
|
||||
|
||||
23
apps/docs/content/components/link/polymorphic.ts
Normal file
23
apps/docs/content/components/link/polymorphic.ts
Normal file
@ -0,0 +1,23 @@
|
||||
const App = `import { Link, Button } from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Button
|
||||
href="https://github.com/nextui-org/nextui"
|
||||
as={Link}
|
||||
color="primary"
|
||||
showAnchorIcon
|
||||
variant="solid"
|
||||
>
|
||||
Button Link
|
||||
</Button>
|
||||
);
|
||||
}`;
|
||||
|
||||
const react = {
|
||||
"/App.jsx": App,
|
||||
};
|
||||
|
||||
export default {
|
||||
...react,
|
||||
};
|
||||
@ -10,7 +10,7 @@ Links allow users to click their way from page to page. This component is styled
|
||||
|
||||
<ComponentLinks component="link" reactAriaHook="useLink" />
|
||||
|
||||
-----
|
||||
---
|
||||
|
||||
## Import
|
||||
|
||||
@ -57,6 +57,11 @@ If you pass the `isBlock` prop, the link will be rendered as a block element wit
|
||||
|
||||
<CodeDemo title="Block Link" files={linkContent.block} />
|
||||
|
||||
### Polymorphic Component
|
||||
|
||||
NextUI components expose a `as` prop that allows you to customize the React element type that is used to render the component.
|
||||
|
||||
<CodeDemo title="Polymorphic Component" files={linkContent.polymorphic} />
|
||||
|
||||
### Usage with Next.js
|
||||
|
||||
@ -73,15 +78,14 @@ In case you need to customize the link even further, you can use the `useLink` h
|
||||
|
||||
<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
|
||||
|
||||
|
||||
## Data Attributes
|
||||
|
||||
`Link` has the following attributes on the `root` element:
|
||||
|
||||
- **data-focus**:
|
||||
When the checkbox is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
|
||||
When the link is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
|
||||
- **data-focus-visible**:
|
||||
When the checkbox is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
|
||||
When the link is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html)
|
||||
|
||||
## Accessibility
|
||||
|
||||
@ -89,3 +93,33 @@ In case you need to customize the link even further, you can use the `useLink` h
|
||||
- Support for navigation links via `<a>` elements or custom element types via ARIA.
|
||||
- Support for disabled links.
|
||||
- Keyboard users may activate links using the <kbd>Enter</kbd> key.
|
||||
|
||||
## API
|
||||
|
||||
### Link Props
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ---------------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------------- | --------- |
|
||||
| href | `string` | The URL to link to. | - |
|
||||
| size | `xs` \| `sm` \| `md` \| `lg` \| `xl` | The size of the link. | `md` |
|
||||
| color | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the link. | `primary` |
|
||||
| underline | `none` \| `hover` \| `always` \| `active` \| `focus` | The underline of the link. | `none` |
|
||||
| isExternal | `boolean` | Whether the link should open in a new tab. | `false` |
|
||||
| showAnchorIcon | `boolean` | Whether to show the anchor icon. | `false` |
|
||||
| anchorIcon | `ReactNode` | The anchor icon. | - |
|
||||
| isBlock | `boolean` | Whether the link should be rendered as block with a hover effect. | `false` |
|
||||
| isDisabled | `boolean` | Whether the link is disabled. | `false` |
|
||||
| disableAnimation | `boolean` | Whether to disable link and block animations. | `false` |
|
||||
|
||||
### Link Events
|
||||
|
||||
| Attribute | Type | Description | Default |
|
||||
| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| onPress | `(e: PressEvent) => void` | Handler called when the press is released over the target. | - |
|
||||
| onPressStart | `(e: PressEvent) => void` | Handler called when a press interaction starts. | - |
|
||||
| onPressEnd | `(e: PressEvent) => void` | Handler called when a press interaction ends, either over the target or when the pointer leaves the target. | - |
|
||||
| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes. | - |
|
||||
| onPressUp | `(e: PressEvent) => void` | Handler called when a press is released over the target, regardless of whether it started on the target or not. | - |
|
||||
| onKeyDown | `(e: KeyboardEvent) => void` | Handler called when a key is pressed. | - |
|
||||
| onKeyUp | `(e: KeyboardEvent) => void` | Handler called when a key is released. | - |
|
||||
| onClick | `MouseEventHandler` | The native link click event handler (**Deprecated**) use **onPress** instead. | - |
|
||||
|
||||
@ -53,7 +53,10 @@ export function useLink(originalProps: UseLinkProps) {
|
||||
|
||||
const domRef = useDOMRef(ref);
|
||||
|
||||
const {linkProps} = useAriaLink({...otherProps, elementType: `${as}`}, domRef);
|
||||
const {linkProps} = useAriaLink(
|
||||
{...otherProps, isDisabled: originalProps.isDisabled, elementType: `${as}`},
|
||||
domRef,
|
||||
);
|
||||
|
||||
const {isFocused, isFocusVisible, focusProps} = useFocusRing({
|
||||
autoFocus,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user