Управление позицией AssistantBar
Обновлено 22 ноября 2023
AssistantBar зафиксирован в окне браузера, но вы можете управлять его отступами, шириной и цветом фона.
Для этого передавайте нужные CSS-свойства в необязательное свойство displayingOptions
. displayingOptions
принимает
следующие свойства с типом string:
- top;
- bottom;
- left;
- right;
- width;
- background;
- backgroundImage.
Обратите внимание, что у диалога пользователя с ассистентом прозрачный фон. Вы можете установить другой цвет самостоятельно.
Фоновый цвет можно установить:
- с помощью параметров
background
иbackgroundImage
; - создав собственный фоновый блок
position=fixed
— в этом случае может понадобиться подписка на событие открытия и закрытия шторки ассистента (свойствоonChatToggle: (isOpen: boolean) => void
).
Пример использования AssistantBar с передачей фонового цвета:
import React, { FC } from 'react';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';
const displayingOptions = {
background,
backgroundImage: gradient,
};
export const AssistantBarWithBackground: FC = () => {
return <AssistantBar {...props} displayingOptions={displayingOptions} />;
};
Пример использования AssistantBar ограниченной ширины с общим фоном для всей страницы:
import React, { FC, useState, useCallback } from 'react';
import styled from 'styled-components';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';
import { Content } from '../components/Content';
const displayingOptions = {
left: '20%',
width: '60%',
};
const StyledContentContainer = styled.div<{ isOpen: boolean }>`
height: 100vh;
background: ${background};
${({ isOpen }) => (isOpen ? `background-image: ${gradient};` : '')};
`;
export const AssistantBarWithBackground: FC = () => {
const [isOpen, setIsOpen] = useState(false);
const handleChatToggle = useCallback((isOpen) => {
setIsOpen(isOpen);
}, []);
return (
<StyledContentContainer isOpen={isOpen}>
<AssistantBar {...props} displayingOptions={displayingOptions} onChatToggle={handleChatToggle} />
<Content />
</StyledContentContainer>
);
};