react-native-gallery/src/examples/CheckBoxExamplePage.tsx at 47b1dbe8ea298c689881167195692fd0ec9074ed · microsoft/react-native-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
'use strict';
import * as React from 'react';
import CheckBox from '@react-native-community/checkbox';
import {Example} from '../components/Example';
import {Page} from '../components/Page';
import {useTheme} from '../Navigation';

export const CheckBoxExamplePage: React.FunctionComponent<{}> = () => {
  const {colors} = useTheme();
  return (
    <Page
      title="Checkbox"
      description="The Checkbox component lets the user select a combination of binary options."
      wrappedNativeControl={{
        control: 'CheckBox',
        url: 'https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.checkbox?view=winrt-19041',
      }}
      componentType="Community"
      pageCodeUrl="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/CheckBoxExamplePage.tsx"
      documentation={[
        {
          label: 'Checkbox',
          url: 'https://github.com/react-native-checkbox/react-native-checkbox',
        },
      ]}>
      <Example title="A simple Checkbox." code={'<CheckBox />'}>
        <CheckBox accessibilityLabel="Simple Example" />
      </Example>
      <Example title="A checked Checkbox." code={'<CheckBox value={true}/>'}>
        <CheckBox accessibilityLabel="Checked Example" value={true} />
      </Example>
      <Example title="A disabled Checkbox." code={'<CheckBox disabled />'}>
        <CheckBox accessibilityLabel="Disabled Example" disabled />
      </Example>
      <Example
        title="A disabled checked Checkbox."
        code={'<CheckBox disabled value={true} />'}>
        <CheckBox
          accessibilityLabel="Disabled Checked Example"
          disabled
          value={true}
        />
      </Example>
      <Example
        title="A colored check Checkbox."
        code={'<CheckBox onCheckColor={colors.primary} value={true} />'}>
        <CheckBox
          accessibilityLabel="Colored Checked Example"
          onCheckColor={colors.primary}
          value={true}
        />
      </Example>
      <Example
        title="A Checkbox with colored border when checked and focused."
        code={'<CheckBox onTintColor={colors.primary} value={true} />'}>
        <CheckBox
          accessibilityLabel="Example with colored border"
          onTintColor={colors.primary}
          value={true}
        />
      </Example>
      <Example
        title="A Checkbox colored when checked."
        code={'<CheckBox onFillColor={colors.primary} value={true} />'}>
        <CheckBox
          accessibilityLabel="Colored Example when checked"
          onFillColor={colors.primary}
          value={true}
        />
      </Example>
      <Example
        title="A Checkbox colored when unchecked."
        code={'<CheckBox tintColor={colors.primary} />'}>
        <CheckBox
          accessibilityLabel="Colored Example when unchecked"
          tintColor={colors.primary}
        />
      </Example>
    </Page>
  );
};