Skip to content

docs fixes #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 24, 2021
Merged

docs fixes #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/builldingCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ function CardComponent(){
<Box
rounded="lg"
overflow="hidden"
width="72"
shadow={1}
_light={{ backgroundColor: 'gray.50' }}
_dark={{ backgroundColor: 'gray.700' }}
Expand Down
2 changes: 1 addition & 1 deletion docs/hidden.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,6 @@ export default function () {

## Props

```ComponentPropTable path=composites,Fab,Fab.tsx
```ComponentPropTable path=primitives,Hidden,index.tsx

```
6 changes: 6 additions & 0 deletions docs/icon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ We provides a set of commonly used interface icons. So you can directly use them

```

<!-- ### Integration with Third Party Icons

```ComponentSnackPlayer path=primitives,Icon,ThirdPartyIcons.tsx

``` -->

## Props

### Icon
Expand Down
2 changes: 2 additions & 0 deletions docs/popOver.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ import { Popover } from 'native-base';

```

<br/>

:::tip Development Tip
You can pass custom backgroundColor using `bg` or `backgroundColor`, `borderColor` and `borderWidth` to Popover.Content.
:::
Expand Down
33 changes: 0 additions & 33 deletions docs/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,39 +45,6 @@ import { Select } from 'native-base';

```

<!--
| Name | Type | Description | Default |
| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| variant | `native`, `styled` | The variant of the select style to use. | `native` |
| placeholder | string | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant). | - |
| \_placeholder | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant). | - |
| selectedValue | string | The default value which is selected. | - |
| onValueChange | function | Callback for on change on the input value. | - |
| selectedItemBg | string | Background color for the selected item (only for styled variant). | `blue.500` |
| \_selectedItem | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant). | - |
| isDisabled | boolean | If true, the button will be disabled (not supported on ios for native variant). | - |
| dropdownIcon | JSX.Element | If given, updates the dropdown Icon (only for styled variant). | - |
| dropdownOpenIcon | JSX.Element | If given, updates the dropdown Icon when opened (only for styled variant). | - |
| dropdownCloseIcon | JSX.Element | If given, updates the dropdown Icon when closed (only for styled variant). | - |
| \_ios | _StyleProps_ | Props which you only want to pass to ios device. | - |
| \_android | _StyleProps_ | Props which you only want to pass to android device. | - |
| \_web | _StyleProps_ | Props which you only want to pass to web device. | - |
| \_item | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant). | - |
| androidMode <AndroidBadge/> | `dialog`, `dropdown` | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant). | `dialog` |
| androidIconColor <AndroidBadge/> | string | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | - |
| androidPrompt <AndroidBadge/> | string | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant). | - |

**Select** can be styled using pseudo style props like `_isInvalid`, `_isDisabled` and `_hover`. -->

<!-- ### Select Item

| Name | Type | Description | Default |
| ---------- | ---------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
| label | string | The label which will be displayed. | - |
| value | string | The value to be used for the item. This is the value that will be returned on form submission. | - |
| isDisabled | boolean | If true, the item will be disabled (only for `styled` variant). | - |
| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | -->

## Styling

<ComponentTheme name="select" />
Expand Down
24 changes: 15 additions & 9 deletions docs/useColorMode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,30 +16,36 @@ import { useColorMode } from 'native-base';
```SnackPlayer name=useColorMode
import React from 'react';
import {
NativeBaseProvider,
VStack,
Heading,
useColorMode,
Text,
Button,
HStack,
Avatar,
Center,
useColorModeValue,
Text,
NativeBaseProvider,
} from 'native-base';

function UseColorMode() {
function ColorModeExample() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Center flex={1} bg={colorMode === 'dark' ? 'black' : 'white'}>
<Text fontSize="lg" display="flex">
The active color mode is <Text bold>{colorMode}</Text>
<Center flex={1} bg={useColorModeValue('warmGray.50', 'coolGray.800')}>
<Text fontSize="lg" display="flex" mb="20">
The active color mode is{' '}
<Text bold fontSize="18px">
{useColorModeValue('Light', 'Dark')}
</Text>
</Text>
<Button m="2" onPress={toggleColorMode}>Toggle</Button>
<Button onPress={toggleColorMode}>Toggle</Button>
</Center>
);
}

export default function () {
return (
<NativeBaseProvider>
<UseColorMode />
<ColorModeExample />
</NativeBaseProvider>
);
}
Expand Down
7 changes: 3 additions & 4 deletions docs/useDisclosure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,12 @@ function UseDiscloseExample() {
</Modal.Header>
<Modal.Body>
This will remove all data relating to Alex. This action cannot be reversed. Deleted data can not be recovered.
<Input mt="4" placeholder="Lorem ipsum dolor sit" />
</Modal.Body>
<Modal.Footer>
<Button colorScheme="blue" mr="1">
Save
<Button variant="unstyled" mr="1">
Cancel
</Button>
<Button onPress={onClose}>Close</Button>
<Button colorScheme="error" onPress={onClose}>Delete</Button>
</Modal.Footer>
</Modal.Content>
</Modal>
Expand Down
41 changes: 15 additions & 26 deletions docs/useMediaQuery.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useMediaQuery } from 'native-base';

```SnackPlayer name=useMediaQuery%20Usage(max-height)
import React from "react";
import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, AspectRatio, Stack, Heading, Image, Center } from "native-base";

function UseMediaQueryExample() {
const [isSmallScreen] = useMediaQuery({ minHeight: 280, maxHeight: 480 });
Expand All @@ -27,7 +27,6 @@ function UseMediaQueryExample() {
<Box
rounded="lg"
overflow="hidden"
width="72"
borderWidth="1"
shadow={1}
_light={{ backgroundColor: 'gray.50', borderColor: 'coolGray.200' }}
Expand Down Expand Up @@ -142,7 +141,7 @@ function UseMediaQueryExample() {
export default function () {
return (
<NativeBaseProvider>
<Center flex={1}>
<Center flex={1} px="3">
<UseMediaQueryExample />
</Center>
</NativeBaseProvider>
Expand All @@ -154,7 +153,7 @@ export default function () {

```SnackPlayer name=useMediaQuery%20Usage(min-width)
import React from "react";
import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, Stack, AspectRatio, Heading, Image, Center } from "native-base";

function UseMediaQueryExample() {
const [isSmallScreen] = useMediaQuery({ minWidth: 280 });
Expand All @@ -164,7 +163,6 @@ function UseMediaQueryExample() {
<Box
rounded="lg"
overflow="hidden"
width="72"
borderColor="coolGray.200"
borderWidth="1"
_dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}
Expand Down Expand Up @@ -280,7 +278,7 @@ function UseMediaQueryExample() {
export default function () {
return (
<NativeBaseProvider>
<Center flex={1}>
<Center flex={1} px="3">
<UseMediaQueryExample />
</Center>
</NativeBaseProvider>
Expand All @@ -292,25 +290,23 @@ export default function () {

```SnackPlayer name=useMediaQuery%20Usage(orientation)
import React from "react";
import { Text, useMediaQuery, NativeBaseProvider, Center } from "native-base";
import { Text, useMediaQuery, NativeBaseProvider, Box, HStack, Stack, AspectRatio, Heading, Image, Center } from "native-base";

function UseMediaQueryExample() {
const [isLandScape, isPortrait] = useMediaQuery([
{ orientation: 'landscape' },
{ orientation: 'portrait' },
]);
return (
return (
<Box>
{isPortrait ? (
<Box
rounded="lg"
overflow="hidden"
width="72"
shadow={1}
borderWidth="1"
_light={{ backgroundColor: 'gray.50', borderColor: 'coolGray.200' }}
_dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}
>
_dark={{ borderColor: 'coolGray.600', backgroundColor: 'gray.700' }}>
<Box>
<AspectRatio ratio={16 / 9}>
<Image
Expand All @@ -327,8 +323,7 @@ function UseMediaQueryExample() {
position="absolute"
bottom={0}
px="3"
py="1.5"
>
py="1.5">
PHOTOS
</Center>
</Box>
Expand All @@ -343,8 +338,7 @@ function UseMediaQueryExample() {
_dark={{ color: 'violet.300' }}
fontWeight="500"
ml="-0.5"
mt="-1"
>
mt="-1">
The Silicon Valley of India.
</Text>
</Stack>
Expand All @@ -356,8 +350,7 @@ function UseMediaQueryExample() {
<HStack
alignItems="center"
space={4}
justifyContent="space-between"
>
justifyContent="space-between">
<HStack alignItems="center">
<Text color="gray.500" fontWeight="400">
6 mins ago
Expand All @@ -375,8 +368,7 @@ function UseMediaQueryExample() {
overflow="hidden"
shadow={1}
_light={{ backgroundColor: 'gray.50' }}
_dark={{ backgroundColor: 'gray.700' }}
>
_dark={{ backgroundColor: 'gray.700' }}>
<Stack p="2" pt="3" flex="2" space={1}>
<Stack space={2}>
<Heading size="md" ml="-1">
Expand All @@ -388,8 +380,7 @@ function UseMediaQueryExample() {
_dark={{ color: 'violet.300' }}
fontWeight="500"
ml="-0.5"
mt="-1"
>
mt="-1">
The Silicon Valley of India.
</Text>
</Stack>
Expand All @@ -401,15 +392,13 @@ function UseMediaQueryExample() {
<HStack
alignItems="center"
space={4}
justifyContent="space-between"
>
justifyContent="space-between">
<HStack alignItems="center">
<Text
_dark={{ color: 'warmGray.200' }}
fontSize="xs"
color="gray.500"
fontWeight="400"
>
fontWeight="400">
6 mins ago
</Text>
</HStack>
Expand All @@ -425,7 +414,7 @@ function UseMediaQueryExample() {
export default function () {
return (
<NativeBaseProvider>
<Center flex={1}>
<Center flex={1} px="3">
<UseMediaQueryExample />
</Center>
</NativeBaseProvider>
Expand Down
3 changes: 2 additions & 1 deletion src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,8 @@ html[data-theme='dark'] .navbar-small {
.menu__link[href*='/pseudo-props']:after,
.menu__link[href*='/migration/v3.1.0-to-3.2.0']:after,
.menu__link[href*='/strict-mode']:after,
.menu__link[href*='/default-theme']:after {
.menu__link[href*='/default-theme']:after,
.menu__link[href*='/hidden']:after {
content: 'New';
display: inline-block;
position: relative;
Expand Down
33 changes: 0 additions & 33 deletions versioned_docs/version-3.2.0/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,39 +45,6 @@ import { Select } from 'native-base';

```

<!--
| Name | Type | Description | Default |
| -------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
| variant | `native`, `styled` | The variant of the select style to use. | `native` |
| placeholder | string | The placeholder attribute specifies a short hint that describes the expected value of a selected field (only for styled variant). | - |
| \_placeholder | [`TextProps`](text.md#props) | Text props to be applied to placeholder (only for styled variant). | - |
| selectedValue | string | The default value which is selected. | - |
| onValueChange | function | Callback for on change on the input value. | - |
| selectedItemBg | string | Background color for the selected item (only for styled variant). | `blue.500` |
| \_selectedItem | [`TextProps`](text.md#props) | Text prop for selected item (only for styled variant). | - |
| isDisabled | boolean | If true, the button will be disabled (not supported on ios for native variant). | - |
| dropdownIcon | JSX.Element | If given, updates the dropdown Icon (only for styled variant). | - |
| dropdownOpenIcon | JSX.Element | If given, updates the dropdown Icon when opened (only for styled variant). | - |
| dropdownCloseIcon | JSX.Element | If given, updates the dropdown Icon when closed (only for styled variant). | - |
| \_ios | _StyleProps_ | Props which you only want to pass to ios device. | - |
| \_android | _StyleProps_ | Props which you only want to pass to android device. | - |
| \_web | _StyleProps_ | Props which you only want to pass to web device. | - |
| \_item | [`TextProps`](text.md#props) | TextProps to be applied to the label (only for styled variant). | - |
| androidMode <AndroidBadge/> | `dialog`, `dropdown` | On Android, specifies how to display the selection items when the user taps on the picker (only for native variant). | `dialog` |
| androidIconColor <AndroidBadge/> | string | On Android, specifies color of dropdown triangle. Input value can any color from theme like `default.300` (only for native variant). | - |
| androidPrompt <AndroidBadge/> | string | On Android, prompt string for this picker, used on Android in dialog mode as the title of the dialog (only for native variant). | - |

**Select** can be styled using pseudo style props like `_isInvalid`, `_isDisabled` and `_hover`. -->

<!-- ### Select Item

| Name | Type | Description | Default |
| ---------- | ---------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
| label | string | The label which will be displayed. | - |
| value | string | The value to be used for the item. This is the value that will be returned on form submission. | - |
| isDisabled | boolean | If true, the item will be disabled (only for `styled` variant). | - |
| \_label | [`TextProps`](text.md#props) | TextProps to be applied to label (only for `styled` variant). | - | --> |

## Styling

<ComponentTheme name="select" />
Expand Down