Комментарий от animeshnik

Комментарий #9807361
animeshnik_ALT

в топике Как создать космически-эпичное "Обо мне" и не только...19 июля 2023

Часть 3

>8<

Фикс для WYSIWUG

[div=button-left-1][url=ссылка]Name[/url][b][/b][/div]

Готовый код на 6 кнопок

>9<

Размер

@media screen and (min-width: 900px) {
  .id-01 {
    width: calc(100% / 5 - 1 * 1%); /*где 5 - кол-во в строке*/
  }
}

>10<

.id-0 img.b-poster, .id-0 .b-image.b-poster img {
  width: unset; /*Картинка влезает по высоте*/
}
.id-0_control-block::after {
  display: none; /*удаляю череп*/
}
.id-0__button.active {
    background: rgba(var(--bright-color), 0.8); /*Цвет активного кружочка*/
}

>11<

[div=use-tabs --ripple --centered --On]Все табы[/div] Указывается 1 раз и содержит внутри себя все табы.
[div=to-process data-dynamic=switcher data-switcher=tab1]Название таба[/div] Это сама кнопка. Когда она активна, к ней ещё добавляется класс active.
[div=CUSTOM_PANELS_CONTAINER]куча табов[/div] Содержит в себе остальные [div=CUSTOM_PANEL][/div]. При создании табов внутри таба указывается вновь.
[div=CUSTOM_PANEL]контент[/div] Тут находится весь контент внутри одного таба. Для следующего таба вначале закрываем предыдущий, а потом создаём следующий [div=CUSTOM_PANEL]контент[/div] и так далее. Самое сложное - это не запутаться в куче [/div].
При создании вложенных табов добавляем дополнительный блок [div=custom-panel], а также меняем номер у data-switcher=tab1 на data-switcher=tab2 и т.д. для того, чтобы вложенный таб был автоматически открыт при переходе. В общем и целом, экспериментируйте и сами всё рано или поздно поймете.

как изменять табы

/* border у обычного таба */
.use-tabs.--On > [data-dynamic], .custom-panel > [data-dynamic] {
    border: 1px solid rgba(var(--light-color), 1);
}
/* border у активного таба */
.use-tabs > [data-dynamic].active, .custom-panel > [data-dynamic].active {
  border-color: #6c6c6c;
  box-shadow: 0 0 10px 1px #323232;
}
/* border у обычного таба, на который навели мышкой */
.use-tabs > [data-dynamic]:hover, .custom-panel > [data-dynamic]:hover {
    background: hsla(var(--c-tab) var(--l-background) / 0%);
    border-color: #606060;
    box-shadow: 0 0 5px 1px #123;
}
/* border у активного таба, на который навели мышкой */
.use-tabs > [data-dynamic].active:hover, .custom-panel > [data-dynamic].active:hover {
    border-color: rgba(var(--light-color), 1);
}
/* Нективный вложенный таб */
.custom-panel > [data-dynamic]:not(.active) {
    border: none;
    box-shadow: none;
    border-bottom: 1px solid rgba(var(--light-color), 1);
    border-radius: 0px;
    background: transparent;
}
/* Нективный вложенный таб, наведенный */
.custom-panel > [data-dynamic]:not(.active):hover {
    background: rgba(var(--block-color), 0.7);
}

Код на 5 табов + 4 вложенных + 2 вертикальных:

[div=use-tabs  --ripple --centered --On]
[div=to-process active data-dynamic=switcher data-switcher=tab1]Название 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Название 2[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Название 3[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Название 4[/div]
[div=to-process data-dynamic=switcher data-switcher=tab1]Название 5[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
[div=use-tabs  --ripple --centered --vertical --Fat]
[div=to-process active data-dynamic=switcher data-switcher=tab4]Вертикальный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab4]Вертикальный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вертикального таба.
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вертикального таба.
[/div]
[/div][/div][/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 1[/div]
[div=to-process data-dynamic=switcher data-switcher=tab2]Вложенный таб 2[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри первого вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри второго вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL][div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 3[/div]
[div=to-process data-dynamic=switcher data-switcher=tab3]Вложенный таб 4[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
Контент внутри третьего вложенного таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри четвертого вложенного таба
[/div]
[/div]
[/div]
[/div]
[div=CUSTOM_PANEL]
Контент внутри 4 таба
[/div]
[div=CUSTOM_PANEL]
Контент внутри 5 таба
[/div]
[/div]
[/div]

>12<

Изменить значок

.qa-panel:after {
  content: "♥";
}
.qa-panel {
  color: red; /*Цвет*/
}

Значок справа

.qa-panel {
  left: unset;
  right: 3%;
  top: 9.375rem;
}
.qa-link:before {
    left: unset;
    right: 0;
}
.qa-link:hover:before {
    left: unset;
    right: 4.25rem;
}

Текст

.qa-link:before {
  color: white;
}

Ответы

Нет комментариев

Твой комментарий

Комментарий #9807361 animeshnik_ALT

Комментарий #9807361
animeshnik_ALT