View Switcher ​

KViewSwitcher Is used to toggle list views to grid views.

Props ​

view ​

The current view of your UI, one of table or grid. The button will show icons for the opposite. For example, if your data is currently in a list/table, passing list will render the grid icon.

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

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

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.