Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs for Tabs component #1927

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Docs for Tabs component #1927

wants to merge 2 commits into from

Conversation

paal2707
Copy link
Contributor

@paal2707 paal2707 commented Dec 6, 2024

Adding docs for Tabs component in English and Norwegian

Closes: #1933

Copy link
Contributor

@cammiida cammiida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approve med forbehold om at kommentarene blir fiksa 😄 se gjerne også ekstra over om ID har blitt riktig overalt.

---
title: Tabs
linktitle: Tabs
description: A component that allows you to organize and switch between different content.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Britisk engelsk 😄

Suggested change
description: A component that allows you to organize and switch between different content.
description: A component that allows you to organise and switch between different content in tabs.

Spurte også ChatGPT om en versjon, så du kan vurdere å bruke den eventuelt:

A component that enables you to organise and switch between different pieces of content using tabs.


## Usage

The Tabs component allows you to organize and switch between different content sections by clicking on the header,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The Tabs component allows you to organize and switch between different content sections by clicking on the header,
The `Tabs` component allows you to organise and switch between different content sections by clicking on the header,


| **Property** | **Type** | **Description** |
|-----------------|----------|-----------------------------------------------------------------------------------------------------|
| `id` | string | Unique Id string for the component |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `id` | string | Unique Id string for the component |
| `id` | string | Unique ID string for the component. |

|-----------------|----------|-----------------------------------------------------------------------------------------------------|
| `id` | string | Unique Id string for the component |
| `size` | string | Sets the size of the tabs. **Enum:**: `"small" \| "medium" \| "large"` <br/> **Default:** `medium`. |
| `defaultTab` | string | Setting a tab that is default selected. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `defaultTab` | string | Setting a tab that is default selected. |
| `defaultTab` | string | Configuring a tab to be selected by default. |

| `size` | string | Sets the size of the tabs. **Enum:**: `"small" \| "medium" \| "large"` <br/> **Default:** `medium`. |
| `defaultTab` | string | Setting a tab that is default selected. |
| `tabs` | Array | A list of tab objects containing the config(`id, title, icon, children`) for each tab. |
| `tabs.id` | string | Unique id of the current tab. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bare synsing her altså 😅 du velger!

Suggested change
| `tabs.id` | string | Unique id of the current tab. |
| `tabs.id` | string | Unique ID of the tab in question. |

{{</content-version-container>}}
{{</content-version-selector>}}

![Tabs eksempel](<tabs-example.png> "Tabs med to faner")
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
![Tabs eksempel](<tabs-example.png> "Tabs med to faner")
![Tabs-eksempel](<tabs-example.png> "Tabs med to faner")

|-----------------|----------|------------------------------------------------------------------------------------------------------|
| `id` | string | Unik Id streng for komponenten. |
| `size` | string | Setter størrelsen på fanen. **Enum:**: `"small" \| "medium" \| "large"` <br/> **Default:** `medium`. |
| `defaultTab` | string | Anngir en fane som er valgt som standard. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `defaultTab` | string | Anngir en fane som er valgt som standard. |
| `defaultTab` | string | Angir en fane som er valgt som standard. |

| `tabs.id` | string | Unik Id streng for fanen. |
| `tabs.title` | string | Tittelen for fanen. |
| `tabs.icon` | string | En URL streng som peker på ikonet til fanen. |
| `tabs.children` | Array | Spesifiser hvilke komponenter du vil vise når fanen er aktiv. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `tabs.children` | Array | Spesifiser hvilke komponenter du vil vise når fanen er aktiv. |
| `tabs.children` | Array | Spesifiserer hvilke komponenter du vil vise når fanen er aktiv. |


## Example

Tabs with paragraphs as child elements.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Tabs with paragraphs as child elements.
`Tabs` with paragraphs as child elements.


### defaultTab
Dette kan settes til id'en til den spesifikke fanen du ønsker skal være valgt som standard.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Size?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feil i kode i Altinn Docs
2 participants