Подкомпонент для отрисовки кнопки в шапке – передаётся в свойство before и/или after компонента PanelHeader.

Контент

В качестве содержимого компонента передавайте в свойство children либо иконку ↗, либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для android.

Обратите внимание, что для планшетов и десктопов рекомендуется использовать кнопки размером 24px, а для мобильных устройств - размером 28px (возможно, будет полезен AdaptiveIconRenderer).

Если нужно несколько кнопок в ряд, то используйте React.Fragment:

Пресеты

PanelHeaderBack

Кнопка назад в экранах в рамках одного сценария (View). Внутри инкапсулирована логика показа нужной иконки для платформы. Также можно передать свойство label, для отображения текста, который будет виден на платформах vkcom и iOS, но будет скрыт на Android. С помощью свойств hideLabelOnVKCom и hideLabelOnIOS можно также визуально скрыть label на соответствующих платформах, он будет виден только для скринридеров.

PanelHeaderClose

Кнопка “Отмена” в модальных окнах для закрытия текущего View в рамках View. На iOS будет показан текст, передаваемый как label, на Android и Desktop - <Icon28CancelOutline /> или <Icon24CancelOutline />. Если передать свойство label, то на Android и Desktop он будет скрыт, но виден для скринридеров.

PanelHeaderEdit

Кнопка “Редактировать”. Принимает свойство isActive, которое определяет состояние кнопки (включен ли режим редактирования). Для указания кастомных текстов для состояний можно использовать соответствующие свойства doneLabel и editLabel. Данные тексты будут видны на iOS, а на Android и Desktop они будет скрыты, но видны для скринридеров.

PanelHeaderSubmit

Кнопка “Готово” в модальных окнах для закрытия текущего View в рамках View и сохранения какого-либо результата. На iOS будет показан текст, передаваемый как label, на Android и Desktop - <Icon28DoneOutline /> или <Icon24DoneOutline />. Если передать свойство label, то на Android и Desktop текст будет скрыт, но виден для скринридеров.