1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographylistux

Custom List Markers

Список с минималистичными геометрическими маркерами вместо стандартных точек.

    Custom List Markers

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { MinimalListMarkers } from 'react-component-kit-ui/typography';

<MinimalListMarkers>Content</MinimalListMarkers>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/MinimalListMarkers.tsx + MinimalListMarkers.css:

MinimalListMarkers.tsx
'use client';

import type { ReactNode } from 'react';
import './MinimalListMarkers.css';

/** MinimalListMarkers — ported from astro-component-kit. */
export interface MinimalListMarkersProps {
  children?: ReactNode;
}

export function MinimalListMarkers({ children }: MinimalListMarkersProps) {
  return (
    <>
      <ul className="custom-list" data-rk-100c10="">
        {children}
      </ul>
    </>
  );
}

export default MinimalListMarkers;
MinimalListMarkers.css
/* MinimalListMarkers — ported from astro-component-kit (typography/MinimalListMarkers.astro) */

.custom-list:where([data-rk-100c10]) { list-style: none; padding: 0; }
.custom-list:where([data-rk-100c10]) li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; color: #94a3b8; font-size: 1rem; line-height: 1.5; }
.custom-list:where([data-rk-100c10]) li::before { content: "→"; position: absolute; left: 0; color: #6366f1; font-weight: 900; }

Краткая информация

Категория
Типографика
Имя файла
MinimalListMarkers.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographylistux