العرض والرؤية

العرض والرؤية في Tailwind CSS

تتحكم أدوات العرض والرؤية في كيفية عرض العناصر وما إذا كانت مرئية للمستخدمين وقارئات الشاشة. فهم هذه الخصائص ضروري لإنشاء تخطيطات متجاوبة وإخفاء المحتوى بشكل شرطي وبناء واجهات سهلة الوصول.

خاصية العرض

خاصية العرض هي واحدة من أهم خصائص CSS، وتحدد كيفية تصرف العنصر في التخطيط:

<!-- عرض الكتلة -->
<div class="block">
    عنصر كتلة (يأخذ العرض الكامل، يتكدس عمودياً)
</div>

<!-- عرض مضمن -->
<span class="inline">عنصر مضمن</span>
<span class="inline">يتدفق مع النص</span>

<!-- عرض مضمن-كتلة -->
<div class="inline-block">
    مضمن-كتلة (يتدفق مثل المضمن ولكن يحترم العرض/الارتفاع)
</div>

<!-- عرض مرن -->
<div class="flex">
    <div>عنصر مرن 1</div>
    <div>عنصر مرن 2</div>
</div>

<!-- عرض مرن مضمن -->
<div class="inline-flex">
    <div>عنصر مرن مضمن 1</div>
    <div>عنصر مرن مضمن 2</div>
</div>

<!-- عرض الشبكة -->
<div class="grid grid-cols-3">
    <div>عنصر شبكة 1</div>
    <div>عنصر شبكة 2</div>
    <div>عنصر شبكة 3</div>
</div>

<!-- عرض شبكة مضمنة -->
<div class="inline-grid grid-cols-2">
    <div>العنصر 1</div>
    <div>العنصر 2</div>
</div>

<!-- مخفي (display: none) -->
<div class="hidden">
    تمت إزالة هذا العنصر تماماً من التخطيط
</div>

الكتلة مقابل المضمن مقابل المضمن-الكتلة

<!-- عناصر الكتلة -->
<div class="bg-blue-100 p-4 mb-2">
    <div class="block bg-blue-500 text-white p-2 mb-2">الكتلة 1 (عرض كامل)</div>
    <div class="block bg-blue-500 text-white p-2">الكتلة 2 (عرض كامل)</div>
</div>

<!-- العناصر المضمنة -->
<div class="bg-green-100 p-4 mb-2">
    <span class="inline bg-green-500 text-white px-2 py-1">مضمن 1</span>
    <span class="inline bg-green-500 text-white px-2 py-1">مضمن 2</span>
    <span class="inline bg-green-500 text-white px-2 py-1">مضمن 3</span>
</div>

<!-- عناصر المضمن-الكتلة -->
<div class="bg-purple-100 p-4">
    <div class="inline-block bg-purple-500 text-white px-4 py-2 w-24">م ك 1</div>
    <div class="inline-block bg-purple-500 text-white px-4 py-2 w-24">م ك 2</div>
    <div class="inline-block bg-purple-500 text-white px-4 py-2 w-24">م ك 3</div>
</div>

<!-- عملي: قائمة التنقل -->
<nav class="bg-gray-800 p-4">
    <a href="#" class="inline-block text-white px-4 py-2 hover:bg-gray-700 rounded">الرئيسية</a>
    <a href="#" class="inline-block text-white px-4 py-2 hover:bg-gray-700 rounded">حول</a>
    <a href="#" class="inline-block text-white px-4 py-2 hover:bg-gray-700 rounded">الخدمات</a>
    <a href="#" class="inline-block text-white px-4 py-2 hover:bg-gray-700 rounded">اتصل</a>
</nav>

أنواع عرض الجدول

يوفر Tailwind أدوات لقيم العرض المتعلقة بالجدول:

<!-- عرض الجدول -->
<div class="table w-full">
    <div class="table-row-group">
        <div class="table-row">
            <div class="table-cell border border-gray-300 px-4 py-2">الخلية 1</div>
            <div class="table-cell border border-gray-300 px-4 py-2">الخلية 2</div>
        </div>
        <div class="table-row">
            <div class="table-cell border border-gray-300 px-4 py-2">الخلية 3</div>
            <div class="table-cell border border-gray-300 px-4 py-2">الخلية 4</div>
        </div>
    </div>
</div>

<!-- تسمية الجدول -->
<div class="table w-full">
    <div class="table-caption text-lg font-bold mb-2">تسمية الجدول</div>
    <div class="table-row-group">
        <!-- محتوى الجدول -->
    </div>
</div>

المخفي مقابل الرؤية

هناك عدة طرق لإخفاء العناصر، ولكل منها تأثيرات مختلفة على التخطيط وإمكانية الوصول:

<!-- مخفي (display: none) - تمت إزالته من التخطيط -->
<div class="hidden">
    تمت إزالته تماماً من تدفق المستند
</div>

<!-- غير مرئي (visibility: hidden) - تم الحفاظ على المساحة -->
<div class="invisible">
    مخفي لكن المساحة محفوظة في التخطيط
</div>

<!-- opacity-0 - مخفي بصرياً لكنه تفاعلي -->
<div class="opacity-0">
    شفاف لكنه لا يزال في التخطيط وقابل للنقر
</div>

<!-- sr-only (قارئ الشاشة فقط) -->
<div class="sr-only">
    مرئي فقط لقارئات الشاشة، وليس للمستخدمين المرئيين
</div>

<!-- مثال المقارنة -->
<div class="space-y-4">
    <div class="flex gap-4 bg-gray-100 p-4">
        <div class="bg-blue-500 text-white p-4">مرئي</div>
        <div class="hidden bg-red-500 text-white p-4">مخفي (بدون مساحة)</div>
        <div class="bg-blue-500 text-white p-4">مرئي</div>
    </div>

    <div class="flex gap-4 bg-gray-100 p-4">
        <div class="bg-blue-500 text-white p-4">مرئي</div>
        <div class="invisible bg-red-500 text-white p-4">غير مرئي (المساحة محفوظة)</div>
        <div class="bg-blue-500 text-white p-4">مرئي</div>
    </div>
</div>

خاصية الرؤية

<!-- مرئي (افتراضي) -->
<div class="visible">
    عنصر مرئي
</div>

<!-- غير مرئي -->
<div class="invisible">
    غير مرئي لكنه يشغل مساحة
</div>

<!-- طي (لعناصر الجدول) -->
<table class="w-full">
    <tr>
        <td class="border p-2">صف مرئي</td>
    </tr>
    <tr class="collapse">
        <td class="border p-2">صف مطوي (تمت إزالة المساحة)</td>
    </tr>
    <tr>
        <td class="border p-2">صف مرئي</td>
    </tr>
</table>

<!-- تبديل الرؤية مع التمرير -->
<div class="group relative">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">
        مرر فوقي
    </button>
    <div class="invisible group-hover:visible absolute top-full left-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg p-4">
        <p>محتوى تلميح الأداة</p>
    </div>
</div>

الشفافية

تتحكم الشفافية في مدى شفافية العنصر، بقيم من 0 (شفاف تماماً) إلى 100 (معتم تماماً):

<!-- مقياس الشفافية -->
<div class="space-y-4">
    <div class="bg-blue-500 text-white p-4 opacity-0">opacity-0 (غير مرئي)</div>
    <div class="bg-blue-500 text-white p-4 opacity-25">opacity-25</div>
    <div class="bg-blue-500 text-white p-4 opacity-50">opacity-50</div>
    <div class="bg-blue-500 text-white p-4 opacity-75">opacity-75</div>
    <div class="bg-blue-500 text-white p-4 opacity-100">opacity-100 (افتراضي)</div>
</div>

<!-- تأثير شفافية التمرير -->
<div class="grid grid-cols-3 gap-4">
    <img src="image1.jpg" class="opacity-50 hover:opacity-100 transition-opacity" alt="صورة 1">
    <img src="image2.jpg" class="opacity-50 hover:opacity-100 transition-opacity" alt="صورة 2">
    <img src="image3.jpg" class="opacity-50 hover:opacity-100 transition-opacity" alt="صورة 3">
</div>

<!-- زر معطل مع شفافية -->
<button class="bg-blue-500 text-white px-6 py-3 rounded disabled:opacity-50 disabled:cursor-not-allowed" disabled>
    زر معطل
</button>

<!-- تراكب التحميل -->
<div class="relative">
    <div class="p-8 bg-white">
        <h2 class="text-2xl font-bold">المحتوى</h2>
        <p>المحتوى الرئيسي هنا</p>
    </div>
    <div class="absolute inset-0 bg-black opacity-50 flex items-center justify-center">
        <div class="bg-white p-4 rounded-lg opacity-100">
            <p class="text-gray-900">جاري التحميل...</p>
        </div>
    </div>
</div>

قارئ الشاشة فقط

تخفي أداة sr-only المحتوى بصرياً مع الحفاظ عليه متاحاً لقارئات الشاشة:

<!-- رابط التخطي إلى المحتوى الرئيسي -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:bg-blue-500 focus:text-white focus:px-4 focus:py-2">
    التخطي إلى المحتوى الرئيسي
</a>

<!-- زر أيقونة مع تسمية متاحة -->
<button class="p-2 rounded hover:bg-gray-100">
    <svg class="w-6 h-6"><!-- أيقونة البحث --></svg>
    <span class="sr-only">بحث</span>
</button>

<!-- نموذج مع تسميات متاحة -->
<form>
    <label for="email" class="sr-only">عنوان البريد الإلكتروني</label>
    <input
        type="email"
        id="email"
        placeholder="عنوان البريد الإلكتروني"
        class="border border-gray-300 px-4 py-2 rounded w-full"
    >
</form>

<!-- مؤشر التحميل مع نص متاح -->
<div class="flex items-center justify-center">
    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
    <span class="sr-only">جاري تحميل المحتوى، يرجى الانتظار...</span>
</div>

<!-- زر إغلاق مع تسمية -->
<button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600">
    <svg class="w-6 h-6">×</svg>
    <span class="sr-only">إغلاق النافذة المنبثقة</span>
</button>

العرض المتجاوب

ادمج أدوات العرض مع نقاط التوقف المتجاوبة لإظهار/إخفاء المحتوى في أحجام شاشة مختلفة:

<!-- قائمة الهاتف المحمول (مرئية على الهاتف المحمول، مخفية على سطح المكتب) -->
<button class="block lg:hidden p-2">
    <svg class="w-6 h-6"><!-- أيقونة القائمة --></svg>
    <span class="sr-only">فتح القائمة</span>
</button>

<!-- تنقل سطح المكتب (مخفي على الهاتف المحمول، مرئي على سطح المكتب) -->
<nav class="hidden lg:block">
    <a href="#" class="px-4 py-2">الرئيسية</a>
    <a href="#" class="px-4 py-2">حول</a>
    <a href="#" class="px-4 py-2">اتصل</a>
</nav>

<!-- الشريط الجانبي (عرض كامل على الهاتف المحمول، شريط جانبي على سطح المكتب) -->
<div class="flex flex-col lg:flex-row">
    <aside class="w-full lg:w-64 lg:block">
        <!-- محتوى الشريط الجانبي -->
    </aside>
    <main class="flex-1">
        <!-- المحتوى الرئيسي -->
    </main>
</div>

<!-- إظهار محتوى مختلف في نقاط توقف مختلفة -->
<div>
    <p class="block sm:hidden">عرض الهاتف المحمول</p>
    <p class="hidden sm:block md:hidden">عرض الجهاز اللوحي</p>
    <p class="hidden md:block">عرض سطح المكتب</p>
</div>

<!-- شبكة تغير الأعمدة -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="bg-gray-200 p-4">العنصر 1</div>
    <div class="bg-gray-200 p-4">العنصر 2</div>
    <div class="bg-gray-200 p-4">العنصر 3</div>
    <div class="bg-gray-200 p-4">العنصر 4</div>
</div>

الأنماط العملية

تراكب النافذة المنبثقة

<!-- نافذة منبثقة (تبديل مع JavaScript) -->
<div class="hidden fixed inset-0 z-50 overflow-y-auto" id="modal">
    <!-- تراكب الخلفية -->
    <div class="fixed inset-0 bg-black opacity-50"></div>

    <!-- محتوى النافذة المنبثقة -->
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
            <h2 class="text-2xl font-bold">عنوان النافذة المنبثقة</h2>
            <p class="mt-4">محتوى النافذة المنبثقة</p>
            <button class="mt-6 px-4 py-2 bg-blue-500 text-white rounded">
                إغلاق
            </button>
        </div>
    </div>
</div>

<script>
// إظهار النافذة المنبثقة: document.getElementById('modal').classList.remove('hidden')
// إخفاء النافذة المنبثقة: document.getElementById('modal').classList.add('hidden')
</script>

الأكورديون مع تبديل العرض

<div class="space-y-2">
    <!-- عنصر الأكورديون -->
    <div class="border border-gray-200 rounded-lg">
        <button class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50">
            <span class="font-semibold">القسم 1</span>
            <svg class="w-5 h-5"><!-- أيقونة الشيفرون --></svg>
        </button>
        <div class="hidden p-4 border-t border-gray-200">
            <p>محتوى القسم 1</p>
        </div>
    </div>

    <!-- عنصر الأكورديون (موسع) -->
    <div class="border border-gray-200 rounded-lg">
        <button class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50">
            <span class="font-semibold">القسم 2</span>
            <svg class="w-5 h-5 transform rotate-180"><!-- أيقونة الشيفرون --></svg>
        </button>
        <div class="block p-4 border-t border-gray-200">
            <p>محتوى القسم 2 (مرئي)</p>
        </div>
    </div>
</div>

الملخص

في هذا الدرس، تعلمت عن العرض والرؤية في Tailwind CSS:

• أنواع العرض: block، inline، inline-block، flex، grid، ومتغيرات الجدول
• إخفاء المحتوى: hidden، invisible، opacity، و sr-only
• خاصية الرؤية: visible، invisible، و collapse
• الشفافية: التحكم في الشفافية من 0 إلى 100
• قارئ الشاشة فقط: إخفاء المحتوى بصرياً مع الحفاظ عليه متاحاً
• العرض المتجاوب: إظهار/إخفاء المحتوى في نقاط توقف مختلفة
• الأنماط العملية: النوافذ المنبثقة، الأكورديون، التنقل، وحالات التحميل

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