الانتقال إلى المحتوى
1.6k

طباعة

وصفات من الفئة العملية للعناوين والنصوص الرئيسية والقوائم والجداول والرموز المضمنة — مصممة بنمط «نيوبروتالستي» ذي المظهر الثقيل.

لا نوفّر أي أنماط طباعة افتراضياً. هذه الصفحة مثال على كيفية استخدام فئات الأدوات لتنسيق النصّ الخاص بك.

لا يوجد مكون خاص بالطباعة لتثبيته — لا يتم تضمين أي شيء بشكل افتراضي. كل قسم من الأقسام أدناه عبارة عن نموذج لفئة مساعدة يمكن نسخه ولصقه لعنصر HTML عادي (h1–h4، p، blockquote، table، والقوائم، والكود المضمن)، معتمدةً على رموز السمة بحيث تظهر العناوين بارزةً والحدود سميكةً.

استخدمه عندما:

  • منشورات المدونة والوثائق — قم بتعيين مخرجات MDX أو CMS إلى هذه الفئات للحصول على تنسيق متسق للنصوص الطويلة.
  • صفحات التسويق — تغطي h1 وLead وLarge النصوص الرئيسية للصفحة الرئيسية دون الحاجة إلى نظام عرض منفصل.
  • عندما يكون استخدام @tailwindcss/typography مبالغًا فيه — انسخ العناصر التي تحتاجها فقط بدلاً من استخدام المكون الإضافي prose.

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">

table

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

كود مضمّن

@radix-ui/react-alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

فقرة استهلالية

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-xl text-muted-foreground">

نص كبير

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}

نص صغير

Email address
export function TypographySmall() {
  return (
    <small className="text-sm leading-none font-medium">Email address</small>

نص باهت

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-sm text-muted-foreground">Enter your email address.</p>

RTL

لتفعيل RTL في Neobrutalism، راجع دليل إعداد RTL.

"use client"

import * as React from "react"

إمكانية الوصول

تعمل هذه الأنماط على تنسيق العناصر الأصلية، لذا فإن دلالاتها صحيحة بالفعل — حافظ على ذلك. اختر مستويات العناوين وفقًا لمخطط المستند، وليس حسب الحجم: فبرامج قراءة الشاشة تتنقل حسب المستوى، لذا إذا بدا h2 كبيرًا جدًّا، فقم بإعادة تنسيقه بدلاً من اللجوء إلى h4. أضف إلى جداول البيانات صف رأس <th> حتى تظل الخلايا مرتبطة بأعمدةها، واحتفظ بـ blockquote للاقتباسات الفعلية.