docs(View): add info about correct Panel order (#6046)

* docs(View): add info about correct Panel order * fix(review): reword text about order * Update packages/vkui/src/components/View/Readme.md Co-authored-by: Evgenia Polozova <[email protected]> * Update packages/vkui/src/components/View/Readme.md Co-authored-by: Evgenia Polozova <[email protected]> * Update packages/vkui/src/components/View/Readme.md Co-authored-by: Evgenia Polozova <[email protected]> * Update packages/vkui/src/components/View/Readme.md Co-authored-by: Evgenia Polozova <[email protected]> --------- Co-authored-by: Evgenia Polozova <[email protected]>
VKCOM · Nov 13, 2023 · fa3bcca · fa3bcca
1 parent 79ce572
commit fa3bcca
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/packages/vkui/src/components/View/Readme.md b/packages/vkui/src/components/View/Readme.md
@@ -1,10 +1,28 @@
-Базовый компонент для создания панелей. В качестве `children` принимает коллекцию `Panel`.
-У каждой `Panel` должен быть уникальный `id`. Свойство `activePanel` определяет какая `Panel` активна.
-
-При смене значения свойства `activePanel` происходит плавный переход от одной панели к другой.
-Как только он заканчивается, вызывается свойство-функция `onTransition`.
-
-Чтобы понять был это переход вперёд или назад можно воспользоваться хуком [`useNavDirection()`](#/View?id=usenavdirection_example). Этот хук работает даже если анимации выключены (`<ConfigProvider transitionMotionEnabled={false}>`).
+Базовый компонент для создания панелей.
+
+- В качестве `children` принимает коллекцию [Panel](#/Panel). У каждой [Panel](#/Panel) должен быть
+  уникальный `id`.
+- Свойство `activePanel` принимает `id` той [Panel](#/Panel), которая должна быть активна. При смене
+  значения происходит плавный переход от одной панели к другой. Как только он заканчивается,
+  вызывается свойство-функция `onTransition`. При возврате на предыдущую панель восстанавливает
+  в ней последнее состояние скролла.
+
+> **Важно**
+>
+> Чтобы анимация переходов происходила правильно, порядок [Panel](#/Panel) в вёрстке должен соответствовать их
+> подразумеваемому роутингу. Рассмотрим на примере ниже.
+>
+> ```jsx static
+> <View activePanel="1">
+>   <Panel id="1" />
+>   <Panel id="2" />
+>   <Panel id="3" />
+> </View>
+> ```
+>
+> В примере навигация между панелями будет в порядке 1 -> 2 -> 3.
+
+Чтобы понять, был это переход вперёд или назад, можно воспользоваться хуком [`useNavDirection()`](#/View?id=usenavdirection_example). Этот хук работает, даже если анимации выключены (`<ConfigProvider transitionMotionEnabled={false}>`).
 
 ```jsx
 const [activePanel, setActivePanel] = useState('panel1');