PFM Shared

Appearance

Кнопки ​

Базовая Кнопка ​

Кнопка должна растягиваться ( Fill container ) на ширину автолэйаута, оборачивающего кнопку

WARNING

На данный момент анимировать фоновый градиент в моно-цвет по хаверу невозможно.

Касается только Primary

primary

Button

secondary

Button

teritary

Button

Slots ​

В компоненте имеется 2 слота.

iconLeft и iconRight, слоты используются для проброса иконок на кнопки

primary

secondary

teritary

Иконка слева

Иконка справа

С икокной

Props ​

ts
interface Props {
    text: string //  текст кнопки
    type: 'primary' | 'secondary' | 'teritary' // вид кнопки
    disabled?: boolean // флаг состояния
    action?: Nullable<()=> void>
    adaptive?: boolean // если True - кнопка будет занимать 
    // 100% доступного пространства родителя
}

Важно

Если action принимает аргумент, например при отрисовки списка, можно обернуть action в анонимную функцию Пример:

vue
<PfmButton 
    text="Button" 
    :type="button.type" 
    :disabled="!button.disabled"
    :action="()=>{testAction(button.type)}" // [!code focus]
>

А в случае если action не принимает аргументы, достаточно просто передать его пропсом

vue
<PfmButton 
    text="Button" 
    :type="button.type" 
    :disabled="!button.disabled"
    :action="standartAction" // [!code focus]
>

Кнопки фиксированы по высоте, ширина подстраивается под размер контейнера

Disable

Map

Link

Показать на карте

37

Адресс

Props ​

ts
    interface Props {
        text: string; // текст для отображение в левой части кнопки
        action?: (() => void) | null; // действие при нажатии на кнопку
        disabled?: boolean;
        type: 'Map' | 'Link'; // тип кнопки
        count?: Nullable<number>; // счетчик в правой части кнопки
        bottomText: string; // тест снизу кнопки (копируется при нажатии)
        textIsCopiedText: string; // текст "скопировано"
    }

По поводу текста

Текст Прокидывается пропсами что бы не тащить локализацию в shared