TagFilter

Компонент выбора тегов для фильтрации по ним

Props

tags

• type: Array as PropType<Tag[]>
• required: true

Список тегов

export type Tag = {
  id: number;
  name: string;
  iconUrl?: string;
};

selectedIds

• type: Array as PropType<number[]>
• required: true

Массив ID выбранных тегов

expanded

• type: Boolean
• default: false

Раскрыт весь список

Example

Test data

import type { GetTagsApiTag } from '#sf/sections/journal/api';

export const testTags: GetTagsApiTag[] = [
  {
    id: 0,
    name: 'Профессии',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18',
    },
  },
  {
    id: 1,
    name: 'Диплом',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=1',
    },
  },
  {
    id: 2,
    name: 'Конкурсы',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=2',
    },
  },
  {
    id: 3,
    name: 'Работы',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=3',
    },
  },
  {
    id: 4,
    name: 'Игры',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=4',
    },
  },
  {
    id: 5,
    name: 'Программирование',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=5',
    },
  },
  {
    id: 6,
    name: 'Голосование',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=6',
    },
  },
  {
    id: 7,
    name: 'Математика',
    slug: '',
    thumbnailFile: {
      id: 0,
      directUrl: 'https://picsum.photos/20/18?v=7',
    },
  },
];