From b0b2a2e1d8391a11619eea6632a9c3cfa9550c3f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 13 Aug 2024 12:19:27 +0000 Subject: [PATCH] deploy: a8788c7dea61dde5857ca1ef4dff70ec522be034 --- 404.html | 2 +- about/index.html | 2 +- assets/js/0e15ef89.09edcfbf.js | 1 + assets/js/0e15ef89.b65b27ae.js | 1 - assets/js/0f16e7f8.0cb3ddb3.js | 1 - assets/js/0f16e7f8.41ac897a.js | 1 + assets/js/1c93f88e.00bfbc9c.js | 1 + assets/js/1c93f88e.d4dd60aa.js | 1 - assets/js/2870b86f.723d2f31.js | 1 - assets/js/2870b86f.7b93335a.js | 1 + assets/js/4b050baf.2a0a1307.js | 1 - assets/js/4b050baf.8aad2b7e.js | 1 + assets/js/51f9704d.2175e86f.js | 1 + assets/js/51f9704d.3cdf6e9b.js | 1 - assets/js/6a9be778.8ab72ef5.js | 1 - assets/js/6a9be778.b296d2be.js | 1 + assets/js/e397ba71.2a81e975.js | 1 - assets/js/e397ba71.b4f918b1.js | 1 + assets/js/f2cdfb34.0aab499a.js | 1 - assets/js/f2cdfb34.1bfc0234.js | 1 + assets/js/f3c320bd.9ef776c2.js | 1 + assets/js/f3c320bd.f2298379.js | 1 - .../{runtime~main.3b4cd3d7.js => runtime~main.f904c9e6.js} | 2 +- gluegun/contributing/index.html | 2 +- gluegun/contributing/releasing/index.html | 2 +- gluegun/getting-started/index.html | 2 +- gluegun/guides/architecture/index.html | 2 +- gluegun/guides/list/index.html | 2 +- gluegun/index.html | 2 +- gluegun/plugins/index.html | 2 +- gluegun/runtime/index.html | 2 +- gluegun/sniff/index.html | 2 +- gluegun/toolbox-api/config/index.html | 2 +- gluegun/toolbox-api/filesystem/index.html | 2 +- gluegun/toolbox-api/http/index.html | 2 +- gluegun/toolbox-api/index.html | 2 +- gluegun/toolbox-api/package-manager/index.html | 2 +- gluegun/toolbox-api/parameters/index.html | 2 +- gluegun/toolbox-api/patching/index.html | 2 +- gluegun/toolbox-api/print/index.html | 2 +- gluegun/toolbox-api/prompt/index.html | 2 +- gluegun/toolbox-api/semver/index.html | 2 +- gluegun/toolbox-api/strings/index.html | 2 +- gluegun/toolbox-api/system/index.html | 2 +- gluegun/toolbox-api/template/index.html | 2 +- gluegun/tutorials/list/index.html | 2 +- gluegun/tutorials/making-a-movie-cli/index.html | 2 +- gluegun/tutorials/making-a-plugin/index.html | 2 +- ignite-cli/Guide/index.html | 2 +- ignite-cli/boilerplate/App.tsx/index.html | 2 +- ignite-cli/boilerplate/android/index.html | 2 +- ignite-cli/boilerplate/app.json/index.html | 2 +- ignite-cli/boilerplate/app/app.tsx/index.html | 2 +- ignite-cli/boilerplate/app/components/AutoImage/index.html | 5 +++-- ignite-cli/boilerplate/app/components/Button/index.html | 3 ++- ignite-cli/boilerplate/app/components/Card/index.html | 5 ++++- ignite-cli/boilerplate/app/components/EmptyState/index.html | 5 +++-- ignite-cli/boilerplate/app/components/Header/index.html | 3 ++- ignite-cli/boilerplate/app/components/Icon/index.html | 3 ++- ignite-cli/boilerplate/app/components/ListItem/index.html | 3 ++- ignite-cli/boilerplate/app/components/ListView/index.html | 2 +- ignite-cli/boilerplate/app/components/Screen/index.html | 2 +- ignite-cli/boilerplate/app/components/Text/index.html | 3 ++- ignite-cli/boilerplate/app/components/TextField/index.html | 3 ++- ignite-cli/boilerplate/app/components/Toggle/index.html | 3 ++- ignite-cli/boilerplate/app/components/index.html | 2 +- ignite-cli/boilerplate/app/config/index.html | 2 +- ignite-cli/boilerplate/app/devtools/index.html | 2 +- .../boilerplate/app/i18n/Internationalization/index.html | 2 +- ignite-cli/boilerplate/app/index.html | 2 +- ignite-cli/boilerplate/app/models/index.html | 2 +- .../boilerplate/app/navigators/AppNavigator.tsx/index.html | 2 +- ignite-cli/boilerplate/app/navigators/Navigation/index.html | 2 +- .../app/navigators/navigationUtilities.ts/index.html | 2 +- ignite-cli/boilerplate/app/screens/index.html | 2 +- ignite-cli/boilerplate/app/services/api.ts/index.html | 2 +- ignite-cli/boilerplate/app/services/index.html | 2 +- ignite-cli/boilerplate/app/theme/Theming/index.html | 2 +- ignite-cli/boilerplate/app/theme/colors.ts/index.html | 2 +- ignite-cli/boilerplate/app/theme/spacing.ts/index.html | 2 +- ignite-cli/boilerplate/app/theme/typography.ts/index.html | 2 +- ignite-cli/boilerplate/app/utils/index.html | 2 +- ignite-cli/boilerplate/app/utils/useHeader.tsx/index.html | 2 +- .../app/utils/useSafeAreaInsetsStyle.ts/index.html | 2 +- ignite-cli/boilerplate/assets/index.html | 2 +- ignite-cli/boilerplate/eas.json/index.html | 2 +- ignite-cli/boilerplate/ignite/index.html | 2 +- ignite-cli/boilerplate/index.html | 2 +- ignite-cli/boilerplate/ios/index.html | 2 +- ignite-cli/boilerplate/maestro/index.html | 2 +- ignite-cli/boilerplate/plugins/index.html | 2 +- ignite-cli/boilerplate/plugins/withSplashScreen/index.html | 2 +- ignite-cli/boilerplate/test/index.html | 2 +- ignite-cli/cli/Ignite-CLI/index.html | 2 +- ignite-cli/cli/Remove-Demo-Code/index.html | 2 +- ignite-cli/cli/Troubleshooting/index.html | 2 +- ignite-cli/concept/Concepts/index.html | 2 +- ignite-cli/concept/Error-Boundary/index.html | 2 +- ignite-cli/concept/Generator-Templates/index.html | 2 +- ignite-cli/concept/Generators/index.html | 2 +- ignite-cli/concept/MobX-State-Tree/index.html | 2 +- ignite-cli/concept/Styling/index.html | 2 +- ignite-cli/concept/Testing/index.html | 2 +- ignite-cli/concept/TypeScript/index.html | 2 +- ignite-cli/concept/Upgrades/index.html | 2 +- ignite-cli/contributing/Contributing-To-Ignite/index.html | 2 +- ignite-cli/contributing/Releasing-Ignite/index.html | 2 +- ignite-cli/contributing/Tour-of-Ignite/index.html | 2 +- ignite-cli/expo/CNG/index.html | 2 +- ignite-cli/expo/DIY/index.html | 2 +- ignite-cli/expo/EAS/index.html | 2 +- ignite-cli/expo/Expo-Go/index.html | 2 +- ignite-cli/expo/Expo-and-Ignite/index.html | 2 +- ignite-cli/index.html | 2 +- index.html | 2 +- intro/index.html | 2 +- markdown-page/index.html | 2 +- .../contributing/adding-a-new-module/index.html | 2 +- .../contributing/changesets-versions-and-releases/index.html | 2 +- .../contributing/editing-native-code/index.html | 2 +- react-native-mlkit/contributing/index.html | 2 +- react-native-mlkit/contributing/list/index.html | 2 +- .../contributing/project-structure-and-management/index.html | 2 +- .../contributing/running-tests-on-untrusted-forks/index.html | 2 +- react-native-mlkit/document-scanner/index.html | 2 +- react-native-mlkit/document-scanner/list/index.html | 2 +- react-native-mlkit/document-scanner/options/index.html | 2 +- react-native-mlkit/face-detection/advanced-usage/index.html | 2 +- react-native-mlkit/face-detection/api/index.html | 2 +- .../face-detection/faq-troubleshooting/index.html | 2 +- react-native-mlkit/face-detection/getting-started/index.html | 2 +- react-native-mlkit/face-detection/index.html | 2 +- react-native-mlkit/face-detection/list/index.html | 2 +- react-native-mlkit/face-detection/options/index.html | 2 +- react-native-mlkit/face-detection/types/index.html | 2 +- .../image-labeling/image-labeler-options/index.html | 2 +- react-native-mlkit/image-labeling/index.html | 2 +- react-native-mlkit/image-labeling/list/index.html | 2 +- .../image-labeling/using-a-custom-model/index.html | 2 +- react-native-mlkit/index.html | 2 +- react-native-mlkit/object-detection/index.html | 2 +- react-native-mlkit/object-detection/list/index.html | 2 +- react-native-mlkit/object-detection/options/index.html | 2 +- .../object-detection/using-a-custom-model/index.html | 2 +- .../running-the-example-app/android/index.html | 2 +- react-native-mlkit/running-the-example-app/ios/index.html | 2 +- react-native-mlkit/running-the-example-app/list/index.html | 2 +- reactotron/contributing/architecture/index.html | 2 +- reactotron/contributing/index.html | 2 +- reactotron/contributing/monorepo/index.html | 2 +- reactotron/contributing/releasing/index.html | 2 +- reactotron/custom-commands/index.html | 2 +- reactotron/index.html | 2 +- reactotron/plugins/apisauce/index.html | 2 +- reactotron/plugins/async-storage/index.html | 2 +- reactotron/plugins/benchmark/index.html | 2 +- reactotron/plugins/index.html | 2 +- reactotron/plugins/mst/index.html | 2 +- reactotron/plugins/networking/index.html | 2 +- reactotron/plugins/open-in-editor/index.html | 2 +- reactotron/plugins/overlay/index.html | 2 +- reactotron/plugins/react-native-mmkv/index.html | 2 +- reactotron/plugins/redux/index.html | 2 +- reactotron/plugins/storybook/index.html | 2 +- reactotron/plugins/track-global-errors/index.html | 2 +- reactotron/plugins/track-global-logs/index.html | 2 +- reactotron/quick-start/getting-started/index.html | 2 +- reactotron/quick-start/react-js/index.html | 2 +- reactotron/quick-start/react-native/index.html | 2 +- reactotron/tips/index.html | 2 +- reactotron/troubleshooting/index.html | 2 +- search/index.html | 2 +- 172 files changed, 176 insertions(+), 164 deletions(-) create mode 100644 assets/js/0e15ef89.09edcfbf.js delete mode 100644 assets/js/0e15ef89.b65b27ae.js delete mode 100644 assets/js/0f16e7f8.0cb3ddb3.js create mode 100644 assets/js/0f16e7f8.41ac897a.js create mode 100644 assets/js/1c93f88e.00bfbc9c.js delete mode 100644 assets/js/1c93f88e.d4dd60aa.js delete mode 100644 assets/js/2870b86f.723d2f31.js create mode 100644 assets/js/2870b86f.7b93335a.js delete mode 100644 assets/js/4b050baf.2a0a1307.js create mode 100644 assets/js/4b050baf.8aad2b7e.js create mode 100644 assets/js/51f9704d.2175e86f.js delete mode 100644 assets/js/51f9704d.3cdf6e9b.js delete mode 100644 assets/js/6a9be778.8ab72ef5.js create mode 100644 assets/js/6a9be778.b296d2be.js delete mode 100644 assets/js/e397ba71.2a81e975.js create mode 100644 assets/js/e397ba71.b4f918b1.js delete mode 100644 assets/js/f2cdfb34.0aab499a.js create mode 100644 assets/js/f2cdfb34.1bfc0234.js create mode 100644 assets/js/f3c320bd.9ef776c2.js delete mode 100644 assets/js/f3c320bd.f2298379.js rename assets/js/{runtime~main.3b4cd3d7.js => runtime~main.f904c9e6.js} (77%) diff --git a/404.html b/404.html index 3b26b999..afc284ca 100644 --- a/404.html +++ b/404.html @@ -10,7 +10,7 @@ - + diff --git a/about/index.html b/about/index.html index fc8ff303..e2ecfca9 100644 --- a/about/index.html +++ b/about/index.html @@ -10,7 +10,7 @@ - + diff --git a/assets/js/0e15ef89.09edcfbf.js b/assets/js/0e15ef89.09edcfbf.js new file mode 100644 index 00000000..fef0cb53 --- /dev/null +++ b/assets/js/0e15ef89.09edcfbf.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[8360],{458:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>t,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var o=i(4848),c=i(8453);const s={sidebar_position:35},t="Icon",r={id:"ignite-cli/boilerplate/app/components/Icon",title:"Icon",description:"Ignite's Icon Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If onPress is passed, it will wrap the icon in a TouchableOpacity component, otherwise it will use a View component.",source:"@site/docs/ignite-cli/boilerplate/app/components/Icon.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/Icon",permalink:"/ignite-cli/boilerplate/app/components/Icon",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:35,frontMatter:{sidebar_position:35},sidebar:"Ignite",previous:{title:"Header",permalink:"/ignite-cli/boilerplate/app/components/Header"},next:{title:"ListItem",permalink:"/ignite-cli/boilerplate/app/components/ListItem"}},l={},d=[{value:"Props",id:"props",level:2},{value:"icon",id:"icon-1",level:3},{value:"color",id:"color",level:3},{value:"size",id:"size",level:3},{value:"style",id:"style",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"onPress",id:"onpress",level:3},{value:"Custom Icons",id:"custom-icons",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"icon",children:"Icon"}),"\n",(0,o.jsxs)(n.p,{children:["Ignite's ",(0,o.jsx)(n.code,{children:"Icon"})," Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If ",(0,o.jsx)(n.code,{children:"onPress"})," is passed, it will wrap the icon in a ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/touchableopacity",children:(0,o.jsx)(n.code,{children:"TouchableOpacity"})})," component, otherwise it will use a ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/view",children:(0,o.jsx)(n.code,{children:"View"})})," component."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{src:"https://github.com/user-attachments/assets/25888c72-8bd9-4cbd-b55f-909b0f6b0bca",alt:"icon-component"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:' Alert.alert("Hello")} />\n'})}),"\n",(0,o.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(n.p,{children:["Other than these props, you can pass any props that ",(0,o.jsx)(n.code,{children:"TouchableOpacity"})," or ",(0,o.jsx)(n.code,{children:"View"})," support and they will be forwarded to the respective wrapper component."]}),"\n",(0,o.jsx)(n.h3,{id:"icon-1",children:(0,o.jsx)(n.code,{children:"icon"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"icon"})," prop is required. This is the string name of the icon to be rendered. The options are:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"back"}),"\n",(0,o.jsx)(n.li,{children:"bell"}),"\n",(0,o.jsx)(n.li,{children:"caretLeft"}),"\n",(0,o.jsx)(n.li,{children:"caretRight"}),"\n",(0,o.jsx)(n.li,{children:"check"}),"\n",(0,o.jsx)(n.li,{children:"community"}),"\n",(0,o.jsx)(n.li,{children:"components"}),"\n",(0,o.jsx)(n.li,{children:"debug"}),"\n",(0,o.jsx)(n.li,{children:"heart"}),"\n",(0,o.jsx)(n.li,{children:"hidden"}),"\n",(0,o.jsx)(n.li,{children:"ladybug"}),"\n",(0,o.jsx)(n.li,{children:"lock"}),"\n",(0,o.jsx)(n.li,{children:"menu"}),"\n",(0,o.jsx)(n.li,{children:"more"}),"\n",(0,o.jsx)(n.li,{children:"pin"}),"\n",(0,o.jsx)(n.li,{children:"settings"}),"\n",(0,o.jsx)(n.li,{children:"view"}),"\n",(0,o.jsx)(n.li,{children:"x"}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You can easily change or add ",(0,o.jsx)(n.a,{href:"#custom-icons",children:"custom icons"})," to the ",(0,o.jsx)(n.code,{children:"Icon"})," component."]}),"\n",(0,o.jsx)(n.h3,{id:"color",children:(0,o.jsx)(n.code,{children:"color"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"color"})," optional prop is a string that will be used to set the ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/image-style-props#tintcolor",children:(0,o.jsx)(n.code,{children:"tintColor"})})," of the icon image."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"size",children:(0,o.jsx)(n.code,{children:"size"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"size"})," optional prop is a number that is used to set the dimensions of the icon image."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"style",children:(0,o.jsx)(n.code,{children:"style"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"style"})," prop is optional. This is an object that overrides the default style of the icon, and is of the type ",(0,o.jsx)(n.code,{children:"StyleProp"}),". By default this just sets the image's ",(0,o.jsx)(n.code,{children:"resizeMode"})," to ",(0,o.jsx)(n.code,{children:"contain"}),". See React Native docs on ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/image#style",children:"ImageStyle"})," for more information."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"containerstyle",children:(0,o.jsx)(n.code,{children:"containerStyle"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"containerStyle"})," is an optional prop that sets the style of the icon container, and is of the type ",(0,o.jsx)(n.code,{children:"StyleProp"}),". See React Native docs on ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/view-style-props",children:"ViewStyle"})," for more information."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"onpress",children:(0,o.jsx)(n.code,{children:"onPress"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"onPress"})," optional prop is a function that will be called when the icon is pressed. Note that when this prop is passed, the icon will be wrapped in a ",(0,o.jsx)(n.code,{children:"TouchableOpacity"})," component rather than a ",(0,o.jsx)(n.code,{children:"View"})," component."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:' Alert.alert("Hello")} />\n'})}),"\n",(0,o.jsx)(n.h2,{id:"custom-icons",children:"Custom Icons"}),"\n",(0,o.jsxs)(n.p,{children:["To create your own custom icon, add your icon image(s) to the ",(0,o.jsx)(n.code,{children:"assets/icons/"})," directory and then add it with its own name to the ",(0,o.jsx)(n.code,{children:"iconRegistry"})," object in ",(0,o.jsx)(n.code,{children:"app/components/Icon.tsx"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"-- icon/\n -- icons/\n -- index.ts\n -- my-custom-icon.png\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'export const iconRegistry = {\n // ...\n custom: require("./myCustomIcon.png"),\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You can then use your custom icon by passing its name through the ",(0,o.jsx)(n.code,{children:"icon"})," prop."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})})]})}function h(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>t,x:()=>r});var o=i(6540);const c={},s=o.createContext(c);function t(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:t(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0e15ef89.b65b27ae.js b/assets/js/0e15ef89.b65b27ae.js deleted file mode 100644 index 6dc58e90..00000000 --- a/assets/js/0e15ef89.b65b27ae.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[8360],{458:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>l,contentTitle:()=>t,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var o=i(4848),c=i(8453);const s={sidebar_position:35},t="Icon",r={id:"ignite-cli/boilerplate/app/components/Icon",title:"Icon",description:"Ignite's Icon Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If onPress is passed, it will wrap the icon in a TouchableOpacity component, otherwise it will use a View component.",source:"@site/docs/ignite-cli/boilerplate/app/components/Icon.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/Icon",permalink:"/ignite-cli/boilerplate/app/components/Icon",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:35,frontMatter:{sidebar_position:35},sidebar:"Ignite",previous:{title:"Header",permalink:"/ignite-cli/boilerplate/app/components/Header"},next:{title:"ListItem",permalink:"/ignite-cli/boilerplate/app/components/ListItem"}},l={},d=[{value:"Props",id:"props",level:2},{value:"icon",id:"icon-1",level:3},{value:"color",id:"color",level:3},{value:"size",id:"size",level:3},{value:"style",id:"style",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"onPress",id:"onpress",level:3},{value:"Custom Icons",id:"custom-icons",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"icon",children:"Icon"}),"\n",(0,o.jsxs)(n.p,{children:["Ignite's ",(0,o.jsx)(n.code,{children:"Icon"})," Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If ",(0,o.jsx)(n.code,{children:"onPress"})," is passed, it will wrap the icon in a ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/touchableopacity",children:(0,o.jsx)(n.code,{children:"TouchableOpacity"})})," component, otherwise it will use a ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/view",children:(0,o.jsx)(n.code,{children:"View"})})," component."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:' Alert.alert("Hello")} />\n'})}),"\n",(0,o.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,o.jsxs)(n.p,{children:["Other than these props, you can pass any props that ",(0,o.jsx)(n.code,{children:"TouchableOpacity"})," or ",(0,o.jsx)(n.code,{children:"View"})," support and they will be forwarded to the respective wrapper component."]}),"\n",(0,o.jsx)(n.h3,{id:"icon-1",children:(0,o.jsx)(n.code,{children:"icon"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"icon"})," prop is required. This is the string name of the icon to be rendered. The options are:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"back"}),"\n",(0,o.jsx)(n.li,{children:"bell"}),"\n",(0,o.jsx)(n.li,{children:"caretLeft"}),"\n",(0,o.jsx)(n.li,{children:"caretRight"}),"\n",(0,o.jsx)(n.li,{children:"check"}),"\n",(0,o.jsx)(n.li,{children:"community"}),"\n",(0,o.jsx)(n.li,{children:"components"}),"\n",(0,o.jsx)(n.li,{children:"debug"}),"\n",(0,o.jsx)(n.li,{children:"heart"}),"\n",(0,o.jsx)(n.li,{children:"hidden"}),"\n",(0,o.jsx)(n.li,{children:"ladybug"}),"\n",(0,o.jsx)(n.li,{children:"lock"}),"\n",(0,o.jsx)(n.li,{children:"menu"}),"\n",(0,o.jsx)(n.li,{children:"more"}),"\n",(0,o.jsx)(n.li,{children:"pin"}),"\n",(0,o.jsx)(n.li,{children:"settings"}),"\n",(0,o.jsx)(n.li,{children:"view"}),"\n",(0,o.jsx)(n.li,{children:"x"}),"\n"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You can easily change or add ",(0,o.jsx)(n.a,{href:"#custom-icons",children:"custom icons"})," to the ",(0,o.jsx)(n.code,{children:"Icon"})," component."]}),"\n",(0,o.jsx)(n.h3,{id:"color",children:(0,o.jsx)(n.code,{children:"color"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"color"})," optional prop is a string that will be used to set the ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/image-style-props#tintcolor",children:(0,o.jsx)(n.code,{children:"tintColor"})})," of the icon image."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"size",children:(0,o.jsx)(n.code,{children:"size"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"size"})," optional prop is a number that is used to set the dimensions of the icon image."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"style",children:(0,o.jsx)(n.code,{children:"style"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"style"})," prop is optional. This is an object that overrides the default style of the icon, and is of the type ",(0,o.jsx)(n.code,{children:"StyleProp"}),". By default this just sets the image's ",(0,o.jsx)(n.code,{children:"resizeMode"})," to ",(0,o.jsx)(n.code,{children:"contain"}),". See React Native docs on ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/image#style",children:"ImageStyle"})," for more information."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"containerstyle",children:(0,o.jsx)(n.code,{children:"containerStyle"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"containerStyle"})," is an optional prop that sets the style of the icon container, and is of the type ",(0,o.jsx)(n.code,{children:"StyleProp"}),". See React Native docs on ",(0,o.jsx)(n.a,{href:"https://reactnative.dev/docs/view-style-props",children:"ViewStyle"})," for more information."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"onpress",children:(0,o.jsx)(n.code,{children:"onPress"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"onPress"})," optional prop is a function that will be called when the icon is pressed. Note that when this prop is passed, the icon will be wrapped in a ",(0,o.jsx)(n.code,{children:"TouchableOpacity"})," component rather than a ",(0,o.jsx)(n.code,{children:"View"})," component."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:' Alert.alert("Hello")} />\n'})}),"\n",(0,o.jsx)(n.h2,{id:"custom-icons",children:"Custom Icons"}),"\n",(0,o.jsxs)(n.p,{children:["To create your own custom icon, add your icon image(s) to the ",(0,o.jsx)(n.code,{children:"assets/icons/"})," directory and then add it with its own name to the ",(0,o.jsx)(n.code,{children:"iconRegistry"})," object in ",(0,o.jsx)(n.code,{children:"app/components/Icon.tsx"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"-- icon/\n -- icons/\n -- index.ts\n -- my-custom-icon.png\n"})}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'export const iconRegistry = {\n // ...\n custom: require("./myCustomIcon.png"),\n}\n'})}),"\n",(0,o.jsxs)(n.p,{children:["You can then use your custom icon by passing its name through the ",(0,o.jsx)(n.code,{children:"icon"})," prop."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})})]})}function h(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>t,x:()=>r});var o=i(6540);const c={},s=o.createContext(c);function t(e){const n=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:t(e.components),o.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0f16e7f8.0cb3ddb3.js b/assets/js/0f16e7f8.0cb3ddb3.js deleted file mode 100644 index 3e267626..00000000 --- a/assets/js/0f16e7f8.0cb3ddb3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[6394],{8973:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>l});var o=n(4848),s=n(8453);const a={sidebar_position:33},d="EmptyState",i={id:"ignite-cli/boilerplate/app/components/EmptyState",title:"EmptyState",description:"The EmptyState component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with.",source:"@site/docs/ignite-cli/boilerplate/app/components/EmptyState.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/EmptyState",permalink:"/ignite-cli/boilerplate/app/components/EmptyState",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:33,frontMatter:{sidebar_position:33},sidebar:"Ignite",previous:{title:"Card",permalink:"/ignite-cli/boilerplate/app/components/Card"},next:{title:"Header",permalink:"/ignite-cli/boilerplate/app/components/Header"}},c={},l=[{value:"Props",id:"props",level:2},{value:"preset",id:"preset",level:3},{value:"style",id:"style",level:3},{value:"imageSource",id:"imagesource",level:3},{value:"imageStyle",id:"imagestyle",level:3},{value:"ImageProps",id:"imageprops",level:3},{value:"heading",id:"heading",level:3},{value:"headingTx",id:"headingtx",level:3},{value:"headingTxOptions",id:"headingtxoptions",level:3},{value:"headingStyle",id:"headingstyle",level:3},{value:"HeadingTextProps",id:"headingtextprops",level:3},{value:"content",id:"content",level:3},{value:"contentTx",id:"contenttx",level:3},{value:"contentTxOptions",id:"contenttxoptions",level:3},{value:"contentStyle",id:"contentstyle",level:3},{value:"ContentTextProps",id:"contenttextprops",level:3},{value:"button",id:"button",level:3},{value:"buttonTx",id:"buttontx",level:3},{value:"buttonTxOptions",id:"buttontxoptions",level:3},{value:"buttonStyle",id:"buttonstyle",level:3},{value:"buttonTextStyle",id:"buttontextstyle",level:3},{value:"ButtonProps",id:"buttonprops",level:3}];function r(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"emptystate",children:"EmptyState"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"EmptyState"})," component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with."]}),"\n",(0,o.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"preset",children:(0,o.jsx)(t.code,{children:"preset"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"preset"})," prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: ",(0,o.jsx)(t.code,{children:"generic"}),"."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"style",children:(0,o.jsx)(t.code,{children:"style"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"style"})," prop is used to set the style override for the container."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imagesource",children:(0,o.jsx)(t.code,{children:"imageSource"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"imageSource"})," prop is used to set the Image source to be displayed above the heading."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imagestyle",children:(0,o.jsx)(t.code,{children:"imageStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"imageStyle"})," prop is used to set any style overrides to be applied to the image about the heading."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imageprops",children:(0,o.jsx)(t.code,{children:"ImageProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ImageProps"})," prop is used to pass any additional props directly to the ",(0,o.jsx)(t.code,{children:"Image"})," component. It will accept any prop that the ",(0,o.jsx)(t.code,{children:"Image"})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"heading",children:(0,o.jsx)(t.code,{children:"heading"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"heading"})," prop is used to set the heading text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtx",children:(0,o.jsx)(t.code,{children:"headingTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingTx"})," prop is used to set the heading text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtxoptions",children:(0,o.jsx)(t.code,{children:"headingTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"headingTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingstyle",children:(0,o.jsx)(t.code,{children:"headingStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingStyle"})," prop is used to set the style of the heading text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtextprops",children:(0,o.jsx)(t.code,{children:"HeadingTextProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"HeadingTextProps"})," prop is used to pass any additional props to the heading ",(0,o.jsx)(t.code,{children:"Text"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,o.jsx)(t.code,{children:"Text"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"content",children:(0,o.jsx)(t.code,{children:"content"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"content"})," prop is used to set the content text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttx",children:(0,o.jsx)(t.code,{children:"contentTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentTx"})," prop is used to set the content text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttxoptions",children:(0,o.jsx)(t.code,{children:"contentTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"contentTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contentstyle",children:(0,o.jsx)(t.code,{children:"contentStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentStyle"})," prop is used to set the style of the content text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttextprops",children:(0,o.jsx)(t.code,{children:"ContentTextProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ContentTextProps"})," prop is used to pass any additional props to the content ",(0,o.jsx)(t.code,{children:"Text"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,o.jsx)(t.code,{children:"Text"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"button",children:(0,o.jsx)(t.code,{children:"button"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"button"})," prop is used to set the button text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontx",children:(0,o.jsx)(t.code,{children:"buttonTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTx"})," prop is used to set the button text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontxoptions",children:(0,o.jsx)(t.code,{children:"buttonTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"buttonTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttonstyle",children:(0,o.jsx)(t.code,{children:"buttonStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonStyle"})," prop is used to set the style overrides of the button."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontextstyle",children:(0,o.jsx)(t.code,{children:"buttonTextStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTextStyle"})," prop is used to set the style of the button text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttonprops",children:(0,o.jsx)(t.code,{children:"ButtonProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ButtonProps"})," prop is used to pass any additional props to the ",(0,o.jsx)(t.code,{children:"Button"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Button",children:(0,o.jsx)(t.code,{children:"Button"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(r,{...e})}):r(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>d,x:()=>i});var o=n(6540);const s={},a=o.createContext(s);function d(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/0f16e7f8.41ac897a.js b/assets/js/0f16e7f8.41ac897a.js new file mode 100644 index 00000000..a0c1178e --- /dev/null +++ b/assets/js/0f16e7f8.41ac897a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[6394],{8973:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>p,frontMatter:()=>a,metadata:()=>i,toc:()=>l});var o=n(4848),s=n(8453);const a={sidebar_position:33},d="EmptyState",i={id:"ignite-cli/boilerplate/app/components/EmptyState",title:"EmptyState",description:"The EmptyState component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with.",source:"@site/docs/ignite-cli/boilerplate/app/components/EmptyState.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/EmptyState",permalink:"/ignite-cli/boilerplate/app/components/EmptyState",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:33,frontMatter:{sidebar_position:33},sidebar:"Ignite",previous:{title:"Card",permalink:"/ignite-cli/boilerplate/app/components/Card"},next:{title:"Header",permalink:"/ignite-cli/boilerplate/app/components/Header"}},c={},l=[{value:"Props",id:"props",level:2},{value:"preset",id:"preset",level:3},{value:"style",id:"style",level:3},{value:"imageSource",id:"imagesource",level:3},{value:"imageStyle",id:"imagestyle",level:3},{value:"ImageProps",id:"imageprops",level:3},{value:"heading",id:"heading",level:3},{value:"headingTx",id:"headingtx",level:3},{value:"headingTxOptions",id:"headingtxoptions",level:3},{value:"headingStyle",id:"headingstyle",level:3},{value:"HeadingTextProps",id:"headingtextprops",level:3},{value:"content",id:"content",level:3},{value:"contentTx",id:"contenttx",level:3},{value:"contentTxOptions",id:"contenttxoptions",level:3},{value:"contentStyle",id:"contentstyle",level:3},{value:"ContentTextProps",id:"contenttextprops",level:3},{value:"button",id:"button",level:3},{value:"buttonTx",id:"buttontx",level:3},{value:"buttonTxOptions",id:"buttontxoptions",level:3},{value:"buttonStyle",id:"buttonstyle",level:3},{value:"buttonTextStyle",id:"buttontextstyle",level:3},{value:"ButtonProps",id:"buttonprops",level:3}];function r(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{id:"emptystate",children:"EmptyState"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"EmptyState"})," component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with."]}),"\n",(0,o.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"preset",children:(0,o.jsx)(t.code,{children:"preset"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"preset"})," prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: ",(0,o.jsx)(t.code,{children:"generic"}),".\n",(0,o.jsx)(t.img,{src:"https://github.com/user-attachments/assets/aa8bca01-24f2-45e5-977d-5f6ac949d580",alt:"empty-state"})]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"style",children:(0,o.jsx)(t.code,{children:"style"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"style"})," prop is used to set the style override for the container."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imagesource",children:(0,o.jsx)(t.code,{children:"imageSource"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"imageSource"})," prop is used to set the Image source to be displayed above the heading."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imagestyle",children:(0,o.jsx)(t.code,{children:"imageStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"imageStyle"})," prop is used to set any style overrides to be applied to the image about the heading."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"imageprops",children:(0,o.jsx)(t.code,{children:"ImageProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ImageProps"})," prop is used to pass any additional props directly to the ",(0,o.jsx)(t.code,{children:"Image"})," component. It will accept any prop that the ",(0,o.jsx)(t.code,{children:"Image"})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"heading",children:(0,o.jsx)(t.code,{children:"heading"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"heading"})," prop is used to set the heading text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtx",children:(0,o.jsx)(t.code,{children:"headingTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingTx"})," prop is used to set the heading text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtxoptions",children:(0,o.jsx)(t.code,{children:"headingTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"headingTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingstyle",children:(0,o.jsx)(t.code,{children:"headingStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"headingStyle"})," prop is used to set the style of the heading text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"headingtextprops",children:(0,o.jsx)(t.code,{children:"HeadingTextProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"HeadingTextProps"})," prop is used to pass any additional props to the heading ",(0,o.jsx)(t.code,{children:"Text"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,o.jsx)(t.code,{children:"Text"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"content",children:(0,o.jsx)(t.code,{children:"content"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"content"})," prop is used to set the content text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttx",children:(0,o.jsx)(t.code,{children:"contentTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentTx"})," prop is used to set the content text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttxoptions",children:(0,o.jsx)(t.code,{children:"contentTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"contentTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contentstyle",children:(0,o.jsx)(t.code,{children:"contentStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"contentStyle"})," prop is used to set the style of the content text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"contenttextprops",children:(0,o.jsx)(t.code,{children:"ContentTextProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ContentTextProps"})," prop is used to pass any additional props to the content ",(0,o.jsx)(t.code,{children:"Text"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,o.jsx)(t.code,{children:"Text"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"button",children:(0,o.jsx)(t.code,{children:"button"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"button"})," prop is used to set the button text of the EmptyState."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontx",children:(0,o.jsx)(t.code,{children:"buttonTx"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTx"})," prop is used to set the button text of the EmptyState using a translation key."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontxoptions",children:(0,o.jsx)(t.code,{children:"buttonTxOptions"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTxOptions"})," prop is used to set the options for the translation key used by the ",(0,o.jsx)(t.code,{children:"buttonTx"})," prop."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttonstyle",children:(0,o.jsx)(t.code,{children:"buttonStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonStyle"})," prop is used to set the style overrides of the button."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttontextstyle",children:(0,o.jsx)(t.code,{children:"buttonTextStyle"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"buttonTextStyle"})," prop is used to set the style of the button text."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(t.h3,{id:"buttonprops",children:(0,o.jsx)(t.code,{children:"ButtonProps"})}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ButtonProps"})," prop is used to pass any additional props to the ",(0,o.jsx)(t.code,{children:"Button"})," component. It will accept any prop that the ",(0,o.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Button",children:(0,o.jsx)(t.code,{children:"Button"})})," component accepts."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-tsx",children:'\n'})})]})}function p(e={}){const{wrapper:t}={...(0,s.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(r,{...e})}):r(e)}},8453:(e,t,n)=>{n.d(t,{R:()=>d,x:()=>i});var o=n(6540);const s={},a=o.createContext(s);function d(e){const t=o.useContext(a);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:d(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1c93f88e.00bfbc9c.js b/assets/js/1c93f88e.00bfbc9c.js new file mode 100644 index 00000000..70acb16f --- /dev/null +++ b/assets/js/1c93f88e.00bfbc9c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[364],{44:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>s,metadata:()=>l,toc:()=>r});var n=o(4848),i=o(8453);const s={sidebar_position:36},c="ListItem",l={id:"ignite-cli/boilerplate/app/components/ListItem",title:"ListItem",description:"The ListItem component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside.",source:"@site/docs/ignite-cli/boilerplate/app/components/ListItem.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/ListItem",permalink:"/ignite-cli/boilerplate/app/components/ListItem",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:36,frontMatter:{sidebar_position:36},sidebar:"Ignite",previous:{title:"Icon",permalink:"/ignite-cli/boilerplate/app/components/Icon"},next:{title:"ListView",permalink:"/ignite-cli/boilerplate/app/components/ListView"}},d={},r=[{value:"Props",id:"props",level:2},{value:"height",id:"height",level:3},{value:"topSeparator and bottomSeparator",id:"topseparator-and-bottomseparator",level:3},{value:"text",id:"text",level:3},{value:"tx",id:"tx",level:3},{value:"children",id:"children",level:3},{value:"txOptions",id:"txoptions",level:3},{value:"textStyle",id:"textstyle",level:3},{value:"TextProps",id:"textprops",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"style",id:"style",level:3},{value:"leftIcon and rightIcon",id:"lefticon-and-righticon",level:3},{value:"leftIconColor and rightIconColor",id:"lefticoncolor-and-righticoncolor",level:3},{value:"RightComponent and LeftComponent",id:"rightcomponent-and-leftcomponent",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"listitem",children:"ListItem"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"ListItem"})," component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside."]}),"\n",(0,n.jsx)(t.p,{children:(0,n.jsx)(t.img,{src:"https://github.com/user-attachments/assets/009aed59-5597-4d0b-b861-972608ddb8ea",alt:"listitem-component"})}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.p,{children:["As the ",(0,n.jsx)(t.code,{children:"ListItem"})," component is interactable, it includes a ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component, which means that in addition to the custom props listed here, you can pass any props that are valid for a ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component."]}),"\n",(0,n.jsx)(t.h3,{id:"height",children:(0,n.jsx)(t.code,{children:"height"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"height"})," prop is used to set the height of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. The default is ",(0,n.jsx)(t.code,{children:"56"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsxs)(t.h3,{id:"topseparator-and-bottomseparator",children:[(0,n.jsx)(t.code,{children:"topSeparator"})," and ",(0,n.jsx)(t.code,{children:"bottomSeparator"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"topSeparator"})," and ",(0,n.jsx)(t.code,{children:"bottomSeparator"})," props are used to display a separator above or below the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. The default is ",(0,n.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsx)(t.h3,{id:"text",children:(0,n.jsx)(t.code,{children:"text"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"text"})," prop is used to display a simple piece of text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"tx",children:(0,n.jsx)(t.code,{children:"tx"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"tx"})," prop is used to display a simple piece of text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. It is used to display a localized string."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"children",children:(0,n.jsx)(t.code,{children:"children"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"children"})," prop is used to display components inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. Note that these will be nested inside a ",(0,n.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,n.jsx)(t.code,{children:"Text"})})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n Subtext\n\n"})}),"\n",(0,n.jsx)(t.h3,{id:"txoptions",children:(0,n.jsx)(t.code,{children:"txOptions"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"txOptions"})," prop is used to pass options to the ",(0,n.jsx)(t.code,{children:"tx"})," prop. It is used to display a localized string."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"textstyle",children:(0,n.jsx)(t.code,{children:"textStyle"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"textStyle"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"Text"})," component that is used to display the text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"textprops",children:(0,n.jsx)(t.code,{children:"TextProps"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TextProps"})," prop is used to pass any additional props directly to the ",(0,n.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,n.jsx)(t.code,{children:"Text"})})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"containerstyle",children:(0,n.jsx)(t.code,{children:"containerStyle"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"containerStyle"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"View"})," component that is used to display the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"style",children:(0,n.jsx)(t.code,{children:"style"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"style"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component that is used to display the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"lefticon-and-righticon",children:[(0,n.jsx)(t.code,{children:"leftIcon"})," and ",(0,n.jsx)(t.code,{children:"rightIcon"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"leftIcon"})," and ",(0,n.jsx)(t.code,{children:"rightIcon"})," props are used to display an icon on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"lefticoncolor-and-righticoncolor",children:[(0,n.jsx)(t.code,{children:"leftIconColor"})," and ",(0,n.jsx)(t.code,{children:"rightIconColor"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"leftIconColor"})," and ",(0,n.jsx)(t.code,{children:"rightIconColor"})," props are used to set the color of the icon on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"rightcomponent-and-leftcomponent",children:[(0,n.jsx)(t.code,{children:"RightComponent"})," and ",(0,n.jsx)(t.code,{children:"LeftComponent"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"RightComponent"})," and ",(0,n.jsx)(t.code,{children:"LeftComponent"})," props are ",(0,n.jsx)(t.code,{children:"ReactElement"})," objects used to display a component on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'Left}\n RightComponent={Right}\n/>\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>c,x:()=>l});var n=o(6540);const i={},s=n.createContext(i);function c(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/1c93f88e.d4dd60aa.js b/assets/js/1c93f88e.d4dd60aa.js deleted file mode 100644 index 75596d46..00000000 --- a/assets/js/1c93f88e.d4dd60aa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[364],{44:(e,t,o)=>{o.r(t),o.d(t,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>s,metadata:()=>l,toc:()=>r});var n=o(4848),i=o(8453);const s={sidebar_position:36},c="ListItem",l={id:"ignite-cli/boilerplate/app/components/ListItem",title:"ListItem",description:"The ListItem component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside.",source:"@site/docs/ignite-cli/boilerplate/app/components/ListItem.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/ListItem",permalink:"/ignite-cli/boilerplate/app/components/ListItem",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:36,frontMatter:{sidebar_position:36},sidebar:"Ignite",previous:{title:"Icon",permalink:"/ignite-cli/boilerplate/app/components/Icon"},next:{title:"ListView",permalink:"/ignite-cli/boilerplate/app/components/ListView"}},d={},r=[{value:"Props",id:"props",level:2},{value:"height",id:"height",level:3},{value:"topSeparator and bottomSeparator",id:"topseparator-and-bottomseparator",level:3},{value:"text",id:"text",level:3},{value:"tx",id:"tx",level:3},{value:"children",id:"children",level:3},{value:"txOptions",id:"txoptions",level:3},{value:"textStyle",id:"textstyle",level:3},{value:"TextProps",id:"textprops",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"style",id:"style",level:3},{value:"leftIcon and rightIcon",id:"lefticon-and-righticon",level:3},{value:"leftIconColor and rightIconColor",id:"lefticoncolor-and-righticoncolor",level:3},{value:"RightComponent and LeftComponent",id:"rightcomponent-and-leftcomponent",level:3}];function a(e){const t={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{id:"listitem",children:"ListItem"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"ListItem"})," component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsx)(t.h2,{id:"props",children:"Props"}),"\n",(0,n.jsxs)(t.p,{children:["As the ",(0,n.jsx)(t.code,{children:"ListItem"})," component is interactable, it includes a ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component, which means that in addition to the custom props listed here, you can pass any props that are valid for a ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component."]}),"\n",(0,n.jsx)(t.h3,{id:"height",children:(0,n.jsx)(t.code,{children:"height"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"height"})," prop is used to set the height of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. The default is ",(0,n.jsx)(t.code,{children:"56"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsxs)(t.h3,{id:"topseparator-and-bottomseparator",children:[(0,n.jsx)(t.code,{children:"topSeparator"})," and ",(0,n.jsx)(t.code,{children:"bottomSeparator"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"topSeparator"})," and ",(0,n.jsx)(t.code,{children:"bottomSeparator"})," props are used to display a separator above or below the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. The default is ",(0,n.jsx)(t.code,{children:"false"}),"."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n"})}),"\n",(0,n.jsx)(t.h3,{id:"text",children:(0,n.jsx)(t.code,{children:"text"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"text"})," prop is used to display a simple piece of text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"tx",children:(0,n.jsx)(t.code,{children:"tx"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"tx"})," prop is used to display a simple piece of text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. It is used to display a localized string."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"children",children:(0,n.jsx)(t.code,{children:"children"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"children"})," prop is used to display components inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component. Note that these will be nested inside a ",(0,n.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,n.jsx)(t.code,{children:"Text"})})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"\n Subtext\n\n"})}),"\n",(0,n.jsx)(t.h3,{id:"txoptions",children:(0,n.jsx)(t.code,{children:"txOptions"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"txOptions"})," prop is used to pass options to the ",(0,n.jsx)(t.code,{children:"tx"})," prop. It is used to display a localized string."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"textstyle",children:(0,n.jsx)(t.code,{children:"textStyle"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"textStyle"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"Text"})," component that is used to display the text inside the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"textprops",children:(0,n.jsx)(t.code,{children:"TextProps"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TextProps"})," prop is used to pass any additional props directly to the ",(0,n.jsx)(t.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,n.jsx)(t.code,{children:"Text"})})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"containerstyle",children:(0,n.jsx)(t.code,{children:"containerStyle"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"containerStyle"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"View"})," component that is used to display the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsx)(t.h3,{id:"style",children:(0,n.jsx)(t.code,{children:"style"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"style"})," prop is used to pass a style to the ",(0,n.jsx)(t.code,{children:"TouchableOpacity"})," component that is used to display the ",(0,n.jsx)(t.code,{children:"ListItem"})," component."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"lefticon-and-righticon",children:[(0,n.jsx)(t.code,{children:"leftIcon"})," and ",(0,n.jsx)(t.code,{children:"rightIcon"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"leftIcon"})," and ",(0,n.jsx)(t.code,{children:"rightIcon"})," props are used to display an icon on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"lefticoncolor-and-righticoncolor",children:[(0,n.jsx)(t.code,{children:"leftIconColor"})," and ",(0,n.jsx)(t.code,{children:"rightIconColor"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"leftIconColor"})," and ",(0,n.jsx)(t.code,{children:"rightIconColor"})," props are used to set the color of the icon on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n'})}),"\n",(0,n.jsxs)(t.h3,{id:"rightcomponent-and-leftcomponent",children:[(0,n.jsx)(t.code,{children:"RightComponent"})," and ",(0,n.jsx)(t.code,{children:"LeftComponent"})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"RightComponent"})," and ",(0,n.jsx)(t.code,{children:"LeftComponent"})," props are ",(0,n.jsx)(t.code,{children:"ReactElement"})," objects used to display a component on the left or right side of the ",(0,n.jsx)(t.code,{children:"ListItem"})," component, respectively."]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'Left}\n RightComponent={Right}\n/>\n'})})]})}function h(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(a,{...e})}):a(e)}},8453:(e,t,o)=>{o.d(t,{R:()=>c,x:()=>l});var n=o(6540);const i={},s=n.createContext(i);function c(e){const t=n.useContext(s);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:c(e.components),n.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2870b86f.723d2f31.js b/assets/js/2870b86f.723d2f31.js deleted file mode 100644 index 45a23a22..00000000 --- a/assets/js/2870b86f.723d2f31.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[9154],{4459:(e,l,n)=>{n.r(l),n.d(l,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>r});var t=n(4848),o=n(8453);const s={sidebar_position:41},i="Toggle",a={id:"ignite-cli/boilerplate/app/components/Toggle",title:"Toggle",description:"This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element.",source:"@site/docs/ignite-cli/boilerplate/app/components/Toggle.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/Toggle",permalink:"/ignite-cli/boilerplate/app/components/Toggle",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:41,frontMatter:{sidebar_position:41},sidebar:"Ignite",previous:{title:"TextField",permalink:"/ignite-cli/boilerplate/app/components/TextField"},next:{title:"Config folder",permalink:"/ignite-cli/boilerplate/app/config/"}},c={},r=[{value:"Props",id:"props",level:2},{value:"variant",id:"variant",level:3},{value:"status",id:"status",level:3},{value:"editable",id:"editable",level:3},{value:"value",id:"value",level:3},{value:"onValueChange",id:"onvaluechange",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"inputOuterStyle",id:"inputouterstyle",level:3},{value:"inputInnerStyle",id:"inputinnerstyle",level:3},{value:"inputDetailStyle",id:"inputdetailstyle",level:3},{value:"labelPosition",id:"labelposition",level:3},{value:"label",id:"label",level:3},{value:"labelTx",id:"labeltx",level:3},{value:"labelTxOptions",id:"labeltxoptions",level:3},{value:"labelStyle",id:"labelstyle",level:3},{value:"LabelTextProps",id:"labeltextprops",level:3},{value:"helper",id:"helper",level:3},{value:"helperTx",id:"helpertx",level:3},{value:"helperTxOptions",id:"helpertxoptions",level:3},{value:"HelperTextProps",id:"helpertextprops",level:3},{value:"switchAccessibilityMode",id:"switchaccessibilitymode",level:3},{value:"checkboxIcon",id:"checkboxicon",level:3}];function d(e){const l={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.h1,{id:"toggle",children:"Toggle"}),"\n",(0,t.jsx)(l.p,{children:"This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element."}),"\n",(0,t.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(l.h3,{id:"variant",children:(0,t.jsx)(l.code,{children:"variant"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"variant"})," prop determines the type of toggle to render. It can be one of the following: ",(0,t.jsx)(l.code,{children:"switch"}),", ",(0,t.jsx)(l.code,{children:"checkbox"}),", or ",(0,t.jsx)(l.code,{children:"radio"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"status",children:(0,t.jsx)(l.code,{children:"status"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"status"})," prop is used to determine the interactability or style of the toggle. It can be set to ",(0,t.jsx)(l.code,{children:"disabled"})," or ",(0,t.jsx)(l.code,{children:"error"}),". It is ",(0,t.jsx)(l.code,{children:"null"})," by default."]}),"\n",(0,t.jsxs)(l.p,{children:["When set to ",(0,t.jsx)(l.code,{children:"error"}),", elements of the toggle will have their colors set to ",(0,t.jsx)(l.code,{children:"colors.errorBackground"})," or ",(0,t.jsx)(l.code,{children:"colors.error"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"editable",children:(0,t.jsx)(l.code,{children:"editable"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"editable"})," prop determines whether the toggle is interactable. It is ",(0,t.jsx)(l.code,{children:"true"})," by default. Setting the ",(0,t.jsx)(l.code,{children:"status"})," prop to ",(0,t.jsx)(l.code,{children:"disabled"})," also will set ",(0,t.jsx)(l.code,{children:"editable"})," to ",(0,t.jsx)(l.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"value",children:(0,t.jsx)(l.code,{children:"value"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"value"})," prop determines whether the toggle is on or off. It is ",(0,t.jsx)(l.code,{children:"false"})," by default."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"onvaluechange",children:(0,t.jsx)(l.code,{children:"onValueChange"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"onValueChange"})," prop is a callback that is called when the toggle is toggled. It is ",(0,t.jsx)(l.code,{children:"undefined"})," by default. Since the toggle is controlled, you must set the ",(0,t.jsx)(l.code,{children:"value"})," prop in this callback to update the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"containerstyle",children:(0,t.jsx)(l.code,{children:"containerStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"containerStyle"})," prop is a style object that is applied to the container of the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputouterstyle",children:(0,t.jsx)(l.code,{children:"inputOuterStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputOuterStyle"}),' prop is a style object that is applied to the outer container of the toggle input. This gives the inputs their size, shape, "off" background-color, and outer border.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputinnerstyle",children:(0,t.jsx)(l.code,{children:"inputInnerStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputInnerStyle"}),' prop is a style object that is applied to the inner container of the toggle input. This gives the inputs their "on" background-color and inner border.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputdetailstyle",children:(0,t.jsx)(l.code,{children:"inputDetailStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputDetailStyle"})," prop is a style object that is applied to the detail container of the toggle input. For checkbox, this affects the Image component. For radio, this affects the dot View. For switch, this affects the knob View."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labelposition",children:(0,t.jsx)(l.code,{children:"labelPosition"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelPosition"})," prop determines the position of the label relative to the action component. It can be ",(0,t.jsx)(l.code,{children:"left"})," or ",(0,t.jsx)(l.code,{children:"right"}),". It is ",(0,t.jsx)(l.code,{children:"right"})," by default."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"label",children:(0,t.jsx)(l.code,{children:"label"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"label"})," prop is a string that is used as the label for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltx",children:(0,t.jsx)(l.code,{children:"labelTx"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelTx"})," prop is a key to a string in the ",(0,t.jsx)(l.code,{children:"i18n"})," translation file. It is used as the label for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltxoptions",children:(0,t.jsx)(l.code,{children:"labelTxOptions"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelTxOptions"})," prop is an object that is passed to the ",(0,t.jsx)(l.code,{children:"i18n"})," translation function. It is used to pass in values to the translation string."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labelstyle",children:(0,t.jsx)(l.code,{children:"labelStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelStyle"})," prop is a ",(0,t.jsx)(l.code,{children:"StyleProp"})," object that is applied to the label."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltextprops",children:(0,t.jsx)(l.code,{children:"LabelTextProps"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"LabelTextProps"})," prop is a ",(0,t.jsx)(l.code,{children:"TextProps"})," object (from the ",(0,t.jsx)(l.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,t.jsx)(l.code,{children:"Text"})}),") component that is applied to the label."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helper",children:(0,t.jsx)(l.code,{children:"helper"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helper"})," prop is a string that is used as the helper for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertx",children:(0,t.jsx)(l.code,{children:"helperTx"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helperTx"})," prop is a key to a string in the ",(0,t.jsx)(l.code,{children:"i18n"})," translation file. It is used as the helper for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertxoptions",children:(0,t.jsx)(l.code,{children:"helperTxOptions"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helperTxOptions"})," prop is an object that is passed to the ",(0,t.jsx)(l.code,{children:"i18n"})," translation function. It is used to pass in values to the translation string."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertextprops",children:(0,t.jsx)(l.code,{children:"HelperTextProps"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"HelperTextProps"})," prop is a ",(0,t.jsx)(l.code,{children:"TextProps"})," object (from the ",(0,t.jsx)(l.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,t.jsx)(l.code,{children:"Text"})}),") component that is applied to the helper."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"switchaccessibilitymode",children:(0,t.jsx)(l.code,{children:"switchAccessibilityMode"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"switchAccessibilityMode"})," is a special prop for the switch variant that adds a text/icon label for on/off states. Options are ",(0,t.jsx)(l.code,{children:"text"})," and ",(0,t.jsx)(l.code,{children:"icon"})]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"checkboxicon",children:(0,t.jsx)(l.code,{children:"checkboxIcon"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"checkboxIcon"}),' is a prop for the checkbox variant that allows you to customize the icon used for the "on" state.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})})]})}function h(e={}){const{wrapper:l}={...(0,o.R)(),...e.components};return l?(0,t.jsx)(l,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,l,n)=>{n.d(l,{R:()=>i,x:()=>a});var t=n(6540);const o={},s=t.createContext(o);function i(e){const l=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(l):{...l,...e}}),[l,e])}function a(e){let l;return l=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(s.Provider,{value:l},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2870b86f.7b93335a.js b/assets/js/2870b86f.7b93335a.js new file mode 100644 index 00000000..4821c12e --- /dev/null +++ b/assets/js/2870b86f.7b93335a.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[9154],{4459:(e,l,n)=>{n.r(l),n.d(l,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>a,toc:()=>r});var t=n(4848),o=n(8453);const s={sidebar_position:41},i="Toggle",a={id:"ignite-cli/boilerplate/app/components/Toggle",title:"Toggle",description:"This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element.",source:"@site/docs/ignite-cli/boilerplate/app/components/Toggle.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/Toggle",permalink:"/ignite-cli/boilerplate/app/components/Toggle",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:41,frontMatter:{sidebar_position:41},sidebar:"Ignite",previous:{title:"TextField",permalink:"/ignite-cli/boilerplate/app/components/TextField"},next:{title:"Config folder",permalink:"/ignite-cli/boilerplate/app/config/"}},c={},r=[{value:"Props",id:"props",level:2},{value:"variant",id:"variant",level:3},{value:"status",id:"status",level:3},{value:"editable",id:"editable",level:3},{value:"value",id:"value",level:3},{value:"onValueChange",id:"onvaluechange",level:3},{value:"containerStyle",id:"containerstyle",level:3},{value:"inputOuterStyle",id:"inputouterstyle",level:3},{value:"inputInnerStyle",id:"inputinnerstyle",level:3},{value:"inputDetailStyle",id:"inputdetailstyle",level:3},{value:"labelPosition",id:"labelposition",level:3},{value:"label",id:"label",level:3},{value:"labelTx",id:"labeltx",level:3},{value:"labelTxOptions",id:"labeltxoptions",level:3},{value:"labelStyle",id:"labelstyle",level:3},{value:"LabelTextProps",id:"labeltextprops",level:3},{value:"helper",id:"helper",level:3},{value:"helperTx",id:"helpertx",level:3},{value:"helperTxOptions",id:"helpertxoptions",level:3},{value:"HelperTextProps",id:"helpertextprops",level:3},{value:"switchAccessibilityMode",id:"switchaccessibilitymode",level:3},{value:"checkboxIcon",id:"checkboxicon",level:3}];function d(e){const l={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.h1,{id:"toggle",children:"Toggle"}),"\n",(0,t.jsx)(l.p,{children:"This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element."}),"\n",(0,t.jsx)(l.p,{children:(0,t.jsx)(l.img,{src:"https://github.com/user-attachments/assets/ffbbe61e-9aea-4895-ab19-d38f76b3e379",alt:"toggle-component"})}),"\n",(0,t.jsx)(l.h2,{id:"props",children:"Props"}),"\n",(0,t.jsx)(l.h3,{id:"variant",children:(0,t.jsx)(l.code,{children:"variant"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"variant"})," prop determines the type of toggle to render. It can be one of the following: ",(0,t.jsx)(l.code,{children:"switch"}),", ",(0,t.jsx)(l.code,{children:"checkbox"}),", or ",(0,t.jsx)(l.code,{children:"radio"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"status",children:(0,t.jsx)(l.code,{children:"status"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"status"})," prop is used to determine the interactability or style of the toggle. It can be set to ",(0,t.jsx)(l.code,{children:"disabled"})," or ",(0,t.jsx)(l.code,{children:"error"}),". It is ",(0,t.jsx)(l.code,{children:"null"})," by default."]}),"\n",(0,t.jsxs)(l.p,{children:["When set to ",(0,t.jsx)(l.code,{children:"error"}),", elements of the toggle will have their colors set to ",(0,t.jsx)(l.code,{children:"colors.errorBackground"})," or ",(0,t.jsx)(l.code,{children:"colors.error"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"editable",children:(0,t.jsx)(l.code,{children:"editable"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"editable"})," prop determines whether the toggle is interactable. It is ",(0,t.jsx)(l.code,{children:"true"})," by default. Setting the ",(0,t.jsx)(l.code,{children:"status"})," prop to ",(0,t.jsx)(l.code,{children:"disabled"})," also will set ",(0,t.jsx)(l.code,{children:"editable"})," to ",(0,t.jsx)(l.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"value",children:(0,t.jsx)(l.code,{children:"value"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"value"})," prop determines whether the toggle is on or off. It is ",(0,t.jsx)(l.code,{children:"false"})," by default."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"onvaluechange",children:(0,t.jsx)(l.code,{children:"onValueChange"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"onValueChange"})," prop is a callback that is called when the toggle is toggled. It is ",(0,t.jsx)(l.code,{children:"undefined"})," by default. Since the toggle is controlled, you must set the ",(0,t.jsx)(l.code,{children:"value"})," prop in this callback to update the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:"\n"})}),"\n",(0,t.jsx)(l.h3,{id:"containerstyle",children:(0,t.jsx)(l.code,{children:"containerStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"containerStyle"})," prop is a style object that is applied to the container of the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputouterstyle",children:(0,t.jsx)(l.code,{children:"inputOuterStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputOuterStyle"}),' prop is a style object that is applied to the outer container of the toggle input. This gives the inputs their size, shape, "off" background-color, and outer border.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputinnerstyle",children:(0,t.jsx)(l.code,{children:"inputInnerStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputInnerStyle"}),' prop is a style object that is applied to the inner container of the toggle input. This gives the inputs their "on" background-color and inner border.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"inputdetailstyle",children:(0,t.jsx)(l.code,{children:"inputDetailStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"inputDetailStyle"})," prop is a style object that is applied to the detail container of the toggle input. For checkbox, this affects the Image component. For radio, this affects the dot View. For switch, this affects the knob View."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labelposition",children:(0,t.jsx)(l.code,{children:"labelPosition"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelPosition"})," prop determines the position of the label relative to the action component. It can be ",(0,t.jsx)(l.code,{children:"left"})," or ",(0,t.jsx)(l.code,{children:"right"}),". It is ",(0,t.jsx)(l.code,{children:"right"})," by default."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"label",children:(0,t.jsx)(l.code,{children:"label"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"label"})," prop is a string that is used as the label for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltx",children:(0,t.jsx)(l.code,{children:"labelTx"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelTx"})," prop is a key to a string in the ",(0,t.jsx)(l.code,{children:"i18n"})," translation file. It is used as the label for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltxoptions",children:(0,t.jsx)(l.code,{children:"labelTxOptions"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelTxOptions"})," prop is an object that is passed to the ",(0,t.jsx)(l.code,{children:"i18n"})," translation function. It is used to pass in values to the translation string."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labelstyle",children:(0,t.jsx)(l.code,{children:"labelStyle"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"labelStyle"})," prop is a ",(0,t.jsx)(l.code,{children:"StyleProp"})," object that is applied to the label."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"labeltextprops",children:(0,t.jsx)(l.code,{children:"LabelTextProps"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"LabelTextProps"})," prop is a ",(0,t.jsx)(l.code,{children:"TextProps"})," object (from the ",(0,t.jsx)(l.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,t.jsx)(l.code,{children:"Text"})}),") component that is applied to the label."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helper",children:(0,t.jsx)(l.code,{children:"helper"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helper"})," prop is a string that is used as the helper for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertx",children:(0,t.jsx)(l.code,{children:"helperTx"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helperTx"})," prop is a key to a string in the ",(0,t.jsx)(l.code,{children:"i18n"})," translation file. It is used as the helper for the toggle."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertxoptions",children:(0,t.jsx)(l.code,{children:"helperTxOptions"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"helperTxOptions"})," prop is an object that is passed to the ",(0,t.jsx)(l.code,{children:"i18n"})," translation function. It is used to pass in values to the translation string."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"helpertextprops",children:(0,t.jsx)(l.code,{children:"HelperTextProps"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"HelperTextProps"})," prop is a ",(0,t.jsx)(l.code,{children:"TextProps"})," object (from the ",(0,t.jsx)(l.a,{href:"/ignite-cli/boilerplate/app/components/Text",children:(0,t.jsx)(l.code,{children:"Text"})}),") component that is applied to the helper."]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"switchaccessibilitymode",children:(0,t.jsx)(l.code,{children:"switchAccessibilityMode"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"switchAccessibilityMode"})," is a special prop for the switch variant that adds a text/icon label for on/off states. Options are ",(0,t.jsx)(l.code,{children:"text"})," and ",(0,t.jsx)(l.code,{children:"icon"})]}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})}),"\n",(0,t.jsx)(l.h3,{id:"checkboxicon",children:(0,t.jsx)(l.code,{children:"checkboxIcon"})}),"\n",(0,t.jsxs)(l.p,{children:["The ",(0,t.jsx)(l.code,{children:"checkboxIcon"}),' is a prop for the checkbox variant that allows you to customize the icon used for the "on" state.']}),"\n",(0,t.jsx)(l.pre,{children:(0,t.jsx)(l.code,{className:"language-tsx",children:'\n'})})]})}function h(e={}){const{wrapper:l}={...(0,o.R)(),...e.components};return l?(0,t.jsx)(l,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},8453:(e,l,n)=>{n.d(l,{R:()=>i,x:()=>a});var t=n(6540);const o={},s=t.createContext(o);function i(e){const l=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(l):{...l,...e}}),[l,e])}function a(e){let l;return l=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:i(e.components),t.createElement(s.Provider,{value:l},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/4b050baf.2a0a1307.js b/assets/js/4b050baf.2a0a1307.js deleted file mode 100644 index 05f0cbdf..00000000 --- a/assets/js/4b050baf.2a0a1307.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkir_docs=self.webpackChunkir_docs||[]).push([[9775],{9461:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>s,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var o=t(4848),d=t(8453);const r={sidebar_position:32},c="Card",i={id:"ignite-cli/boilerplate/app/components/Card",title:"Card",description:"The Card component is intended to be used for vertically aligned related content. It is a container that can hold a heading, content, and footer. It can also hold a left and right component that will be aligned to the left and right of the card body.",source:"@site/docs/ignite-cli/boilerplate/app/components/Card.md",sourceDirName:"ignite-cli/boilerplate/app/components",slug:"/ignite-cli/boilerplate/app/components/Card",permalink:"/ignite-cli/boilerplate/app/components/Card",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:32,frontMatter:{sidebar_position:32},sidebar:"Ignite",previous:{title:"Button",permalink:"/ignite-cli/boilerplate/app/components/Button"},next:{title:"EmptyState",permalink:"/ignite-cli/boilerplate/app/components/EmptyState"}},s={},a=[{value:"Props",id:"props",level:2},{value:"preset",id:"preset",level:3},{value:"verticalAlignment",id:"verticalalignment",level:3},{value:"LeftComponent & RightComponent",id:"leftcomponent--rightcomponent",level:3},{value:"heading",id:"heading",level:3},{value:"headingTx",id:"headingtx",level:3},{value:"headingTxOptions",id:"headingtxoptions",level:3},{value:"headingStyle",id:"headingstyle",level:3},{value:"HeadingTextProps",id:"headingtextprops",level:3},{value:"HeadingComponent",id:"headingcomponent",level:3},{value:"content",id:"content",level:3},{value:"contentTx",id:"contenttx",level:3},{value:"contentTxOptions",id:"contenttxoptions",level:3},{value:"contentStyle",id:"contentstyle",level:3},{value:"ContentTextProps",id:"contenttextprops",level:3},{value:"ContentComponent",id:"contentcomponent",level:3},{value:"footer",id:"footer",level:3},{value:"footerTx",id:"footertx",level:3},{value:"footerTxOptions",id:"footertxoptions",level:3},{value:"footerStyle",id:"footerstyle",level:3},{value:"FooterTextProps",id:"footertextprops",level:3},{value:"FooterComponent",id:"footercomponent",level:3}];function l(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",...(0,d.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.h1,{id:"card",children:"Card"}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"Card"})," component is intended to be used for vertically aligned related content. It is a container that can hold a heading, content, and footer. It can also hold a left and right component that will be aligned to the left and right of the card body."]}),"\n",(0,o.jsx)(n.h2,{id:"props",children:"Props"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'Left}\n RightComponent={Right}\n heading="Card Heading"\n headingStyle={{ color: "#a511dc" }}\n HeadingTextProps={{ weight: "bold" }}\n content="Card Content"\n contentStyle={{ color: "#a511dc" }}\n ContentTextProps={{ weight: "light" }}\n footer="Card Footer"\n footerStyle={{ color: "#a511dc" }}\n FooterTextProps={{ weight: "medium" }}\n/>\n'})}),"\n",(0,o.jsx)(n.h3,{id:"preset",children:(0,o.jsx)(n.code,{children:"preset"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"preset"})," prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: ",(0,o.jsx)(n.code,{children:"default"})," and ",(0,o.jsx)(n.code,{children:"reversed"}),"."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsx)(n.h3,{id:"verticalalignment",children:(0,o.jsx)(n.code,{children:"verticalAlignment"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"verticalAlignment"})," prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: ",(0,o.jsx)(n.code,{children:"top"}),", ",(0,o.jsx)(n.code,{children:"center"}),", ",(0,o.jsx)(n.code,{children:"space-between"}),", and ",(0,o.jsx)(n.code,{children:"force-footer-bottom"}),". ",(0,o.jsx)(n.code,{children:"force-footer-bottom"})," behaves like ",(0,o.jsx)(n.code,{children:"top"}),", but will force the footer to the bottom of the card."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n'})}),"\n",(0,o.jsxs)(n.h3,{id:"leftcomponent--rightcomponent",children:[(0,o.jsx)(n.code,{children:"LeftComponent"})," & ",(0,o.jsx)(n.code,{children:"RightComponent"})]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"LeftComponent"})," and ",(0,o.jsx)(n.code,{children:"RightComponent"})," props are used to set the component that will be aligned to the left or right of the card body, respectively."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:'\n }\n RightComponent={\n \n"})}),"\n",(0,n.jsx)(t.h3,{id:"preset",children:(0,n.jsx)(t.code,{children:"preset"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"preset"})," prop is optional. This is the preset style of the button. It can be one of the following built-in options: ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"filled"}),", ",(0,n.jsx)(t.code,{children:"reversed"})]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'\n"})}),"\n",(0,n.jsx)(t.h3,{id:"preset",children:(0,n.jsx)(t.code,{children:"preset"})}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"preset"})," prop is optional. This is the preset style of the button. It can be one of the following built-in options: ",(0,n.jsx)(t.code,{children:"default"}),", ",(0,n.jsx)(t.code,{children:"filled"}),", ",(0,n.jsx)(t.code,{children:"reversed"})]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:'Open Source @ Infinite RedIgniteReactotronReact Native MLKitGluegun

AutoImage

Ignite's AutoImage Component is an enhanced version of the built-in React Native Image component. It automatically resizes the image view to fit a max width or height constraint

+

autoimage-component

<AutoImage
  source={{ uri: "https://pbs.twimg.com/profile_images/845384502067159040/pqF2RQ2q_400x400.jpg" }}
  maxWidth={200}
/>

AutoImage uses a useAutoImage hook to calculate the image's dimensions when you have a specific values you need to constrain the image within. This hook is also available for use in your own components.

const { width, height } = useAutoImage(uri, maxWidth, maxHeight)
-

Props​

+

Props​

Ignite's AutoImage component has two props of its own: maxWidth and maxHeight.

maxWidth and maxHeight​

These props are used to constrain the image to a specific size. Use maxWidth or maxHeight to set the maximum width or height of the image, and it will resize to whichever dimension you specify without skewing the aspect ratio. e.g. If the image is 300w x 200h, and you set maxWidth={200}, the image will be resized to 200w x 133h.

diff --git a/ignite-cli/boilerplate/app/components/Button/index.html b/ignite-cli/boilerplate/app/components/Button/index.html index 7f12d6a8..48536d44 100644 --- a/ignite-cli/boilerplate/app/components/Button/index.html +++ b/ignite-cli/boilerplate/app/components/Button/index.html @@ -10,12 +10,13 @@ - +

Button

The Button component is a wrapper around the Pressable component. Any prop that can be passed to Pressable can be passed to Button and it will be forwarded. Button renders a button with given text in a Text component or children. It allows you to specify the preset style of the button, you can override both the Pressable and Text styles.

+

button-component

<Button
  text="Click It"
  tx="button.clickIt"
  preset="default"
  onPress={() => Alert.alert("pressed")}
  style={[{ paddingVertical: 100 }, { borderRadius: 0 }]}
  pressedStyle={[{ backgroundColor: "red" }, { borderRadius: 0 }]}
  textStyle={[{ fontSize: 20 }, { color: "#a511dc" }]}
  pressedTextStyle={[{ fontSize: 20 }, { color: "#a51111" }]}
  RightAccessory={(props) => <Icon icon="check" />}
  LeftAccessory={(props) => <Icon icon="close" />}
/>

Props​

text​

diff --git a/ignite-cli/boilerplate/app/components/Card/index.html b/ignite-cli/boilerplate/app/components/Card/index.html index b3cb4250..3d5f044b 100644 --- a/ignite-cli/boilerplate/app/components/Card/index.html +++ b/ignite-cli/boilerplate/app/components/Card/index.html @@ -10,7 +10,7 @@ - + @@ -20,12 +20,15 @@

Props
<Card
  preset="reversed"
  verticalAlignment="space-between"
  LeftComponent={<Text>Left</Text>}
  RightComponent={<Text>Right</Text>}
  heading="Card Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="Card Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  footer="Card Footer"
  footerStyle={{ color: "#a511dc" }}
  FooterTextProps={{ weight: "medium" }}
/>

preset​

The preset prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: default and reversed.

+

card-component-01

<Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />

verticalAlignment​

The verticalAlignment prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: top, center, space-between, and force-footer-bottom. force-footer-bottom behaves like top, but will force the footer to the bottom of the card.

+

card-component-02

<Card
  verticalAlignment="space-between"
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
/>

LeftComponent & RightComponent​

The LeftComponent and RightComponent props are used to set the component that will be aligned to the left or right of the card body, respectively.

+

card-component-03

<Card
  LeftComponent={
    <AutoImage
      maxWidth={80}
      maxHeight={60}
      style={{ alignSelf: "center" }}
      source={{
        uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
      }}
    />
  }
  RightComponent={
    <Button preset="default" text="Click It" onPress={() => Alert.alert("pressed")} />
  }
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
/>

heading​

The heading prop is used to set the heading text of the card.

diff --git a/ignite-cli/boilerplate/app/components/EmptyState/index.html b/ignite-cli/boilerplate/app/components/EmptyState/index.html index 592bde93..a78b22af 100644 --- a/ignite-cli/boilerplate/app/components/EmptyState/index.html +++ b/ignite-cli/boilerplate/app/components/EmptyState/index.html @@ -10,7 +10,7 @@ - + @@ -19,7 +19,8 @@

Props​

<EmptyState
  preset="generic"
  style={{ padding: 10 }}
  imageSource={require("../../assets/images/sad-face.png")}
  imageStyle={{ height: 400, width: 400 }}
  ImageProps={{ resizeMode: "contain" }}
  heading="EmptyState Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="EmptyState Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  button="Press here"
  buttonOnPress={handleButtonPress}
/>

preset​

-

The preset prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: generic.

+

The preset prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: generic. +empty-state

<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />

style​

The style prop is used to set the style override for the container.

diff --git a/ignite-cli/boilerplate/app/components/Header/index.html b/ignite-cli/boilerplate/app/components/Header/index.html index 6633dc0e..11c7fb79 100644 --- a/ignite-cli/boilerplate/app/components/Header/index.html +++ b/ignite-cli/boilerplate/app/components/Header/index.html @@ -10,12 +10,13 @@ - +

Header

The Header component is a component that will appear at the top of your screen. It is used to hold navigation buttons and the screen title.

+

header-component

<Header
  titleTx="header.title"
  title="Header Title"
  leftIcon="back"
  rightIcon="bullet"
  onLeftPress={() => navigation.goBack()}
  onRightPress={() => Alert.alert("pressed")}
  style={{ height: 60 }}
  backgroundColor="purple"
  titleStyle={{ color: "white" }}
/>

Props​

titleMode​

diff --git a/ignite-cli/boilerplate/app/components/Icon/index.html b/ignite-cli/boilerplate/app/components/Icon/index.html index 725449b9..7dbe411d 100644 --- a/ignite-cli/boilerplate/app/components/Icon/index.html +++ b/ignite-cli/boilerplate/app/components/Icon/index.html @@ -10,12 +10,13 @@ - +

Icon

Ignite's Icon Component renders an icon using predefined icon images. You can use those, override them, or customize this component to create any number of image based icons. If onPress is passed, it will wrap the icon in a TouchableOpacity component, otherwise it will use a View component.

+

icon-component

<Icon icon="ladybug" onPress={() => Alert.alert("Hello")} />

Props​

Other than these props, you can pass any props that TouchableOpacity or View support and they will be forwarded to the respective wrapper component.

diff --git a/ignite-cli/boilerplate/app/components/ListItem/index.html b/ignite-cli/boilerplate/app/components/ListItem/index.html index 3a0e4170..7bd08543 100644 --- a/ignite-cli/boilerplate/app/components/ListItem/index.html +++ b/ignite-cli/boilerplate/app/components/ListItem/index.html @@ -10,12 +10,13 @@ - +

ListItem

The ListItem component is a component that is used to display a single item in a list. It provides a lot of flexibility in terms of what you can do with it. It can be used to display a simple piece text, or a complex component with multiple actionable and custom styled elements inside.

+

listitem-component

<ListItem height={50} />

Props​

As the ListItem component is interactable, it includes a TouchableOpacity component, which means that in addition to the custom props listed here, you can pass any props that are valid for a TouchableOpacity component.

diff --git a/ignite-cli/boilerplate/app/components/ListView/index.html b/ignite-cli/boilerplate/app/components/ListView/index.html index d03a84f2..b8f2e06f 100644 --- a/ignite-cli/boilerplate/app/components/ListView/index.html +++ b/ignite-cli/boilerplate/app/components/ListView/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/components/Screen/index.html b/ignite-cli/boilerplate/app/components/Screen/index.html index 1dc59d96..cfda74ee 100644 --- a/ignite-cli/boilerplate/app/components/Screen/index.html +++ b/ignite-cli/boilerplate/app/components/Screen/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/components/Text/index.html b/ignite-cli/boilerplate/app/components/Text/index.html index 779c46e7..ec8edc49 100644 --- a/ignite-cli/boilerplate/app/components/Text/index.html +++ b/ignite-cli/boilerplate/app/components/Text/index.html @@ -10,13 +10,14 @@ - +

Text

Ignite's Text Component is an enhanced version of the built-in React Native Text component. It adds internationalization and several useful (and customizable) property presets. You shouldn't need the built-in React Native Text component if you use this. It does everything the built-in one does and more.

By enhancing the Ignite Text component and using it across your app, you can make sure the right fonts, font weight, and other styles and behaviors are shared across your whole app.

+

text-component

Props​

text​

The text optional prop is the text of the component. We encourage you to not use this but rather use the tx prop instead.

diff --git a/ignite-cli/boilerplate/app/components/TextField/index.html b/ignite-cli/boilerplate/app/components/TextField/index.html index 02fee4ed..1d8bbbaf 100644 --- a/ignite-cli/boilerplate/app/components/TextField/index.html +++ b/ignite-cli/boilerplate/app/components/TextField/index.html @@ -10,13 +10,14 @@ - +

TextField

Ignite's TextField Component is an enhanced version of the built-in React Native TextInput component. It consists of TextInput and a Text(./Text.md) label.

With this component you will be able to standardise TextInput component across your app.

+

textfield-component

import { TextField } from '../components';

const [input, setInput] = useState("")
<TextField
  value={input}
  onChangeText={(value) => setInput(value)}
  status="error"
  label="Name"
  labelTx="login.nameLabel"
  labelTxOptions={{ name: "John" }}
  LabelTextProps={{ style: { color: "#FFFFFF" } }}
  placeholder="John Doe"
  placeholderTx="login.namePlaceholder"
  placeholderTxOptions={{ name: "John" }}
  helper="Enter your name"
  helperTx="login.nameHelper"
  helperTxOptions={{ name: "John" }}
  HelperTextProps={{ style: { color: "#FFFFFF" } }}
  style={{ backgroundColor: "#BFBFBF" }}
  containerStyle={{ backgroundColor: "#BFBFBF" }}
  inputWrapperStyle={{ backgroundColor: "#BFBFBF" }}
  RightAccessory={() => <Icon icon="check" />}
  LeftAccessory={() => <Icon icon="bell" />}
/>

Props​

The TextField component accepts all the props of the built-in React Native TextInput component which will be forwarded to the TextInput component, as well as the following props:

diff --git a/ignite-cli/boilerplate/app/components/Toggle/index.html b/ignite-cli/boilerplate/app/components/Toggle/index.html index d9fff96c..dca3a272 100644 --- a/ignite-cli/boilerplate/app/components/Toggle/index.html +++ b/ignite-cli/boilerplate/app/components/Toggle/index.html @@ -10,12 +10,13 @@ - +

Toggle

This component is a flexible component that can be used to toggle a boolean value. It can be used to render a switch, checkbox, or radio button, and exposes style props for every element.

+

toggle-component

Props​

variant​

The variant prop determines the type of toggle to render. It can be one of the following: switch, checkbox, or radio.

diff --git a/ignite-cli/boilerplate/app/components/index.html b/ignite-cli/boilerplate/app/components/index.html index 6d26ff14..8ee38fd0 100644 --- a/ignite-cli/boilerplate/app/components/index.html +++ b/ignite-cli/boilerplate/app/components/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/config/index.html b/ignite-cli/boilerplate/app/config/index.html index 86367c2f..5ce3b39d 100644 --- a/ignite-cli/boilerplate/app/config/index.html +++ b/ignite-cli/boilerplate/app/config/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/devtools/index.html b/ignite-cli/boilerplate/app/devtools/index.html index d10a6db6..6e077adc 100644 --- a/ignite-cli/boilerplate/app/devtools/index.html +++ b/ignite-cli/boilerplate/app/devtools/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/i18n/Internationalization/index.html b/ignite-cli/boilerplate/app/i18n/Internationalization/index.html index a09552ca..40ea7447 100644 --- a/ignite-cli/boilerplate/app/i18n/Internationalization/index.html +++ b/ignite-cli/boilerplate/app/i18n/Internationalization/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/index.html b/ignite-cli/boilerplate/app/index.html index 5f7212fd..a6580cc4 100644 --- a/ignite-cli/boilerplate/app/index.html +++ b/ignite-cli/boilerplate/app/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/models/index.html b/ignite-cli/boilerplate/app/models/index.html index 3e876e6e..9fe41af7 100644 --- a/ignite-cli/boilerplate/app/models/index.html +++ b/ignite-cli/boilerplate/app/models/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/navigators/AppNavigator.tsx/index.html b/ignite-cli/boilerplate/app/navigators/AppNavigator.tsx/index.html index 9f810cea..e4e1b772 100644 --- a/ignite-cli/boilerplate/app/navigators/AppNavigator.tsx/index.html +++ b/ignite-cli/boilerplate/app/navigators/AppNavigator.tsx/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/navigators/Navigation/index.html b/ignite-cli/boilerplate/app/navigators/Navigation/index.html index 36baf2e6..3c4fe705 100644 --- a/ignite-cli/boilerplate/app/navigators/Navigation/index.html +++ b/ignite-cli/boilerplate/app/navigators/Navigation/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/navigators/navigationUtilities.ts/index.html b/ignite-cli/boilerplate/app/navigators/navigationUtilities.ts/index.html index 77293e23..dd0cb860 100644 --- a/ignite-cli/boilerplate/app/navigators/navigationUtilities.ts/index.html +++ b/ignite-cli/boilerplate/app/navigators/navigationUtilities.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/screens/index.html b/ignite-cli/boilerplate/app/screens/index.html index a6484988..6c81d7d7 100644 --- a/ignite-cli/boilerplate/app/screens/index.html +++ b/ignite-cli/boilerplate/app/screens/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/services/api.ts/index.html b/ignite-cli/boilerplate/app/services/api.ts/index.html index b24660bd..0f0c87d7 100644 --- a/ignite-cli/boilerplate/app/services/api.ts/index.html +++ b/ignite-cli/boilerplate/app/services/api.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/services/index.html b/ignite-cli/boilerplate/app/services/index.html index 50bb2422..3d31d3b0 100644 --- a/ignite-cli/boilerplate/app/services/index.html +++ b/ignite-cli/boilerplate/app/services/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/theme/Theming/index.html b/ignite-cli/boilerplate/app/theme/Theming/index.html index d8122e10..506d0dfd 100644 --- a/ignite-cli/boilerplate/app/theme/Theming/index.html +++ b/ignite-cli/boilerplate/app/theme/Theming/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/theme/colors.ts/index.html b/ignite-cli/boilerplate/app/theme/colors.ts/index.html index 43ac3dec..0a125ec8 100644 --- a/ignite-cli/boilerplate/app/theme/colors.ts/index.html +++ b/ignite-cli/boilerplate/app/theme/colors.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/theme/spacing.ts/index.html b/ignite-cli/boilerplate/app/theme/spacing.ts/index.html index 6c600ee7..ddf1d466 100644 --- a/ignite-cli/boilerplate/app/theme/spacing.ts/index.html +++ b/ignite-cli/boilerplate/app/theme/spacing.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/theme/typography.ts/index.html b/ignite-cli/boilerplate/app/theme/typography.ts/index.html index 811af4fd..1ca6f75c 100644 --- a/ignite-cli/boilerplate/app/theme/typography.ts/index.html +++ b/ignite-cli/boilerplate/app/theme/typography.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/utils/index.html b/ignite-cli/boilerplate/app/utils/index.html index 38464b56..6bd497f2 100644 --- a/ignite-cli/boilerplate/app/utils/index.html +++ b/ignite-cli/boilerplate/app/utils/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/utils/useHeader.tsx/index.html b/ignite-cli/boilerplate/app/utils/useHeader.tsx/index.html index 035065f3..53dc8ce4 100644 --- a/ignite-cli/boilerplate/app/utils/useHeader.tsx/index.html +++ b/ignite-cli/boilerplate/app/utils/useHeader.tsx/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts/index.html b/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts/index.html index 46363e3b..74f53525 100644 --- a/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts/index.html +++ b/ignite-cli/boilerplate/app/utils/useSafeAreaInsetsStyle.ts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/assets/index.html b/ignite-cli/boilerplate/assets/index.html index 589bf40a..1614ac48 100644 --- a/ignite-cli/boilerplate/assets/index.html +++ b/ignite-cli/boilerplate/assets/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/eas.json/index.html b/ignite-cli/boilerplate/eas.json/index.html index ea2ef9d2..30cc8172 100644 --- a/ignite-cli/boilerplate/eas.json/index.html +++ b/ignite-cli/boilerplate/eas.json/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/ignite/index.html b/ignite-cli/boilerplate/ignite/index.html index 1cef54dc..5a6fb49b 100644 --- a/ignite-cli/boilerplate/ignite/index.html +++ b/ignite-cli/boilerplate/ignite/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/index.html b/ignite-cli/boilerplate/index.html index e77d4c57..bb5ed314 100644 --- a/ignite-cli/boilerplate/index.html +++ b/ignite-cli/boilerplate/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/ios/index.html b/ignite-cli/boilerplate/ios/index.html index 89e8c46e..db0daa43 100644 --- a/ignite-cli/boilerplate/ios/index.html +++ b/ignite-cli/boilerplate/ios/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/maestro/index.html b/ignite-cli/boilerplate/maestro/index.html index ac75a026..d9ce9386 100644 --- a/ignite-cli/boilerplate/maestro/index.html +++ b/ignite-cli/boilerplate/maestro/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/plugins/index.html b/ignite-cli/boilerplate/plugins/index.html index cbf2bf09..d0fd6b3e 100644 --- a/ignite-cli/boilerplate/plugins/index.html +++ b/ignite-cli/boilerplate/plugins/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/plugins/withSplashScreen/index.html b/ignite-cli/boilerplate/plugins/withSplashScreen/index.html index 8a1ebc66..a399954f 100644 --- a/ignite-cli/boilerplate/plugins/withSplashScreen/index.html +++ b/ignite-cli/boilerplate/plugins/withSplashScreen/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/boilerplate/test/index.html b/ignite-cli/boilerplate/test/index.html index 5deba5ea..10c86208 100644 --- a/ignite-cli/boilerplate/test/index.html +++ b/ignite-cli/boilerplate/test/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/cli/Ignite-CLI/index.html b/ignite-cli/cli/Ignite-CLI/index.html index a99b7463..e2bca513 100644 --- a/ignite-cli/cli/Ignite-CLI/index.html +++ b/ignite-cli/cli/Ignite-CLI/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/cli/Remove-Demo-Code/index.html b/ignite-cli/cli/Remove-Demo-Code/index.html index b037d36f..8b734096 100644 --- a/ignite-cli/cli/Remove-Demo-Code/index.html +++ b/ignite-cli/cli/Remove-Demo-Code/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/cli/Troubleshooting/index.html b/ignite-cli/cli/Troubleshooting/index.html index 41afd307..912e8840 100644 --- a/ignite-cli/cli/Troubleshooting/index.html +++ b/ignite-cli/cli/Troubleshooting/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Concepts/index.html b/ignite-cli/concept/Concepts/index.html index b0d75429..122d8515 100644 --- a/ignite-cli/concept/Concepts/index.html +++ b/ignite-cli/concept/Concepts/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Error-Boundary/index.html b/ignite-cli/concept/Error-Boundary/index.html index 639648ab..a35fe745 100644 --- a/ignite-cli/concept/Error-Boundary/index.html +++ b/ignite-cli/concept/Error-Boundary/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Generator-Templates/index.html b/ignite-cli/concept/Generator-Templates/index.html index b2a8f54f..66e0dce8 100644 --- a/ignite-cli/concept/Generator-Templates/index.html +++ b/ignite-cli/concept/Generator-Templates/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Generators/index.html b/ignite-cli/concept/Generators/index.html index 557581b3..be6e3944 100644 --- a/ignite-cli/concept/Generators/index.html +++ b/ignite-cli/concept/Generators/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/MobX-State-Tree/index.html b/ignite-cli/concept/MobX-State-Tree/index.html index 5cb88e17..05f54fe6 100644 --- a/ignite-cli/concept/MobX-State-Tree/index.html +++ b/ignite-cli/concept/MobX-State-Tree/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Styling/index.html b/ignite-cli/concept/Styling/index.html index de7c697a..5cc8ee22 100644 --- a/ignite-cli/concept/Styling/index.html +++ b/ignite-cli/concept/Styling/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Testing/index.html b/ignite-cli/concept/Testing/index.html index b9b6cdc7..e9b2c28e 100644 --- a/ignite-cli/concept/Testing/index.html +++ b/ignite-cli/concept/Testing/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/TypeScript/index.html b/ignite-cli/concept/TypeScript/index.html index 649ffc79..63d99921 100644 --- a/ignite-cli/concept/TypeScript/index.html +++ b/ignite-cli/concept/TypeScript/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/concept/Upgrades/index.html b/ignite-cli/concept/Upgrades/index.html index adb8d720..7c991b62 100644 --- a/ignite-cli/concept/Upgrades/index.html +++ b/ignite-cli/concept/Upgrades/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/contributing/Contributing-To-Ignite/index.html b/ignite-cli/contributing/Contributing-To-Ignite/index.html index d72688f7..086690ef 100644 --- a/ignite-cli/contributing/Contributing-To-Ignite/index.html +++ b/ignite-cli/contributing/Contributing-To-Ignite/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/contributing/Releasing-Ignite/index.html b/ignite-cli/contributing/Releasing-Ignite/index.html index 9584a739..528a091d 100644 --- a/ignite-cli/contributing/Releasing-Ignite/index.html +++ b/ignite-cli/contributing/Releasing-Ignite/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/contributing/Tour-of-Ignite/index.html b/ignite-cli/contributing/Tour-of-Ignite/index.html index 85e2f6af..922b4341 100644 --- a/ignite-cli/contributing/Tour-of-Ignite/index.html +++ b/ignite-cli/contributing/Tour-of-Ignite/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/expo/CNG/index.html b/ignite-cli/expo/CNG/index.html index 098e2044..c04f4cae 100644 --- a/ignite-cli/expo/CNG/index.html +++ b/ignite-cli/expo/CNG/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/expo/DIY/index.html b/ignite-cli/expo/DIY/index.html index 15e7329a..e4b5d67c 100644 --- a/ignite-cli/expo/DIY/index.html +++ b/ignite-cli/expo/DIY/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/expo/EAS/index.html b/ignite-cli/expo/EAS/index.html index 1a4e12a9..9204dd1f 100644 --- a/ignite-cli/expo/EAS/index.html +++ b/ignite-cli/expo/EAS/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/expo/Expo-Go/index.html b/ignite-cli/expo/Expo-Go/index.html index b5224904..477c29c1 100644 --- a/ignite-cli/expo/Expo-Go/index.html +++ b/ignite-cli/expo/Expo-Go/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/expo/Expo-and-Ignite/index.html b/ignite-cli/expo/Expo-and-Ignite/index.html index 702ec8b2..fdd6f89d 100644 --- a/ignite-cli/expo/Expo-and-Ignite/index.html +++ b/ignite-cli/expo/Expo-and-Ignite/index.html @@ -10,7 +10,7 @@ - + diff --git a/ignite-cli/index.html b/ignite-cli/index.html index b9d729c4..dcf084f4 100644 --- a/ignite-cli/index.html +++ b/ignite-cli/index.html @@ -10,7 +10,7 @@ - + diff --git a/index.html b/index.html index 90a9350a..447cf180 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - + diff --git a/intro/index.html b/intro/index.html index 1d71a654..9eaac415 100644 --- a/intro/index.html +++ b/intro/index.html @@ -10,7 +10,7 @@ - + diff --git a/markdown-page/index.html b/markdown-page/index.html index 984b1507..99127a14 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/adding-a-new-module/index.html b/react-native-mlkit/contributing/adding-a-new-module/index.html index fc98c06e..5b6700f4 100644 --- a/react-native-mlkit/contributing/adding-a-new-module/index.html +++ b/react-native-mlkit/contributing/adding-a-new-module/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/changesets-versions-and-releases/index.html b/react-native-mlkit/contributing/changesets-versions-and-releases/index.html index 9bcef80d..8b1d9440 100644 --- a/react-native-mlkit/contributing/changesets-versions-and-releases/index.html +++ b/react-native-mlkit/contributing/changesets-versions-and-releases/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/editing-native-code/index.html b/react-native-mlkit/contributing/editing-native-code/index.html index d1eaf045..9b9619d9 100644 --- a/react-native-mlkit/contributing/editing-native-code/index.html +++ b/react-native-mlkit/contributing/editing-native-code/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/index.html b/react-native-mlkit/contributing/index.html index 75e06154..3eeaaf18 100644 --- a/react-native-mlkit/contributing/index.html +++ b/react-native-mlkit/contributing/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/list/index.html b/react-native-mlkit/contributing/list/index.html index 2c19e3bf..ebd18045 100644 --- a/react-native-mlkit/contributing/list/index.html +++ b/react-native-mlkit/contributing/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/project-structure-and-management/index.html b/react-native-mlkit/contributing/project-structure-and-management/index.html index 120db2e7..4b9db144 100644 --- a/react-native-mlkit/contributing/project-structure-and-management/index.html +++ b/react-native-mlkit/contributing/project-structure-and-management/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/contributing/running-tests-on-untrusted-forks/index.html b/react-native-mlkit/contributing/running-tests-on-untrusted-forks/index.html index 9d28be74..54412efc 100644 --- a/react-native-mlkit/contributing/running-tests-on-untrusted-forks/index.html +++ b/react-native-mlkit/contributing/running-tests-on-untrusted-forks/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/document-scanner/index.html b/react-native-mlkit/document-scanner/index.html index 8c76633e..73eade16 100644 --- a/react-native-mlkit/document-scanner/index.html +++ b/react-native-mlkit/document-scanner/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/document-scanner/list/index.html b/react-native-mlkit/document-scanner/list/index.html index e8a40f3f..9d9311c2 100644 --- a/react-native-mlkit/document-scanner/list/index.html +++ b/react-native-mlkit/document-scanner/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/document-scanner/options/index.html b/react-native-mlkit/document-scanner/options/index.html index dfb6f7fc..1a6fae27 100644 --- a/react-native-mlkit/document-scanner/options/index.html +++ b/react-native-mlkit/document-scanner/options/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/advanced-usage/index.html b/react-native-mlkit/face-detection/advanced-usage/index.html index 21b416f2..78298191 100644 --- a/react-native-mlkit/face-detection/advanced-usage/index.html +++ b/react-native-mlkit/face-detection/advanced-usage/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/api/index.html b/react-native-mlkit/face-detection/api/index.html index c8f53931..8ddd5041 100644 --- a/react-native-mlkit/face-detection/api/index.html +++ b/react-native-mlkit/face-detection/api/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/faq-troubleshooting/index.html b/react-native-mlkit/face-detection/faq-troubleshooting/index.html index ab9d3b98..6687bba3 100644 --- a/react-native-mlkit/face-detection/faq-troubleshooting/index.html +++ b/react-native-mlkit/face-detection/faq-troubleshooting/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/getting-started/index.html b/react-native-mlkit/face-detection/getting-started/index.html index 0e43876a..86105fed 100644 --- a/react-native-mlkit/face-detection/getting-started/index.html +++ b/react-native-mlkit/face-detection/getting-started/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/index.html b/react-native-mlkit/face-detection/index.html index 634d1c1c..a5924061 100644 --- a/react-native-mlkit/face-detection/index.html +++ b/react-native-mlkit/face-detection/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/list/index.html b/react-native-mlkit/face-detection/list/index.html index c658623b..be52dbd0 100644 --- a/react-native-mlkit/face-detection/list/index.html +++ b/react-native-mlkit/face-detection/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/options/index.html b/react-native-mlkit/face-detection/options/index.html index a6990430..593c04a5 100644 --- a/react-native-mlkit/face-detection/options/index.html +++ b/react-native-mlkit/face-detection/options/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/face-detection/types/index.html b/react-native-mlkit/face-detection/types/index.html index d00f3219..05af0d9f 100644 --- a/react-native-mlkit/face-detection/types/index.html +++ b/react-native-mlkit/face-detection/types/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/image-labeling/image-labeler-options/index.html b/react-native-mlkit/image-labeling/image-labeler-options/index.html index 66ca6bca..115cf520 100644 --- a/react-native-mlkit/image-labeling/image-labeler-options/index.html +++ b/react-native-mlkit/image-labeling/image-labeler-options/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/image-labeling/index.html b/react-native-mlkit/image-labeling/index.html index 268f6ceb..3675d01d 100644 --- a/react-native-mlkit/image-labeling/index.html +++ b/react-native-mlkit/image-labeling/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/image-labeling/list/index.html b/react-native-mlkit/image-labeling/list/index.html index 654cc56c..7124cb47 100644 --- a/react-native-mlkit/image-labeling/list/index.html +++ b/react-native-mlkit/image-labeling/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/image-labeling/using-a-custom-model/index.html b/react-native-mlkit/image-labeling/using-a-custom-model/index.html index 33d70eb6..bbd8606c 100644 --- a/react-native-mlkit/image-labeling/using-a-custom-model/index.html +++ b/react-native-mlkit/image-labeling/using-a-custom-model/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/index.html b/react-native-mlkit/index.html index 7c2a52ba..7294cbf3 100644 --- a/react-native-mlkit/index.html +++ b/react-native-mlkit/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/object-detection/index.html b/react-native-mlkit/object-detection/index.html index 9fb844b3..07b2e121 100644 --- a/react-native-mlkit/object-detection/index.html +++ b/react-native-mlkit/object-detection/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/object-detection/list/index.html b/react-native-mlkit/object-detection/list/index.html index 72a67958..55b7e2a9 100644 --- a/react-native-mlkit/object-detection/list/index.html +++ b/react-native-mlkit/object-detection/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/object-detection/options/index.html b/react-native-mlkit/object-detection/options/index.html index f5fc52af..616b7032 100644 --- a/react-native-mlkit/object-detection/options/index.html +++ b/react-native-mlkit/object-detection/options/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/object-detection/using-a-custom-model/index.html b/react-native-mlkit/object-detection/using-a-custom-model/index.html index 0a0dc866..c884e8c2 100644 --- a/react-native-mlkit/object-detection/using-a-custom-model/index.html +++ b/react-native-mlkit/object-detection/using-a-custom-model/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/running-the-example-app/android/index.html b/react-native-mlkit/running-the-example-app/android/index.html index ff021f16..e386bfaf 100644 --- a/react-native-mlkit/running-the-example-app/android/index.html +++ b/react-native-mlkit/running-the-example-app/android/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/running-the-example-app/ios/index.html b/react-native-mlkit/running-the-example-app/ios/index.html index 17983390..e62dda25 100644 --- a/react-native-mlkit/running-the-example-app/ios/index.html +++ b/react-native-mlkit/running-the-example-app/ios/index.html @@ -10,7 +10,7 @@ - + diff --git a/react-native-mlkit/running-the-example-app/list/index.html b/react-native-mlkit/running-the-example-app/list/index.html index 217b5cfe..bd11b1c7 100644 --- a/react-native-mlkit/running-the-example-app/list/index.html +++ b/react-native-mlkit/running-the-example-app/list/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/contributing/architecture/index.html b/reactotron/contributing/architecture/index.html index 3bf2e3b1..e7858407 100644 --- a/reactotron/contributing/architecture/index.html +++ b/reactotron/contributing/architecture/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/contributing/index.html b/reactotron/contributing/index.html index 79eaaa5a..c5cdcb3a 100644 --- a/reactotron/contributing/index.html +++ b/reactotron/contributing/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/contributing/monorepo/index.html b/reactotron/contributing/monorepo/index.html index db4f792e..90c7e2fb 100644 --- a/reactotron/contributing/monorepo/index.html +++ b/reactotron/contributing/monorepo/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/contributing/releasing/index.html b/reactotron/contributing/releasing/index.html index de52b5c1..ab84e765 100644 --- a/reactotron/contributing/releasing/index.html +++ b/reactotron/contributing/releasing/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/custom-commands/index.html b/reactotron/custom-commands/index.html index 13356280..eb45600b 100644 --- a/reactotron/custom-commands/index.html +++ b/reactotron/custom-commands/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/index.html b/reactotron/index.html index 6ee2b8d8..dd41a2a5 100644 --- a/reactotron/index.html +++ b/reactotron/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/apisauce/index.html b/reactotron/plugins/apisauce/index.html index 942ee3be..7796ed31 100644 --- a/reactotron/plugins/apisauce/index.html +++ b/reactotron/plugins/apisauce/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/async-storage/index.html b/reactotron/plugins/async-storage/index.html index 56111359..bc32a5b9 100644 --- a/reactotron/plugins/async-storage/index.html +++ b/reactotron/plugins/async-storage/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/benchmark/index.html b/reactotron/plugins/benchmark/index.html index b6a4ccca..1c72084b 100644 --- a/reactotron/plugins/benchmark/index.html +++ b/reactotron/plugins/benchmark/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/index.html b/reactotron/plugins/index.html index 265c8283..2b54b76e 100644 --- a/reactotron/plugins/index.html +++ b/reactotron/plugins/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/mst/index.html b/reactotron/plugins/mst/index.html index 7810f979..7be2fea8 100644 --- a/reactotron/plugins/mst/index.html +++ b/reactotron/plugins/mst/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/networking/index.html b/reactotron/plugins/networking/index.html index b9f7c400..c564ebd7 100644 --- a/reactotron/plugins/networking/index.html +++ b/reactotron/plugins/networking/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/open-in-editor/index.html b/reactotron/plugins/open-in-editor/index.html index bce60614..8fa4ec38 100644 --- a/reactotron/plugins/open-in-editor/index.html +++ b/reactotron/plugins/open-in-editor/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/overlay/index.html b/reactotron/plugins/overlay/index.html index 91c67acb..425930b2 100644 --- a/reactotron/plugins/overlay/index.html +++ b/reactotron/plugins/overlay/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/react-native-mmkv/index.html b/reactotron/plugins/react-native-mmkv/index.html index 88429e8d..2ff6b59d 100644 --- a/reactotron/plugins/react-native-mmkv/index.html +++ b/reactotron/plugins/react-native-mmkv/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/redux/index.html b/reactotron/plugins/redux/index.html index 1f4fcf83..7015f7b1 100644 --- a/reactotron/plugins/redux/index.html +++ b/reactotron/plugins/redux/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/storybook/index.html b/reactotron/plugins/storybook/index.html index 186de8ac..d6addb79 100644 --- a/reactotron/plugins/storybook/index.html +++ b/reactotron/plugins/storybook/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/track-global-errors/index.html b/reactotron/plugins/track-global-errors/index.html index 45bd74a7..896f1108 100644 --- a/reactotron/plugins/track-global-errors/index.html +++ b/reactotron/plugins/track-global-errors/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/plugins/track-global-logs/index.html b/reactotron/plugins/track-global-logs/index.html index cdaf855a..cea2ff4c 100644 --- a/reactotron/plugins/track-global-logs/index.html +++ b/reactotron/plugins/track-global-logs/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/quick-start/getting-started/index.html b/reactotron/quick-start/getting-started/index.html index a0caec55..11f233e6 100644 --- a/reactotron/quick-start/getting-started/index.html +++ b/reactotron/quick-start/getting-started/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/quick-start/react-js/index.html b/reactotron/quick-start/react-js/index.html index 76d33b06..f0810742 100644 --- a/reactotron/quick-start/react-js/index.html +++ b/reactotron/quick-start/react-js/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/quick-start/react-native/index.html b/reactotron/quick-start/react-native/index.html index 926c6d85..804f1c4a 100644 --- a/reactotron/quick-start/react-native/index.html +++ b/reactotron/quick-start/react-native/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/tips/index.html b/reactotron/tips/index.html index e9110135..9003672e 100644 --- a/reactotron/tips/index.html +++ b/reactotron/tips/index.html @@ -10,7 +10,7 @@ - + diff --git a/reactotron/troubleshooting/index.html b/reactotron/troubleshooting/index.html index 99a9bf16..104c370f 100644 --- a/reactotron/troubleshooting/index.html +++ b/reactotron/troubleshooting/index.html @@ -10,7 +10,7 @@ - + diff --git a/search/index.html b/search/index.html index 4e6ce8e4..e0fb8ca6 100644 --- a/search/index.html +++ b/search/index.html @@ -10,7 +10,7 @@ - +