Шаблон:LinkCard: различия между версиями

Материал из Space Station 14 Вики
Интерактивная навигация по истории
← Предыдущая правка
ВизуальныйВики-текст
мНет описания правки
мНет описания правки
 
(не показаны 32 промежуточные версии этого же участника)
Строка 1: Строка 1:
<div class="link-card noExternal mobile-image brightness-overlay {{#if:{{{SideStyle|}}}|link-card__side}}" style="--background-color:{{{background-color|#343441{{{transparency|f0}}}}}}> {{#if:{{{external|}}} | [{{{external|}}} <span class="StupidButton"></span>] | {{#if:{{{link|}}} | [[{{{link|}}}|<span class="StupidButton"></span>]] }} }}
<templatestyles src="LinkCard/styles.css" /><div class="link-card noExternal mobile-image brightness-overlay {{#if:{{{горизонт_стиль|}}}|link-card__side}} {{#if:{{{ссылка|}}}{{{внешняя_ссылка|}}}|link-card-hover}}" style="
<div class="link-card__image">[[Файл:{{{image|BikeHorn.png}}}|{{{pixel|64x64px}}}|link=]]</div>
--bg-color:{{{фон|var(--theme-bg-color-300)}}};
<div class="link-card__name">{{{name|Название}}}</div>
--alpha:{{{прозрачность|95%}}};
</div>
--font-size:{{{размер_текста|var(--font-size-xxs)}}}
<!--
">{{#if: {{{внешняя_ссылка|}}} | [{{{внешняя_ссылка|}}} <span class="StupidButton"></span>] | {{#if: {{{ссылка|}}} | [[{{{ссылка|}}}|<span class="StupidButton"></span>]] }} }}
 
<div class="link-card__image">{{{изображение|}}}</div>
-->{{#css:
{{#if: {{{название|}}} | <div class="link-card__name">{{{название}}}</div> }}{{#if: {{{пин|}}} | <div class="link-card__pin" style="position:absolute;">{{{пин}}}</div> }}
.link-card {
</div><noinclude>{{doc}}</noinclude>
    display: inline-block;
    position: relative;
    min-width: 110px;
    text-align: center;
    border: 1px outset rgb(0 0 0 / 30%);
    border-radius: 0.3em;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
    background: var(--background-color);
    transition: all 0.15s ease;
}
 
.link-card__image {
    position: relative;
    padding: 6px;
    align-content: center;
}
 
.link-card__name {
    position: relative;
    width: 100%;
    padding: 2px 4px;
    font-size: 0.8em;
    box-sizing: border-box;
    background: #00000040;
    font-weight: bold;
}
 
@media (min-width: 800px) {
    .link-card:not(.link-card__side):hover {
        box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-4px);
    }
}
 
@media (max-width: 800px) {
    .link-card {
        display: flex;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
        width: 100%;
        text-align: left;
    }
 
    .link-card__name {
        background: #00000020;
        padding: 4px 8px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
 
    .link-card__image {
        padding: 4px;
    }
}
 
.link-card__side {
    display: flex ;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
    width: 100%;
    text-align: left;
}
 
.link-card__side .link-card__name {
    background: #00000020;
    padding: 4px 8px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}
 
.link-card__side .link-card__image {
    padding: 4px;
}
 
.link-card__side img {
    width: 32px;
    height: 32px;
}
}}

Текущая версия от 16:56, 28 октября 2025

Документация
[просмотр | править | история | обновить]
{{LinkCard 
|название =
|изображение =
|ссылка = 
|фон =
|прозрачность = 
|пин = 
|размер_текста =  
}}

Карточка ссылки с изображением.

Параметры шаблона

ПараметрОписаниеТипСтатус
Названиеназвание

Текст подписи карточки.

Строковый (без форматирования)обязательный
Изображениеизображение

Wikitext, вставляемый в блок изображения.

Пример
[[Файл:MobMouse2.png|64px]]
Строковый (без форматирования)обязательный
Внутренняя ссылкассылка

Название внутренней страницы вики.

Строковый (без форматирования)обязательный
Внешняя ссылкавнешняя_ссылка

Полный внешний URL. Если задана, карточка будет вести на внешний сайт (приоритет над параметром «ссылка»).

URLнеобязательный
Фонфон

CSS-значение фонового цвета. Рекомендуется использовать с «Шаблон:Цвет».

По умолчанию
var(--theme-bg-color-300)
Строковый (без форматирования)необязательный
Прозрачностьпрозрачность

Альфа-значение/прозрачность в формате, пригодном для CSS-переменной.

По умолчанию
95%
Строковый (без форматирования)необязательный
Горизонтальный стильгоризонт_стиль

Если задано (любое значение), к карточке добавляется класс для горизонтального оформления (link-card__side).

Строковый (без форматирования)необязательный
Пин (метка)пин

Дополнительная картинка, которая будет отображаться в правом-врехнем углу поверх карточки. Рекомендуется делать её небольшого размера.

Строковый (без форматирования)необязательный
Размер текстаразмер_текста

CSS-значение размера шрифта (например '14px' или CSS-переменная, которую предпочтительно использовать).

По умолчанию
var(--font-size-xxs)
Строковый (без форматирования)необязательный

Во избежание поломок страниц, использующих этот шаблон, экспериментируйте в песочнице (создать | зеркало) или своём личном пространстве.
Пожалуйста, добавляйте категории на подстраницу /doc. Подстраницы этого шаблона.

Источник — https://station14.ru/index.php?title=Шаблон:LinkCard&oldid=109205