Divided StackCommunity Asset

<script setup lang="ts">
const range = ref('7')
const toggleVisibility = ref(true)
</script>

<template>
  <div class="n-stack n-gap-l">
    <DividedStack>
      <!-- Web components -->
      <nord-banner>
        <p class="n-padding-be-s">
          Use the toggle below to see how the dividers are reactively added and
          removed.
        </p>

        <nord-tag
          size="s"
          variant="selectable"
          :checked="toggleVisibility"
          @change="toggleVisibility = !toggleVisibility"
        >
          Toggle visibility
        </nord-tag>
      </nord-banner>
      <nord-range
        label="Select rate"
        hint="Choose `0` value to reactively hide the field below"
        :value="range"
        :min="0"
        :max="10"
        @input="range = ($event.target as HTMLInputElement).value"
      ></nord-range>

      <!-- Vue components -->
      <ReadOnlyField
        v-if="range !== '0'"
        :label="`Field with value ${range}`"
        :value="range !== '0' ? range : undefined"
      />
      <ReadOnlyField label="Field without value" />
      <ReadOnlyField label="Flat field with content" value="This is a string" />

      <!-- HTML tags -->
      <p>This a standard paragraph</p>
      <p v-if="toggleVisibility">
        This a paragraph with <b>v-if</b> directive based on the toggle
      </p>
      <!-- eslint-disable-next-line vue/no-static-inline-styles -->
      <p style="display: none">
        This a paragraph with <b>display: none</b>, should not be visible
      </p>
      <p v-show="toggleVisibility">
        This paragraph has a <b>v-show</b> based on the toggle
      </p>
      <p :style="!toggleVisibility ? 'visibility: hidden' : undefined">
        This paragraph has <b>visibility: hidden</b> based on the toggle
      </p>
      <p :style="!toggleVisibility ? 'opacity: 0' : undefined">
        This paragraph has <b>opacity: 0</b> based on the toggle
      </p>
    </DividedStack>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({ layout: 'product-patterns-usage-example' })
</script>

<template>
  <DividedStack gap="l">
    <template #separator>
      <nord-icon name="interface-add" />
    </template>

    <DividedStack direction="horizontal" align-items="center">
      <template #separator>
        <nord-icon name="arrow-right-double" />
      </template>

      <span>With</span>
      <span>custom</span>
      <span>
        <code class="n-padding-xs n-color-surface-lowered n-border-radius"
          >nord-icon</code
        >
        divider
      </span>
    </DividedStack>

    <DividedStack direction="horizontal" align-items="center">
      <template #separator>
        <nord-icon
          label="Separator"
          name="arrow-right-long"
          color="var(--n-color-accent)"
          aria-hidden="true"
        ></nord-icon>
      </template>

      <span>With</span>
      <span>custom color</span>
      <span>
        <code class="n-padding-xs n-color-surface-lowered n-border-radius"
          >nord-icon</code
        >
        divider
      </span>
    </DividedStack>

    <DividedStack direction="horizontal" gap="xs">
      <template #separator>&ndash;</template>
      <span>2025-09-08</span>
      <span>2025-09-09</span>
    </DividedStack>
  </DividedStack>
</template>

<script lang="ts" setup>
definePageMeta({ layout: 'product-patterns-usage-example' })
</script>

<template>
  <div class="n-stack n-gap-xl">
    <details
      open
      class="n-stack n-gap-s n-color-background n-padding-m n-border-radius"
    >
      <summary class="n-font-weight-heading">
        Horizontal direction (default divider)
      </summary>
      <DividedStack direction="horizontal" align-items="center">
        <span>A</span>
        <span>B</span>
        <span>C</span>
      </DividedStack>
    </details>

    <details
      open
      class="n-stack n-gap-s n-color-background n-padding-m n-border-radius"
    >
      <summary class="n-font-weight-heading">
        Vertical direction (default divider)
      </summary>
      <DividedStack direction="vertical">
        <span>A</span>
        <span>B</span>
        <span>C</span>
      </DividedStack>
    </details>

    <details
      open
      class="n-stack n-gap-s n-color-background n-padding-m n-border-radius"
    >
      <summary class="n-font-weight-heading">
        Horizontal direction (custom divider)
      </summary>
      <DividedStack direction="horizontal" align-items="center">
        <template #separator>
          <nord-icon name="arrow-right-small" size="s" />
        </template>
        <span>A</span>
        <span>B</span>
        <span>C</span>
      </DividedStack>
    </details>

    <details
      open
      class="n-stack n-gap-s n-color-background n-padding-m n-border-radius"
    >
      <summary class="n-font-weight-heading">
        Vertical direction (custom divider)
      </summary>
      <DividedStack>
        <template #separator>
          <nord-icon name="arrow-down-small" size="s" />
        </template>
        <span>A</span>
        <span>B</span>
        <span>C</span>
      </DividedStack>
    </details>
  </div>
</template>