Usus: различия между версиями

Материал из SS220 SS14 WIKI
(Новая страница: «<style> →‎Стили для контейнера вкладок: .tabs { position: relative; margin: 20px 0; } →‎Скрываем оригинальные radio-кнопки: .tabs input[type="radio"] { position: absolute; opacity: 0; height: 0; width: 0; } →‎Стили для заголовков вкладок: .tabs label { display: inline-block; padding: 12px 25px; margin-right: 5px; cursor: pointer;...»)
 
Нет описания правки
 
(не показано 10 промежуточных версий этого же участника)
Строка 1: Строка 1:
<tabs>
<tab name="Тест">
супер тест
</tab>
<tab name="Тест 2">
мега тест
</tab>
</tabs>
{{#css:
<style>
<style>
/* Стили для контейнера вкладок */
/* Стили для контейнера вкладок */
.tabs {
.tabs {
     position: relative;
     position: static;
     margin: 20px 0;
     margin: 20px 0;
}
/* Скрываем оригинальные radio-кнопки */
.tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}
}


Строка 18: Строка 19:
     display: inline-block;
     display: inline-block;
     padding: 12px 25px;
     padding: 12px 25px;
     margin-right: 5px;
     margin-right: 10px;
     cursor: pointer;
     cursor: pointer;
    transition: all 0.3s ease;
     color: #ffffff;
     color: #ffffff;
     background: #8B0000;
     background: #8B0000;
Строка 26: Строка 26:
     border-bottom: none;
     border-bottom: none;
     border-radius: 5px 5px 0 0;
     border-radius: 5px 5px 0 0;
    transition: all 0.3s ease-out;
     position: relative;
     position: relative;
     top: 1px;
     top: 1px;
Строка 36: Строка 37:
     background: #6A0000;
     background: #6A0000;
     color: #fff;
     color: #fff;
     border-color: #5d3954;
     border-color: #630000;
    z-index: 2;
}
}


Строка 49: Строка 49:
     display: none;
     display: none;
     padding: 20px;
     padding: 20px;
     border: 1px solid #5d3954;
     border: 1px solid #850000;
     background: rgba(23, 32, 38, 1);
     background: rgba(112, 46, 46, 1);
     color: white;
     color: white;
     border-radius: 0 5px 5px 5px;
     border-radius: 0 5px 5px 5px;
Строка 75: Строка 75:
     padding: 8px;
     padding: 8px;
     text-align: left;
     text-align: left;
     background-color: rgba(23, 32, 38, 1);
     background-color: rgba(112, 46, 46, 1);
}
}


.wikitable th {
.wikitable th {
     color: white;
     color: black;
     background-color: #8B0000;
     background-color: #8B0000;
}
}
</style>
</style>


<div class="tabs">
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1">Вкладка 1</label>
    <div class="tab-content">
        <!-- Содержимое первой вкладки -->
        <table class="wikitable">
            <tr>
                <th>Заголовок</th>
                <th>Таблицы</th>
            </tr>
            <tr>
                <td>Стилизованная</td>
                <td>Ячейка</td>
            </tr>
        </table>
    </div>


    <input type="radio" name="tabs" id="tab2">
}}
    <label for="tab2">Вкладка 2</label>
    <div class="tab-content">
        <!-- Содержимое второй вкладки -->
    </div>
</div>

Текущая версия от 15:14, 1 апреля 2025

супер тест

мега тест