ListViewSwitcher

Three accessible, icon-labelled listing views with a visible selected state.

Buttons & Controls

Japanese

English

Source

import { signal } from '@takazudo/zfb/zudo-react';
/** @jsxImportSource @takazudo/zfb/zudo-react */
import { defineStory, type StoryMeta } from '@takazudo-modular/ui-preact/story-contract';
import { ListViewSwitcher, type ListView } from './list-view-switcher';

const meta: StoryMeta = {
  title: 'ListViewSwitcher',
  category: 'Buttons & Controls',
  description: 'Three accessible, icon-labelled listing views with a visible selected state.',
  usage: `import { ListViewSwitcher } from '@takazudo-modular/ui-preact/list-view-switcher';`,
};
export default meta;

function Demo({ english = false }: { english?: boolean }) {
  const view = signal<ListView>('description');
  return (
    <ListViewSwitcher
      value={view}
      onChange={(next) => {
        view.value = next;
      }}
      label={english ? 'View' : '表示方法'}
      labels={
        english
          ? { description: 'Details', photos: 'Photo cards', images: 'Photos only' }
          : { description: '説明＋写真', photos: '写真＋情報', images: '写真のみ' }
      }
    />
  );
}
export const Japanese = defineStory({ name: 'Japanese', render: () => <Demo /> });
export const English = defineStory({ name: 'English', render: () => <Demo english /> });

Live CSS

Injected into the previews above. ListViewSwitcher

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */