add UrlField docs (refinedev#610)

* add UrlField docs * update doc example * Update documentation/docs/guides-and-concepts/fields/url.md Co-authored-by: Ömer Faruk APLAK <[email protected]>
landofcoder · Jun 17, 2021 · 97e2df9 · 97e2df9
1 parent dd581d7
commit 97e2df9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/documentation/docs/guides-and-concepts/fields/url.md b/documentation/docs/guides-and-concepts/fields/url.md
@@ -0,0 +1,58 @@
+---
+id: url
+title: Url
+---
+
+This field lets you embed a link. It uses [Ant Design's <Typography.Link\>](https://ant.design/components/typography/) component. You can pass a url in its `value` prop. And you can show a text in its place by passing any `children`.
+
+## Usage
+
+Let's see how to use `<UrlField>` with an example:
+
+```tsx title="pages/posts/list.tsx"
+import * as React from "react";
+
+import { List, Table, useTable, UrlField } from "@pankod/refine";
+
+export const PostList: React.FC = () => {
+ const { tableProps } = useTable<IPost>();
+
+ return (
+ <List>
+ <Table<IPost> {...tableProps} rowKey="id">
+ <Table.Column<IPost>
+ dataIndex="title"
+ title="Title"
+ key="title"
+ />
+ <Table.Column<IPost>
+ dataIndex={["image", "0", "url"]}
+ title={"Image"}
+ key="image"
+ render={(value: string) => <UrlField value={value} />}
+ />
+ </Table>
+ </List>
+ );
+};
+```
+
+```ts title="interfaces/index.d.ts"
+interface IPost {
+ title: string;
+ image: IImage[];
+}
+
+interface IImage {
+ url: string;
+}
+```
+
+## API Reference
+
+### Properties
+
+| Property | Description | Type |
+| -------- | ---------------------------- | ----------- |
+| value | Url for link to reference to | `string` |
+| children | What to show instead of url | `ReactNode` |
diff --git a/documentation/sidebars.js b/documentation/sidebars.js
@@ -143,6 +143,7 @@ module.exports = {
  label: "Fields",
  items: [
  "guides-and-concepts/fields/boolean",
+ "guides-and-concepts/fields/url",
  "guides-and-concepts/fields/image",
  "guides-and-concepts/fields/file",
  "guides-and-concepts/fields/date",