Компоненты Просмотрщик файлов Компонент Просмотрщик Файлов

Компонент Просмотрщик Файлов

Отзывчивый компонент просмотра файлов, разработанный в соответствии с принципами Material Design, с поддержкой темного режима и отзывчивыми эффектами.

Предварительный просмотр

HTML-код

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode CSS -->
<style>
    /* Example dark mode CSS */
    body {
        background-color: #121212;
        color: #ffffff;
    }
</style>

Связанные компоненты

Компонент просмотра файлов нейроморфизма

Компонент просмотра файлов в стиле неоморфизма для социальных сетей с дополнительной цветовой схемой и умеренной сложностью. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.

Открытый

Компонент просмотра ретро-файлов

Компонент просмотра файлов в стиле ретро/винтаж с адаптивным макетом и поддержкой темных тем. Включает список файлов со значками и именами, а также область предварительного просмотра. Использует шрифты и цвета в стиле ретро.

Открытый

Компонент Просмотрщик Файлов

Сложный, отзывчивый компонент просмотра файлов с фирменным/профессиональным стилем, аналогичной цветовой схемой и поддержкой темного режима, подходящий для бизнес-среды.

Открытый