Отображение панели карты при нажатии гиперссылки с пользовательским интерфейсом Kendo в Angular ⇐ CSS

[Anonymous]

Я использую Angular 14 и Kendo Dialog UI 7.1.2
При нажатии на ссылку я должен отобразить панель карты чуть ниже ссылки, как показано на снимке экрана ниже. Кнопки «Развернуть» и «Закрыть» должны быть как на скриншоте. Когда панель открывается, на ней не должно быть эффекта тени.


Код, связанный с этим, приведен ниже...

Код: Выделить всё

private maximizeWindow(): void {
// Your maximize logic goes here
console.log('Maximize button clicked');
}

private onWindowClose(): void {
if (this.dialogRef) {
this.dialogRef.close();
}
}

public openWindow(): void {
this.dialogRef = this.dialogService.open({
content: 'Window content goes here',
width: 400,
height: 200,
});
}



My Window
Maximize
Close

Код CSS приведен ниже.

Код: Выделить всё

.custom-titlebar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 5px 10px;
}

.custom-action {
background: none;
border: none;
cursor: pointer;
outline: none;
margin-left: 10px;
}

С помощью этого кода оно отображается как окно в центре экрана с эффектом тени. Кроме того, я хотел бы разместить MapComponent для отображения карты, которая уже существует. Теперь отображается пустое окно.
РЕДАКТИРОВАТЬ
Я изучаю 3 вещи...

• Чтобы отобразить окно рядом с гиперссылкой.
• Чтобы отобразить компонент карты внутри окна.
• Использовать пользовательские кнопки для развертывания и закрытия.

Будем очень признательны за любую помощь. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/777 ... in-angular