Skip to content

Commit

Permalink
Docs for Tabs component (#1927)
Browse files Browse the repository at this point in the history 
* Add docs for Tabs component

* Fix doc fro text

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.en.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Update content/altinn-studio/reference/ux/components/Tabs/_index.nb.md

Co-authored-by: Camilla Marie Dalan <[email protected]>

* Add Size to prop description

---------

Co-authored-by: Camilla Marie Dalan <[email protected]>
  • Loading branch information
@paal2707 @cammiida
paal2707 and cammiida authored Dec 16, 2024
1 parent 925d973 commit d10f2d9
Show file tree
Hide file tree
Showing 5 changed files with 352 additions and 3 deletions.
175 changes: 175 additions & 0 deletions content/altinn-studio/reference/ux/components/Tabs/_index.en.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
---
title: Tabs
linktitle: Tabs
description: A component that allows you to organise and switch between different content in tabs.
schemaname: Tabs # Component schema name used to autogenerate list of properties from json schema (replace with appropriate component name)
weight: 10 # Do not change, the components will be sorted alphabetically
toc: true
---

{{% notice warning %}}
🚧 This documentation is a work in progress.
{{% /notice %}}

---

## Usage

The `Tabs` component allows you to organise and switch between different content sections by clicking on the header,
allowing for a space-efficient and organized way to present information.

### Anatomy

![Tab active anatomy](tabs-example.png "Tab anatomy")

{{% anatomy-list %}}
1. **Header**: The clickable section title that users interact with to select or switch the content.
2. **Content Area**: The area that is revealing or hiding information when the header is clicked.
{{% /anatomy-list %}}

<!--
Add the following sections if relevant:
### Behavior
(How the component behaves in different contexts)
### Style
(Visual styling (e.g. alignment, padding, dos and don'ts))
### Best Practices
(Industry standards, dos and don'ts)
### Content guidelines
(E.g. punctuation rules, standard labels, etc.)
### Accessibility
(Component-specific best practices for accessibility.)
### Mobile
(How to apply component in mobile environments.)
-->

## Properties

| **Property** | **Type** | **Description** |
|-----------------|----------|-----------------------------------------------------------------------------------------------------|
| `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 | Configuring a tab to be selected by default. |
| `tabs` | Array | A list of tab objects containing the config(`id, title, icon, children`) for each tab. |
| `tabs.id` | string | Unique ID of the tab in question. |
| `tabs.title` | string | The title for the tab in question. |
| `tabs.icon` | string | An URL to the icon for the tab in question. |
| `tabs.children` | Array | The content of the tab in question. |

<!-- The following is an autogenerated list of the properties available for {{% title %}} based on the component's JSON schema file (linked below).
{{% notice warning %}}
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
{{% /notice %}}
The `component-props` shortcode automatically generates a list of component properties from the component's json schema.
The component name can be explicitly given as argument (e.g. `component-props "Grid"`).
If no argument is given, the shortcode pulls the component name from 'schemaname' in the frontmatter.
{{% component-props %}} -->

## Configuration

### Add component

```json{hl_lines="6-9"}
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}
```
<br>

### defaultTab
The ID of the specific tab that you wish to be selected by default.


### Tabs

#### `id`
A string identifier for the tab. Must be unique within the current list of tabs.

#### `title`
The title of the tab can be added as text directly or referenced via a text key to a [text resource](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).

#### `Size`
Sets the size of the tabs. **Enum:** `"small" | "medium" | "large"`
<br/> **Default:** `medium`.

#### `icon`
A URL path to the icon.

#### `children`

Defines the components to display when a tab is active by adding their IDs to an array under the `children` property.

<br>

## Example

`Tabs` with paragraphs as child elements.

{{<content-version-selector classes="border-box">}}
{{<content-version-container version-label="Code">}}

```json{hl_lines=["9-12"]}
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}
```
{{</content-version-container>}}
{{</content-version-selector>}}

![Tabs example](<tabs-example.png> "Tabs with two tabs")
174 changes: 174 additions & 0 deletions content/altinn-studio/reference/ux/components/Tabs/_index.nb.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
---
title: Tabs
linktitle: Tabs
description: En komponent som lar deg organisere og velge mellom forskjellig innhold.
schemaname: Tabs # Component schema name used to autogenerate list of properties from json schema (replace with appropriate component name)
weight: 10 # Do not change, the components will be sorted alphabetically
toc: true
---

{{% notice warning %}}
🚧 Denne dokumenteasjonen er under arbeid.
{{% /notice %}}

---

## Bruk

`Tabs`-komponenten lar deg organisere og bytte mellom ulike innholdsseksjoner ved å klikke på overskriftene. Dette gir en plasseffektiv og ryddig måte å presentere informasjon på.

### Anatomi

![Tab aktiv anatomi](tabs-example.png "Tab anatomi")

{{% anatomy-list %}}
1. **Overskrift**: Den klikkbare seksjonstittelen som brukeren samhandler med for å velge eller bytte innhold.
2. **Innholdsområde**: Området som viser eller skjuler informasjon når overskriften klikkes.
{{% /anatomy-list %}}

<!--
Add the following sections if relevant:
### Behavior
(How the component behaves in different contexts)
### Style
(Visual styling (e.g. alignment, padding, dos and don'ts))
### Best Practices
(Industry standards, dos and don'ts)
### Content guidelines
(E.g. punctuation rules, standard labels, etc.)
### Accessibility
(Component-specific best practices for accessibility.)
### Mobile
(How to apply component in mobile environments.)
-->

## Egenskaper

| **Egenskap** | **Type** | **Beskrivelse** |
|-----------------|----------|------------------------------------------------------------------------------------------------------|
| `id` | string | Unik ID-streng for komponenten. |
| `size` | string | Setter størrelsen på fanen. **Enum:**: `"small" \| "medium" \| "large"` <br/> **Default:** `medium`. |
| `defaultTab` | string | Angir en fane som er valgt som standard. |
| `tabs` | Array | En liste av fane objekter som inneholder konfigurasjon(`id, title, icon, children`) per fane. |
| `tabs.id` | string | Unik ID-streng for fanen. Må være unik blant alle fanene for denne komponenten. |
| `tabs.title` | string | Tittelen for fanen. |
| `tabs.icon` | string | En URL-streng som peker på ikonet til fanen. |
| `tabs.children` | Array | Spesifiserer hvilke komponenter du vil vise når fanen er aktiv. |

<!-- The following is an autogenerated list of the properties available for {{% title %}} based on the component's JSON schema file (linked below).
{{% notice warning %}}
We are currently updating how we implement components, and the list of properties may not be entirely accurate.
{{% /notice %}}
The `component-props` shortcode automatically generates a list of component properties from the component's json schema.
The component name can be explicitly given as argument (e.g. `component-props "Grid"`).
If no argument is given, the shortcode pulls the component name from 'schemaname' in the frontmatter.
{{% component-props %}} -->

## Konfigurasjon

### Legg til komponenten

```json{hl_lines="6-9"}
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}
```
<br>

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

### tabs

#### `id`
Unik ID-streng for fanen.

#### `title`

Tittelen for kan legges til som tekst direkte eller refereres via en teksttast til en [tekstressurs](/nb/altinn-studio/reference/ux/texts/#legge-til-og-endre-tekster-i-en-app).

#### `Size`
Setter størrelsen på fanen. **Enum:** `"small" | "medium" | "large"`
<br/> **Default:** `medium`.

#### `icon`
En URL-sti til ikonet.

#### `children`

Spesifiserer hvilke komponenter du vil vise når fanen er aktiv, ved å legge til ID-ene deres i en liste under `children`.

<br>

## Eksempel

Faner med avsnitt som underordnede elementer.

{{<content-version-selector classes="border-box">}}
{{<content-version-container version-label="Code">}}

```json{hl_lines=["9-12"]}
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}
```
{{</content-version-container>}}
{{</content-version-selector>}}

![Tabs-eksempel](<tabs-example.png> "Tabs med to faner")
Binary file added content/altinn-studio/reference/ux/components/Tabs/tabs-example.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion content/altinn-studio/reference/ux/components/Text/_index.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,5 +117,5 @@ Text with label.
},
```
<!--
![Text example](<text-example-with-icon.png> "Text with icon and label")
![Text example](<text-example-with-icon.png> "Text with label")
-->
4 changes: 2 additions & 2 deletions content/altinn-studio/reference/ux/components/Text/_index.nb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Bestemmer om teksten vises under eller ved siden av ledeteksten. `horizontal` fo

#### Eksempel

Tekst med ledetekst og ikon.
Tekst med ledetekst.

```json{hl_lines=["9-12"]}
{
Expand All @@ -109,4 +109,4 @@ Tekst med ledetekst og ikon.
"direction": "horizontal",
},
```
![Tekst eksempel](<text-example-with-icon.png> "Tekst med ikon og label")
![Tekst eksempel](<text-example-with-icon.png> "Tekst med label")

0 comments on commit d10f2d9

Please sign in to comment.