Kongponents

# View Switcher

KViewSwitcher Is used to toggle list views to grid views.

# Props

# view

  • table
  • grid

The current view of your UI. The button will show icons for the opposite. I.E. if your data is currently in a list/table, passing list will render the grid icons.

{ "currentView": "grid" }

The Komponent component is used in this example to create state.

<Komponent
  :data="{ currentView: 'grid' }"
  v-slot="{ data }">
  <div>
    <KCard class="mb-4">
      <template #body>{{ data }}</template>
    </KCard>
    <KViewSwitcher
      :view="data.currentView"
      @view-changed="(view) => data.currentView = view"/>
  </div>
</Komponent>

# Usage

KViewSwitcher will emit the new view on click. This then allows you to change the UI to the new view. The button will also toggle to the opposite view for users to switch back.

Teenage Mutant Ninja Turtles

← KClipboard →