diff --git a/docuilib/versioned_docs/version-7.0.0/components/basic/Tests.md b/docuilib/versioned_docs/version-7.0.0/components/basic/Tests.md new file mode 100644 index 0000000000..d8431c8a07 --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/basic/Tests.md @@ -0,0 +1,9 @@ +--- +id: Tests +title: Tests +sidebar_label: Tests +--- + +import ComponentPage from '@site/src/components/ComponentPage'; + +Text goes here$2"],"docs":{"hero":{"description":"A wrapper for Text component with extra functionality like modifiers support","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]},"tabs":[{"title":"Overview","sections":[{"type":"table","title":"Table","description":"Examples of using the Text component","name":"Table Name","columns":["Item","Content[0]","Content[1]"],"items":[{"title":"Item #1","description":"Item #1 Subtitle","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"},{"height":170,"value":"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FKrv1pLl7kq2L52vMRwd498%2FMADS-Guidelines%3Fnode-id%3D22898-858566%26t%3D1FnW55XGiZ6Bc9Cr-1"}]},{"title":"Item #2","description":"Item #2 Subtitle","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]},{"title":"Item #3","description":"Item #3 Subtitle","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"},{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]}]},{"type":"table","title":"","description":"","columns":["Item","Content[0]","Content[1]"],"items":[{"title":"Item #1","description":"Item #1 Subtitle","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"},{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]},{"title":"Item #2","description":"Item #2 Subtitle","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]}]}]},{"title":"Guidelines","sections":[{"type":"section","title":"Section","description":"Examples of using the Text component","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"}]},{"type":"section","layout":"horizontal","title":"Horizontal Section","description":"Examples of using the Text component","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"},{"value":"https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FKrv1pLl7kq2L52vMRwd498%2FMADS-Guidelines%3Fnode-id%3D22898-858566%26t%3D1FnW55XGiZ6Bc9Cr-1"}]},{"type":"list","title":"List","description":"Examples of using the Text component","items":[{"title":"Item #1","description":"This is item #1","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"}]},{"title":"Item #2","description":"This is item #2","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"}]}]},{"type":"list","layout":"horizontal","title":"List Horizontal Items","description":"Examples of using the Text component","items":[{"title":"Item #1","description":"This is item #1","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]},{"title":"Item #2","description":"This is item #2","content":[{"value":"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"}]}]},{"type":"section","title":"Markdown support","description":"markdown:##Title\n\nThis is a markdown content\n\n With a list:\n- item 1\n- item 2"},{"type":"section","title":"HTML support","description":"html:

Title

This is a html content

"}]},{"title":"Code","sections":[{"title":"Usage","type":"usage"},{"type":"info"},{"type":"tip"},{"type":"banner","title":"NOTE","description":"This is an interesting information"},{"type":"banner","title":"Banner","description":"This is some massage to the user","color":"pink","icon":""},{"type":"props","title":"API","description":"This is the list of additional props for the Text component"}]}]}}}/> diff --git a/docuilib/versioned_docs/version-7.0.0/components/basic/Text.md b/docuilib/versioned_docs/version-7.0.0/components/basic/Text.md new file mode 100644 index 0000000000..275f7db25d --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/basic/Text.md @@ -0,0 +1,60 @@ +--- +id: Text +title: Text +sidebar_label: Text +--- + +A wrapper for Text component with extra functionality like modifiers support +[(code example)](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.tsx) +:::info +This component extends **[Text](https://reactnative.dev/docs/text)** props. +::: +:::tip +This component support **margins, color, typography** modifiers. +::: +
+ + + + + +
+ +### Usage +``` jsx live +Text goes here +``` +## API +### animated +Use Animated.Text as a container +`boolean ` + +### center +Whether to center the text (using textAlign) +`boolean ` + +### color +Color of the text +`string ` + +### highlightString +Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above +`HighlightString | HighlightString[] ` + +### highlightStyle +Custom highlight style for highlight string +`TextStyle ` + +### recorderTag +Recorder Tag +`'mask' | 'unmask' ` + +### underline +Whether to add an underline +`boolean ` + +### uppercase +Whether to change the text to uppercase +`boolean ` + + diff --git a/docuilib/versioned_docs/version-7.0.0/components/basic/TouchableOpacity.md b/docuilib/versioned_docs/version-7.0.0/components/basic/TouchableOpacity.md new file mode 100644 index 0000000000..d3bb81543a --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/basic/TouchableOpacity.md @@ -0,0 +1,60 @@ +--- +id: TouchableOpacity +title: TouchableOpacity +sidebar_label: TouchableOpacity +--- + +A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor +[(code example)](https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.tsx) +:::info +This component extends **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity)** props. +::: +:::tip +This component support **margins, paddings, alignments, background, borderRadius** modifiers. +::: +
+ +
+ +### Usage +``` jsx live + console.log('pressed')}>Click Me! +``` +## API +### activeBackgroundColor +Apply background color on TouchableOpacity when active (press is on) +`string ` + +### backgroundColor +Background color for TouchableOpacity +`string ` + +### customValue +Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback +`any ` + +### onPress +On press callback +`(props?: TouchableOpacityProps & {event: GestureResponderEvent} | any) => void ` + +### recorderTag +Recorder Tag +`'mask' | 'unmask' ` + +### style +Custom style +`ViewStyle ` + +### throttleOptions +Throttle options +`ThrottleOptions ` + +### throttleTime +Throttle time in MS for onPress callback +`number ` + +### useNative +Should use an enhanced native implementation with extra features +`boolean ` + + diff --git a/docuilib/versioned_docs/version-7.0.0/components/basic/View.md b/docuilib/versioned_docs/version-7.0.0/components/basic/View.md new file mode 100644 index 0000000000..d768a66fb7 --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/basic/View.md @@ -0,0 +1,61 @@ +--- +id: View +title: View +sidebar_label: View +--- + +An enhanced View component +[(code example)](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ViewScreen.js) +:::info +This component extends **[View](https://reactnative.dev/docs/view)** props. +::: +:::tip +This component support **margins, paddings, alignments, background, borderRadius** modifiers. +::: +
+ +### Usage +``` jsx live + + + + + + + + +``` +## API +### animated +Use Animate.View as a container +`boolean ` + +### backgroundColor +Set background color +`string ` + +### inaccessible +Turn off accessibility for this view and its nested children +`boolean ` + +### reanimated +Use Animate.View (from react-native-reanimated) as a container +`boolean ` + +### recorderTag +Recorder Tag +`'mask' | 'unmask' ` + +### renderDelay +Experimental: Pass time in ms to delay render +`number ` + +### style +Custom style +`ViewStyle ` + +### useSafeArea +If true, will render as SafeAreaView +`boolean ` + + diff --git a/docuilib/versioned_docs/version-7.0.0/components/controls/ActionBar.md b/docuilib/versioned_docs/version-7.0.0/components/controls/ActionBar.md new file mode 100644 index 0000000000..eab56d8fbf --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/controls/ActionBar.md @@ -0,0 +1,60 @@ +--- +id: ActionBar +title: ActionBar +sidebar_label: ActionBar +--- + +Quick actions bar, each action support Button component props +[(code example)](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ActionBarScreen.tsx) +:::info +This component extends **[View](/docs/components/basic/View)** props. +::: +:::tip +This component support **margin, padding** modifiers. +::: +
+ +
+ +### Usage +``` jsx live + + console.log('delete')}, + {label: 'Replace Photo', onPress: () => console.log('replace photo')}, + {label: 'Edit', onPress: () => console.log('edit')} + ]} + /> + +``` +## API +### actions +The actions for the action bar +`ButtonProps[] ` + +### backgroundColor +Background color +`string ` + +### centered +Should action be equally centered +`boolean ` + +### height +Height +`number ` + +### keepRelative +Keep the action bar position relative instead of it absolute position +`boolean ` + +### style +Component's style +`ViewStyle ` + +### useSafeArea +In iOS, use safe area, in case component attached to the bottom +`boolean ` + + diff --git a/docuilib/versioned_docs/version-7.0.0/components/controls/Button.md b/docuilib/versioned_docs/version-7.0.0/components/controls/Button.md new file mode 100644 index 0000000000..321687e4c9 --- /dev/null +++ b/docuilib/versioned_docs/version-7.0.0/components/controls/Button.md @@ -0,0 +1,156 @@ +--- +id: Button +title: Button +sidebar_label: Button +--- + +Customizable button component that handles press events +[(code example)](https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.tsx) +:::info +This component extends **[TouchableOpacity](/docs/components/basic/TouchableOpacity)** props. +::: +:::tip +This component support **margin, background** modifiers. +::: +
+ + + + + + + + + + + + + + + + + +
+ +### Usage +``` jsx live +