Кастомизация блока popup от dropdown

Форум /

Цель: реализовать всплывающие подсказки в таблице при клике на иконку (если сравнивать, то тоже самое можно увидеть на маркете в информации о товаре).

@voischev подсказал, что лучше реализовывать не через popup, а через dropdown. Отсюда вопрос, как кастомизировать тот popup который вызывается через dropdown? Особенно интересует:

1) как установить положение для popup (которое по умолчанию bottom-left). 2) Как правильно изменить внешний вид. 3) В качестве посредника между ссылками и попапами может выступать таблица? 4) Такая конструкция считается годной или как то иначе нужно?

{
    elem : 'th',
    tag : 'th',
    content : [
        '1 year',
        {
            block : 'dropdown',
            mix : { block : 'hint', elem : 'handle' },
            directions : ['right-center'],
            mods : { switcher : 'link', theme : 'project', size : 's' },
            switcher : '',
            popup : 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
        }
    ]
}

8 years ago

voischev

Через попап конечно тоже можно, но я посоветовал использовать тебе дропдаун что бы тебе было не нужно писать похожи код который уже написан в блоке дропдаун.

В доке про это не написано, но кажется можно делать так:

{
    elem : 'th',
    tag : 'th',
    content : [
        '1 year',
        {
            block : 'dropdown',
            mix : { block : 'hint', elem : 'handle' },
            mods : { switcher : 'link', theme : 'project', size : 's' },
            switcher : { block: 'link', content: { block: 'icon' }},
            popup : {
                block: 'popup',
                mods: {},
                direction: [...],
                content: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.'
            }
        }
    ]
}

8 years ago

romanslonov

@voischev Спасибо Вань. А кастомизировать лучше через микс? Через тему копипаст получится.

8 years ago

voischev

Почему через модификатор копипаст получится?

Через микс тоже норм. Но я по моему делал это через модификатор и там не было кописаста

8 years ago

voischev

Если не хочется писать много раз одно и тоже в каждой ячейки. Это все можно унести в шаблон для элемента.

{
    elem : 'th',
    tag : 'th',
    content : [
        '1 year',
        { block: 'hint', elem: 'handler', text: 'Скидка 30% на новую коллекцию. Для активации акции нужно ввести промокод.' }
    ]
}

шаблон

block('hint').elem('handle').replace()(function() {
    return {
            block : 'dropdown',
            mix : { block : 'hint', elem : 'handle' },
            mods : { switcher : 'link', theme : 'project', size : 's' },
            switcher : { block: 'link', content: { block: 'icon' }},
            popup : {
                block: 'popup',
                mods: {},
                direction: [...],
                content: this.ctx.text
            }
        };
})

8 years ago

romanslonov

@voischev Благодарю.

В продолжение темы про popup. Ведет он себя странно на мобильниках. Вот так выглядит, например, при настройках directions : ['left-bottom', 'bottom-center']. Причем принимает второе положение только после скролла. Почему он вылазит за пределы то?

Прокрутки горизонатльной у страницы нету.

Чтобы оставлять комментарии, необходимо авторизоваться.