# Split Flap Display

> An airport-style split flap display with staggered character flip animations and configurable rows.

<demo-split-flap-display>



</demo-split-flap-display>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/split-flap-display.json"
```

## Usage

```vue
<script setup lang="ts">
  import SplitFlapDisplay from '~/components/ui/split-flap-display/SplitFlapDisplay.vue';

  const rows = [
    { label: 'DEPARTURE', value: 'LOS ANGELES' },
    { label: 'GATE', value: 'B42' },
    { label: 'STATUS', value: 'ON TIME' },
  ];
</script>

<template>
  <SplitFlapDisplay
    :rows="rows"
    :columns="14"
    size="md"
    accent-color="#22c55e"
    :show-indicators="true"
    :stagger-delay="30"
    :flip-speed="35"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        rows
      </code>
    </td>
    
    <td>
      <code>
        SplitFlapRow[]
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Array of <code>
        { label, value }
      </code>
      
       pairs to display
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Simple text mode (alternative to rows)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        columns
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        14
      </code>
    </td>
    
    <td>
      Number of character columns per row
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        'sm' | 'md' | 'lg'
      </code>
    </td>
    
    <td>
      <code>
        'md'
      </code>
    </td>
    
    <td>
      Cell size preset
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#22c55e'
      </code>
    </td>
    
    <td>
      Color for labels and indicator strips
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-indicators
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show colored vertical indicator bar on each row
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        30
      </code>
    </td>
    
    <td>
      Delay in ms between each column starting to flip
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flip-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        35
      </code>
    </td>
    
    <td>
      Speed in ms of each character flip cycle
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for the outer container
    </td>
  </tr>
</tbody>
</table>