diff --git a/content/app/development/ux/components/Datamodell-settings.png b/content/app/development/ux/components/Datamodell-settings.png deleted file mode 100644 index a6bf57b28b0..00000000000 Binary files a/content/app/development/ux/components/Datamodell-settings.png and /dev/null differ diff --git a/content/app/development/ux/components/HTML-autocomplete-settings.png b/content/app/development/ux/components/HTML-autocomplete-settings.png deleted file mode 100644 index ae29756fd14..00000000000 Binary files a/content/app/development/ux/components/HTML-autocomplete-settings.png and /dev/null differ diff --git a/content/app/development/ux/components/Kilde-settings.png b/content/app/development/ux/components/Kilde-settings.png deleted file mode 100644 index 3b1fce436bc..00000000000 Binary files a/content/app/development/ux/components/Kilde-settings.png and /dev/null differ diff --git a/content/app/development/ux/components/Kodeliste-settings.png b/content/app/development/ux/components/Kodeliste-settings.png deleted file mode 100644 index df61f969e8f..00000000000 Binary files a/content/app/development/ux/components/Kodeliste-settings.png and /dev/null differ diff --git a/content/app/development/ux/components/Sikret-API-settings.png b/content/app/development/ux/components/Sikret-API-settings.png deleted file mode 100644 index 90a5b26b43f..00000000000 Binary files a/content/app/development/ux/components/Sikret-API-settings.png and /dev/null differ diff --git a/content/app/development/ux/components/Tekst-settings-all.png b/content/app/development/ux/components/Tekst-settings-all.png deleted file mode 100644 index a1522ecb779..00000000000 Binary files a/content/app/development/ux/components/Tekst-settings-all.png and /dev/null differ diff --git a/content/app/development/ux/components/image/_index.en.md b/content/app/development/ux/components/image/_index.en.md index 37416b5371b..9649fe02aa8 100644 --- a/content/app/development/ux/components/image/_index.en.md +++ b/content/app/development/ux/components/image/_index.en.md @@ -154,7 +154,7 @@ App/ui/layouts/{page}.json ### Image settings (`image`) -### Image source (`image.src`) +#### Image source (`image.src`) The default source is `nb`; any language that does not define a separate image source will use this source. List another language code and image source to add a source, as in the example below. @@ -222,7 +222,7 @@ void Configure() `applicationId` is the same as `id` in `App/configApplicationmetadata.json`. -### Width and alignment (`image.width`, `image.align`) +#### Width and alignment (`image.width`, `image.align`) By using `width`, you can adjust the image size by specifying the width of the image in percentage. The height is automatically set to maintain proportions. The default setting is 100% (original width). @@ -275,76 +275,12 @@ The following options are available for positioning: - `space-around`: The elements are evenly distributed horizontally with equal spacing between each element, including spacing at the start and end, which is half the spacing between the elements. - `space-evenly`: The elements are evenly distributed horizontally with equal spacing between each element, including at the start and end, so that the total spacing is evenly distributed. -### General settings +{{< property-docs prop="renderAsSummary" >}} -{{}} -{{}} - -![Settings for summary and hidden](../innstilling-oppsummering-skjules.png) - -![Setting for page break](../innstilling-sideskift.png) - -{{}} -{{}} - -{{< code-title >}} -App/ui/layouts/{page}.json -{{< /code-title >}} - -```json{hl_lines="4-9"} -{ - "id": "komponent-id", - ... - "renderAsSummary": false, - "hidden": false, - "pageBreak": { - "breakBefore": "auto", - "breakAfter": "auto" - } -} -``` -{{}} -{{}} - -- **Oppsummering** (`renderAsSummary`): Indicates whether the field should be included in a summary or not (default: `false`). -- **Feltet skal skjules** (`hidden`): Indicates whether the field should be hidden or not (default: `false`). -- **PDF-innstillinger** (`pageBreak`): Indicates whether a page break should be added before or after the component. Can be either: `auto` (default), `always`, or `avoid`. - ---- - -{{% notice info %}} -The following settings are not yet supported in the form editor but can be configured manually. -{{% /notice %}} - -### Horizontal alignment with `grid` - -The `grid` property controls horizontal alignment based on a 12-column layout. - Items are allocated fractions of 12 which sets their width relative to the screen width. - In the example below, we set the component's width to 2/12 of the screen width for all screen sizes (from `xs` and up). - -{{}} -{{}} - -{{< code-title >}} -App/ui/layouts/{page}.json -{{< /code-title >}} - -```json{hl_lines=["4-6"]} -{ - "id": "komponent-id", - ... - "grid": { - "xs": 2, - } -} -``` -{{}} -{{}} - -![Grid example screenshot](screenshot-grid-example.png "Example of image taking up 2/12 of the screen width") +{{< property-docs prop="hidden" >}} -You can also use `grid` to place items side by side. +{{< property-docs prop="page-break" >}} -See [Components placed side by side (grid)](/app/development/ux/styling/#components-placed-side-by-side-grid) for details and more examples. +{{< property-docs prop="grid-short" >}} \ No newline at end of file diff --git a/content/app/development/ux/components/image/_index.nb.md b/content/app/development/ux/components/image/_index.nb.md index 9c8405c92a7..a160a85d511 100644 --- a/content/app/development/ux/components/image/_index.nb.md +++ b/content/app/development/ux/components/image/_index.nb.md @@ -281,76 +281,13 @@ App/ui/layouts/{page}.json - `space-around`: Elementene er jevnt fordelt langs hovedaksen med like mye mellomrom mellom hvert element, inkludert mellomrom ved start og slutt, som er halvparten av mellomrommet mellom elementene. - `space-evenly`: Elementene er jevnt fordelt langs hovedaksen med like mye mellomrom mellom hvert element, inkludert start og slutt, slik at det totale mellomrommet er jevnt fordelt. -### Generelle innstillinger -{{}} -{{}} - -![Innstilling oppsummering og skjult](../innstilling-oppsummering-skjules.png) - -![Innstilling sideskift](../innstilling-sideskift.png) - -{{}} -{{}} - -{{< code-title >}} -App/ui/layouts/{page}.json -{{< /code-title >}} - -```json{hl_lines="4-9"} -{ - "id": "komponent-id", - ... - "renderAsSummary": false, - "hidden": false, - "pageBreak": { - "breakBefore": "auto", - "breakAfter": "auto" - } -} -``` -{{}} -{{}} - -- **Oppsummering** (`renderAsSummary`): Indikerer om feltet skal være med i oppsummering eller ikke (standard: `false`). -- **Feltet skal skjules** (`hidden`): Indikerer om feltet skal skjules eller ikke (standard: `false`). -- **PDF-innstillinger** (`pageBreak`): Indikerer om en sideskift skal legges til før eller etter komponenten. Kan være enten: `auto` (standard), `always` (alltid) eller `avoid` (unngå). - ---- - -{{% notice info %}} -Følgende innstillinger er ikke støttet i skjemaeditor ennå, men kan konfigureres manuelt. -{{% /notice %}} - -### Horisontal justering med `grid` - -`grid`-egenskapen kontrollerer horisontal justering av komponenten basert på en layout med 12 kolonner. - Elementer tildeles brøkdeler av 12 som bestemmer deres bredde i forhold til skjermbredden. - I eksemplet nedenfor setter vi komponentens bredde til 2/12 av skjermbredden for alle skjermstørrelser (fra `xs` og opp). - -{{}} -{{}} - -{{< code-title >}} -App/ui/layouts/{page}.json -{{< /code-title >}} - -```json{hl_lines=["4-6"]} -{ - "id": "komponent-id", - ... - "grid": { - "xs": 2, - } -} -``` -{{}} -{{}} +{{< property-docs prop="renderAsSummary" >}} -![Eksempel posisjonering med grid. Skjermbilde](screenshot-grid-example.png "Eksempel med bilde som tar 2/12 av skjermbredden") +{{< property-docs prop="hidden" >}} -Du kan også bruke `grid` for å sidestille komponenter. +{{< property-docs prop="page-break" >}} -Se [Sidestilte komponenter (grid)](/nb/app/development/ux/styling/#sidestilte-komponenter-grid) for detaljer og flere eksempler. +{{< property-docs prop="grid-short" >}} \ No newline at end of file diff --git a/content/app/development/ux/components/innstilling-oppsummering-skjules.png b/content/app/development/ux/components/innstilling-oppsummering-skjules.png deleted file mode 100644 index 31e1375bd4c..00000000000 Binary files a/content/app/development/ux/components/innstilling-oppsummering-skjules.png and /dev/null differ diff --git a/content/app/development/ux/components/innstilling-sideskift.png b/content/app/development/ux/components/innstilling-sideskift.png deleted file mode 100644 index 9db00196260..00000000000 Binary files a/content/app/development/ux/components/innstilling-sideskift.png and /dev/null differ diff --git a/content/app/development/ux/components/innstillinger-skrivebeskyttet-required-visning-indeks.png b/content/app/development/ux/components/innstillinger-skrivebeskyttet-required-visning-indeks.png deleted file mode 100644 index 6fddddbdad6..00000000000 Binary files a/content/app/development/ux/components/innstillinger-skrivebeskyttet-required-visning-indeks.png and /dev/null differ