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

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

Side Header Text

Вертикальный полупрозрачный текст для стильного оформления фона страниц.

Side Header Text

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

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

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

<FadedVerticalText>Content</FadedVerticalText>

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

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

FadedVerticalText.tsx
'use client';

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

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

export function FadedVerticalText({ children }: FadedVerticalTextProps) {
  return (
    <>
      <div className="v-txt" data-rk-79dd68="">{children}</div>
    </>
  );
}

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

.v-txt:where([data-rk-79dd68]) { writing-mode: vertical-rl; transform: rotate(180deg); color: #334155; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; white-space: nowrap; }

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

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