-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
60dc16f
commit 891cc6a
Showing
16 changed files
with
2,207 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| ## Button | ||
|
|
||
| Компонент, с помощью которого можно вызвать какое-либо действие и который может отображать текст с иконками. | ||
|
|
||
| ### Свойства и типы | ||
|
|
||
| | Название свойства | Тип | Значение по умолчанию | Описание | | ||
| | ----------------- | ---------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | style | Style | - | Объект для стилизации компонента | | ||
| | spacing | Spacing | 'packed' | Расположение контента внутри кнопки | | ||
| | value | string | - | Значение кнопки | | ||
| | children | ReactNode | - | Контент кнопки | | ||
| | text | string | - | Текстовая надпись | | ||
| | contentLeft | ReactNode | - | Слот для контента слева, например `Icon` | | ||
| | contentRight | ReactNode | - | Слот для контента справа, например `Icon` | | ||
| | isLoading | boolean | - | Состояние загрузки | | ||
| | loader | ReactNode | - | Слот для контента загрузки | | ||
| | stretching | Stretching | 'auto' | Поведение ширины кнопки. Может принимать три значения: fixed - кнопка фиксированной ширины; filled - кнопка занимает всю доступную ширину auto - кнопка растягивается в зависимости от контента | | ||
| | disabled | boolean | - | Кнопка неактивна | | ||
| | pin | Pin | 'square-square' | Скругление border-radius | | ||
| | view | string | - | Вид кнопки | | ||
| | size | string | - | Размер кнопки | | ||
|
|
||
| #### Расширенные типы | ||
|
|
||
| Дополнительное описание типов | ||
|
|
||
| ```ts | ||
| type Spacing = 'packed' | 'space-between'; | ||
|
|
||
| type Stretching = 'fixed' | 'filled' | 'auto'; | ||
|
|
||
| type Pin = | | ||
| | 'square-square' | ||
| | 'square-clear' | ||
| | 'clear-square' | ||
| | 'clear-clear' | ||
| | 'clear-circle' | ||
| | 'circle-clear' | ||
| | 'circle-circle' | ||
| ``` | ||
| #### Взаимоисключающие свойства | ||
| Свойство `value` - это значение кнопки. Оно отображается справа от основного текста. | ||
| `value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя. | ||
| ### Стилизация | ||
| Для того, чтобы изменить внешний вид компонента, необходимо использовать свойство `style`, в который можно передать объекты, содержащие наборы стилей типа `ViewStyle` или `TextStyle`. | ||
| Пример стилизации компонента находится в разделе ниже. | ||
| ### Примеры использования | ||
| #### Стандартный пример | ||
| ```ts | ||
| import { Button } from '@salutejs/plasma-star-ds-tv'; | ||
| import { IconPlasma } from '@salutejs/plasma-icons-native'; | ||
|
|
||
| const App = () => { | ||
| const onPress = () => { | ||
| alert('Произошёл onPress'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Button | ||
| text="Hello" | ||
| view="default" | ||
| size="m" | ||
| onPress={onPress} | ||
| contentLeft={<IconPlasma />} | ||
| contentRight={<IconPlasma />} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` | ||
|
|
||
| #### Пример с использованием children | ||
|
|
||
| ```ts | ||
| import { View, Text } from 'react-native'; | ||
| import { Button } from '@salutejs/plasma-star-ds-tv'; | ||
| import { IconPlasma } from '@salutejs/plasma-icons-native'; | ||
|
|
||
| const App = () => { | ||
| const onPress = () => { | ||
| alert('Произошёл onPress'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Button text="Hello" view="default" size="m" onPress={onPress}> | ||
| <View> | ||
| <IconPlasma /> | ||
| <Text>Text</Text> | ||
| <IconPlasma /> | ||
| </View> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` | ||
|
|
||
| #### Пример с переопределением стилей | ||
|
|
||
| ```ts | ||
| import { Button } from '@salutejs/plasma-star-ds-tv'; | ||
| import { IconPlasma } from '@salutejs/plasma-icons-native'; | ||
|
|
||
| const App = () => { | ||
| const onPress = () => { | ||
| alert('Произошёл onPress'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Button | ||
| text="Hello" | ||
| view="default" | ||
| size="m" | ||
| onPress={onPress} | ||
| contentLeft={<IconPlasma />} | ||
| contentRight={<IconPlasma />} | ||
| style={{ | ||
| background: { | ||
| backgroundColor: 'green', | ||
| }, | ||
| root: { | ||
| height: 100, | ||
| margin: 24, | ||
| }, | ||
| value: { | ||
| color: 'red', | ||
| }, | ||
| text: { | ||
| color: 'orange', | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| ## Carousel | ||
|
|
||
| Компонент, который может принимать любые элементы и отображать их в виде галереи. | ||
|
|
||
| ### Свойства и типы | ||
|
|
||
| | Название свойства | Тип | Значение по умолчанию | Описание | | ||
| | ----------------------- | -------------------------------- | --------------------- | -------------------------------------------------------- | | ||
| | style | Style | - | Объект для стилизации компонента | | ||
| | view | string | - | Вид ячейки | | ||
| | size | string | - | Размер ячейки | | ||
| | align | AlignProp | 'center' | Позиционирование активного элемента при скролле | | ||
| | defaultFocusedItemIndex | number | - | Индекс элемента, на котором будем с позиционирован фокус | | ||
| | itemsOverflow | ItemsOverflow | 'hidden' | Отображение элементов за пределами контейнера | | ||
| | itemsGap | number | - | Отступ между элементами | | ||
| | items | Array<T> | - | Список элементов | | ||
| | selectedItemIndex | number | - | Индекс выбранного элемента | | ||
| | renderItem | (item: T) => ReactNode | - | Функция для отображения элемента | | ||
| | onItemSelect | (index: number, item: T) => void | - | Обработчик выбора элемента | | ||
| | onItemFocus | (index: number, item: T) => void | - | Обработчик фокуса на элемент | | ||
|
|
||
| #### Расширенные типы | ||
|
|
||
| Дополнительное описание типов | ||
|
|
||
| ```ts | ||
| type AlignProp = 'left' | 'center' | 'right'; | ||
|
|
||
| type ItemsOverflow = 'hidden' | 'visible'; | ||
|
|
||
| interface Sizes { | ||
| itemWidth: number; | ||
| itemHeight: number; | ||
| paddingHorizontal: number; | ||
| paddingVertical: number; | ||
| carouselWidth: number; | ||
| } | ||
| ``` | ||
|
|
||
| ### Стилизация | ||
|
|
||
| Для того, чтобы изменить внешний вид компонента, необходимо использовать свойство `style`, в который можно передать объекты, содержащие наборы стилей типа `ViewStyle`. | ||
|
|
||
| Пример стилизации компонента находится в разделе ниже. | ||
|
|
||
| ### Примеры использования | ||
|
|
||
| #### Стандартный пример | ||
|
|
||
| ```ts | ||
| import { memo } from 'react'; | ||
| import { View, StyleSheet } from 'react-native'; | ||
| import { Carousel, H2, BodyM } from '@salutejs/plasma-star-ds-tv'; | ||
|
|
||
| const items = Array.from({ length: 15 }).map((_, i) => ({ | ||
| title: `Title #${i + 1}`, | ||
| subtitle: `Subtitle ${i + 1}`, | ||
| })); | ||
|
|
||
| type CustomItem = typeof items[number]; | ||
|
|
||
| const PseudoCard = memo(({ item, focused }: { item: CustomItem; focused?: boolean }) => { | ||
| const styles = StyleSheet.create({ | ||
| root: { | ||
| width: 300, | ||
| height: 150, | ||
| padding: 16, | ||
| }, | ||
| background: { | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| bottom: 0, | ||
| right: 0, | ||
| borderRadius: 16, | ||
| backgroundColor: focused ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.12)', | ||
| transform: [ | ||
| { | ||
| scale: focused ? 1.05 : 1, | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
|
|
||
| return ( | ||
| <View style={styles.root}> | ||
| <View style={styles.background} /> | ||
| <H2 focused={focused}>{item.title}</H2> | ||
| <BodyM focused={focused}>{item.subtitle}</BodyM> | ||
| </View> | ||
| ); | ||
| }); | ||
|
|
||
| const App = () => { | ||
| const renderItem = (item: CustomItem) => <PseudoCard item={item} />; | ||
|
|
||
| const onFocus = (index: number, item: CustomItem) => { | ||
| console.log('onFocus', index, item); | ||
| }; | ||
|
|
||
| const onPress = (index: number, item: CustomItem) => { | ||
| alert(`Press on ${index} item: ${JSON.stringify(item)}`); | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={{ flex: 1, padding: 50 }}> | ||
| <Carousel items={items} renderItem={renderItem} onItemFocus={onFocus} onItemPress={onPress} /> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` | ||
|
|
||
| #### Пример с переопределением стилей | ||
|
|
||
| ```ts | ||
| import { Carousel } from '@salutejs/plasma-star-ds-tv'; | ||
|
|
||
| const App = () => { | ||
| return ( | ||
| <Carousel | ||
| renderItem={() => null} | ||
| items={[]} | ||
| style={{ | ||
| root: { | ||
| padding: 40, | ||
| }, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| ``` |
Oops, something went wrong.