chore: cleanup

rigor789 · rigor789 · commit a49c1d8b8883 · 2023-08-26T14:06:56.000+02:00
diff --git a/content/tutorials/build-a-master-detail-app-with-plain-javascript.md b/content/tutorials/build-a-master-detail-app-with-plain-javascript.md
@@ -522,7 +522,7 @@ Next, let's add the tap event to the ListView items. Open `home-page.xml` and ad
 
 ### Access navigation props
 
-We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed in `id` via the page's `navigationContext`. We will first get the `navigationContext` on our details page and pass it along to our `DetailsViewModel`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `details-page.js` and add the following:
+We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed-in `id` via the page's `navigationContext`. We will first get the `navigationContext` on our details page and pass it along to our `DetailsViewModel`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `details-page.js` and add the following:
 
 ```javascript{9}
 // app/details/details-page.js
@@ -547,7 +547,7 @@ import { FlickService } from '../services/flick.service'
 export class DetailsViewModel extends Observable {
   #flick
 
-  // the passed in context object during the navigation will be here
+  // the passed-in context object during the navigation will be here
   constructor(_context) {
     super()
 
diff --git a/content/tutorials/build-a-master-detail-app-with-plain-typescript.md b/content/tutorials/build-a-master-detail-app-with-plain-typescript.md
@@ -550,7 +550,7 @@ Next, let's add the tap event to the ListView items. Open `home-page.xml` and ad
 
 ### Access navigation props
 
-We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed in `id` via the page's `navigationContext`. We will first get the `navigationContext` on our details page and pass it along to our `DetailsViewModel`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `details-page.ts` and add the following:
+We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed-in `id` via the page's `navigationContext`. We will first get the `navigationContext` on our details page and pass it along to our `DetailsViewModel`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `details-page.ts` and add the following:
 
 ```typescript{9}
 // app/details/details-page.ts
@@ -578,7 +578,7 @@ import { FlickModel } from '../models'
 export class DetailsViewModel extends Observable {
   private _flick: FlickModel
 
-  // the passed in context object during the navigation will be here
+  // the passed-in context object during the navigation will be here
   constructor(private _context: { flickId: number }) {
     super()
 
diff --git a/content/tutorials/build-a-master-detail-app-with-react.md b/content/tutorials/build-a-master-detail-app-with-react.md
@@ -732,7 +732,7 @@ export function HomeScreen({ navigation }: HomeScreenProps) {
 
 ### Access navigation props
 
-We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed in `id` via the `route.params` property. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `DetailsScreen.tsx` and add the following:
+We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed-in `id` via the `route.params` property. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `DetailsScreen.tsx` and add the following:
 
 ```tsx{9,17,19}
 // src/components/DetailsScreen.tsx
diff --git a/content/tutorials/build-a-master-detail-app-with-svelte.md b/content/tutorials/build-a-master-detail-app-with-svelte.md
@@ -546,7 +546,7 @@ Next, let's add the tap event to the ListView items. Open `Home.svelte` and add
 
 ### Access navigation props
 
-We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed in `flickId` by declaring and exporting a variable with the same name in the details component. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `Details.svelte` and add the following:
+We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details page. We can access the passed-in `flickId` by declaring and exporting a variable with the same name in the details component. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `Details.svelte` and add the following:
 
 ```xml{7}
 <!-- app/pages/Details.svelte -->
diff --git a/content/tutorials/build-a-master-detail-app-with-vue.md b/content/tutorials/build-a-master-detail-app-with-vue.md
@@ -612,7 +612,7 @@ Next, let's add the tap event to the ListView items. Open `Home.vue` and add the
 
 ### Access navigation props
 
-We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details component. We can use the `props` property to get the passed in `id`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `Details.vue` and add the following:
+We passed in the `id` of the flick card the user tapped on in the previous section as we navigate to the details component. We can use the `props` property to get the passed-in `id`. We can then use the `id` to get the selected flick information to be displayed in our details component's template. Open `Details.vue` and add the following:
 
 ```vue{10,13,17,20-22}
 <!-- app/components/Details.vue -->
diff --git a/content/ui/action-bar.md b/content/ui/action-bar.md
@@ -348,7 +348,8 @@ If you need to place a custom button on the left side of the `<ActionBar>` (e.g.
 On Android, you can't add text inside the navigation button.
 You can use the icon property to set an image (e.g., `~/images/nav-image.png` or `res:\\ic_nav`).
 You can use `android.systemIcon` to set one of the system icons available in Android.
-In this case, there is no default behaviour for NavigationButton tap event, and we should set the callback function, which will be executed.
+In this case, there is no default behavior for NavigationButton tap event, instead the passed-in callback will be called.
+
 :::
 
 ## Setting an app icon for Android in ActionBar
@@ -415,7 +416,7 @@ In this case, there is no default behaviour for NavigationButton tap event, and
 
 ## Styling ActionBar
 
-To style the `<ActionBar>`, you can use only `background-color` and `color` properties. Alternatively, you can use [@nativescript/tailwind](https://docs.nativescript.org/plugins/tailwindcss.html) and use the default styles for each different theme. The icon property of `ActionItem` can use Icon Fonts with the `font://` prefix. By setting up this prefix, a new image will be generated, which will be set as an `<ActionItem>`'s icon resource. While using this functionality, we need to specify the font-size, which will calculate the size of the generated image base on the device's dpi.
+To style the `<ActionBar>`, you can use only `background-color` and `color` properties. Alternatively, you can use [@nativescript/tailwind](https://docs.nativescript.org/plugins/tailwindcss.html) and use the default styles for each different theme. The icon property of `ActionItem` can use Icon Fonts with the `font://` prefix. By setting up this prefix, a new image will be generated, and set as the `<ActionItem>`'s icon resource. While using this functionality, we need to specify the font-size, to calculate the size of the generated image base on the device's dpi.
 
 <!-- //github.com/ flavor angular
 
@@ -531,7 +532,7 @@ To remove this styling from your app, you can set the `flat` property to `true`.
 actionBar.title = 'About'
 ```
 
-Gets or sets the action bar title.
+Gets or sets the ActionBar title.
 
 ---
 
@@ -590,7 +591,7 @@ Gets the collection of action items.
 actionBar.iosIconRenderingMode
 ```
 
-Gets or set the [UIImage.RenderingMode](https://developer.apple.com/documentation/uikit/uiimage/renderingmode) of the action bar icons in iOS. Defaults to `alwaysOriginal`. Available values:
+Gets or set the [UIImage.RenderingMode](https://developer.apple.com/documentation/uikit/uiimage/renderingmode) of the ActionBar icons in iOS. Defaults to `alwaysOriginal`. Available values:
 
 - `automatic`
 - `alwaysTemplate`
@@ -636,7 +637,7 @@ Sets the position of the item. Avaibable values: `left` or `right`. Defaults to
 <ActionItem android.position="popup">
 ```
 
-Sets the position of the item. Avaibable values: ``enum`: `actionBar`, `popup`, `actionBarIfRoom`. Defaults to `actionBar`.
+Sets the position of the item. Avaibable values: `ActionBar`, `popup`, `actionBarIfRoom`. Defaults to `actionBar`.
 
 ---
 
@@ -660,13 +661,17 @@ Sets a path to a resource icon ( see the [list of Android system drawables](http
 
 ---
 
+<!-- textlint-disable terminology -->
+
 ### actionBar
 
+<!-- textlint-enable-->
+
 ```ts
 actionBar: ActionBar = actionItem.actionBar
 ```
 
-Gets the action bar that contains the action item.
+Gets the ActionBar that contains the action item.
 
 ---
 
diff --git a/content/ui/datepicker.md b/content/ui/datepicker.md
@@ -274,13 +274,13 @@ Gets or sets the year.
 datePicker.iosPreferredDatePickerStyle = 2
 ```
 
-Gets or set the UIDatePickerStyle of the date picker in iOS `13.4+`. Defaults to `0`.
+Gets or set the UIDatePickerStyle of the DatePicker in iOS `13.4+`. Defaults to `0`.
 Valid values are numbers:
 
-- `0 = automatic`: system picks the concrete style based on the current platform and date picker mode.
-- `1 = wheels`: the date picker displays as a wheel picker.
-- `2 = compact` : the date picker displays as a label that when tapped displays a calendar-style editor.
-- `3 = inline` : the date pickers displays as an inline, editable field
+- `0 = automatic`: system picks the concrete style based on the current platform and DatePicker mode.
+- `1 = wheels`: the DatePicker displays as a wheel picker.
+- `2 = compact` : the DatePicker displays as a label that when tapped displays a calendar-style editor.
+- `3 = inline` : the DatePickers displays as an inline, editable field
 
 ---
 
diff --git a/content/ui/flexbox-layout.md b/content/ui/flexbox-layout.md
@@ -2,7 +2,7 @@
 title: FlexBoxLayout
 ---
 
-`<FlexboxLayout>` is a layout container that provides a non-exact implementation of the [CSS Flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.
+`<FlexboxLayout>` is a layout container that provides a non-exact implementation of the [CSS FlexboxLayout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.
 
 ## Placing child elements horizontally
 
diff --git a/content/ui/grid-layout.md b/content/ui/grid-layout.md
@@ -16,7 +16,7 @@ You can set a fixed size for column width and row height or you can create them
 
 See [References](#references) for more information.
 
-### Grid layout with fixed sizing
+### GridLayout with fixed sizing
 
 The following example creates a simple 2-by-2 grid with fixed column widths and row heights.
 
@@ -31,7 +31,7 @@ The following example creates a simple 2-by-2 grid with fixed column widths and
 
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout.svg" />
 
-### Grid layout with star sizing
+### GridLayout with star sizing
 
 The following example creates a grid with responsive design, where space is allotted proportionally to child elements.
 
@@ -46,7 +46,7 @@ The following example creates a grid with responsive design, where space is allo
 
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_star_sizing.svg" />
 
-### Grid layout with fixed and auto sizing
+### GridLayout with fixed and auto sizing
 
 The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height.
 
@@ -61,7 +61,7 @@ The following example create a grid with one auto-sized column and one column wi
 
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_fixed_auto.svg" />
 
-### Grid layout with mixed sizing and merged cells
+### GridLayout with mixed sizing and merged cells
 
 The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells.
 
diff --git a/content/ui/listpicker.md b/content/ui/listpicker.md
@@ -123,7 +123,7 @@ export class HelloWorldModel extends Observable {
 }
 ```
 
-Gets or sets the specified items array as options in the list picker.
+Gets or sets the specified items array as options in the ListPicker.
 
 ---
 
diff --git a/content/ui/page.md b/content/ui/page.md
@@ -211,7 +211,7 @@ Developers coming from a web background would usually reach for the `mounted` li
 
 ## Props
 
-### actionBar
+### ActionBar
 
 ```ts
 actionBar: ActionBar = page.actionBar
diff --git a/content/ui/placeholder.md b/content/ui/placeholder.md
@@ -2,7 +2,7 @@
 title: Placeholder
 ---
 
-`<Placeholder>` allows adding native views directly in your markup without creating a full [View](#) wrapper for it. When NativeScript is constructing the UI and encounters a placeholder element, it emits a `creatingView` event, allowing you to pass in any native view to be rendered by assigning it to the `args.view` parameter.
+`<Placeholder>` allows adding native views directly in your markup without creating a full [View](#) wrapper for it. When NativeScript is constructing the UI and encounters a Placeholder element, it emits a `creatingView` event, allowing you to pass in any native view to be rendered by assigning it to the `args.view` parameter.
 
 ### Creating a Simple Placeholder
 
diff --git a/content/ui/root-layout.md b/content/ui/root-layout.md
@@ -5,9 +5,9 @@ title: RootLayout
 <!-- TODO: Add Preview -->
 <!-- TODO: Add flavors tabs -->
 
-`<RootLayout>` is a layout container designed to be used as the primary root layout container for your app with a built-in API to easily control dynamic view layers. It extends a [GridLayout]() so has all the features of a grid but enhanced with additional apis.
+`<RootLayout>` is a layout container designed to be used as the primary RootLayout container for your app with a built-in API to easily control dynamic view layers. It extends a [GridLayout]() so has all the features of a grid but enhanced with additional APIs.
 
-You can use `getRootLayout()` to get a reference to the root layout in your app from anywhere.
+You can use `getRootLayout()` to get a reference to the RootLayout in your app from anywhere.
 
 ## Usage
 
diff --git a/content/ui/searchbar.md b/content/ui/searchbar.md
@@ -165,7 +165,7 @@ export class UsageComponent {
 <SearchBar hint="Enter search term here ..."  />
 ```
 
-Gets or sets placeholder text for the input area.
+Gets or sets Placeholder text for the input area.
 
 ---
 
@@ -195,7 +195,7 @@ Gets or sets the background color of the input area.
  <SearchBar textFieldHintColor="#fff"/>
 ```
 
-Gets or sets the color of the placeholder text.
+Gets or sets the color of the Placeholder text.
 
 ---
 
diff --git a/content/ui/segmentedbar.md b/content/ui/segmentedbar.md
@@ -234,7 +234,7 @@ const segmentedBar = new SegmentedBar()
 segmentedBar.items = [segmentedBarItem1, segmentedBarItem2]
 ```
 
-An array of items to be displayed in the segmented bar. Represents the button labels or icons of the segmented bar.
+An array of items to be displayed in the SegmentedBar. Represents the button labels or icons of the SegmentedBar.
 
 ---
 
@@ -283,7 +283,7 @@ onSelectedIndexChange(args: SelectedIndexChangedEventData) {
 }
 ```
 
-Emitted when the an item on the segmented bar is tapped. See the [SelectedIndexChangedEventData interface](#selectedindexchangedeventdata-interface) for the event data.
+Emitted when the an item on the SegmentedBar is tapped. See the [SelectedIndexChangedEventData interface](#selectedindexchangedeventdata-interface) for the event data.
 
 ---
 
diff --git a/content/ui/stack-layout.md b/content/ui/stack-layout.md
@@ -7,7 +7,8 @@ title: StackLayout
 When you add child views to a StackLayout, they will be arranged one after the other in the specified direction, either horizontally or vertically. By default, the orientation of a StackLayout is vertical, but you can change it to `horizontal` by setting the `orientation` property.
 
 ::: danger Important
-StackLayout is a relatively simple layout container, and it's easy to overuse it in complex layouts. When you have many nested StackLayout containers or lots of child views, it can lead to poor performance and slow rendering times. Therefore If you find yourself nesting a lot of `<StackLayout>` you will likely get better performance by switching to a `<GridLayout>` or `<FlexboxLayout>`.
+
+StackLayout is a basic layout container often used excessively in complex layouts. Overusing it with many nested containers or numerous child views can result in poor performance and slow rendering. If you're extensively nesting `<StackLayout>`, consider switching to `<GridLayout>` or `<FlexboxLayout>` for better performance.
 
 <!-- See [Layout Nesting](/common-pitfalls.html#layout-nesting) for more information. -->
 
diff --git a/content/ui/textfield.md b/content/ui/textfield.md
@@ -185,7 +185,7 @@ Gets or sets the `text` value of the component.
 hint: string = textField.hint
 ```
 
-Gets or sets the placeholder text for the component.
+Gets or sets the Placeholder text for the component.
 
 ---
 
diff --git a/content/ui/textview.md b/content/ui/textview.md
@@ -228,7 +228,7 @@ Gets or sets the `text` value of the component.
 hint: string = textView.hint
 ```
 
-Gets or sets the placeholder text for the component.
+Gets or sets the Placeholder text for the component.
 
 ---
 
diff --git a/content/ui/webview.md b/content/ui/webview.md
@@ -144,7 +144,7 @@ Disable scrolling in the WebView.
 webView.iosAllowInlineMediaPlayback = true
 ```
 
-(`iOS only`) Enables inline media playback on iOS. By default, webview forces iPhone into fullscreen media playback.
+(`iOS only`) Enables inline media playback on iOS. By default, WebView forces iPhone into fullscreen media playback.
 
 ---
 
diff --git a/content/ui/wrap-layout.md b/content/ui/wrap-layout.md
@@ -4,7 +4,7 @@ title: WrapLayout
 
 `<WrapLayout>` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column.
 
-## Horizontal wrap layout
+## Horizontal WrapLayout
 
 By default, a `WrapLayout` wraps its child items along a row.
 The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item to a new row.
@@ -20,7 +20,7 @@ The following example creates a row of equally-sized items. When the row runs ou
 
 <img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/wrap_layout_horizontal.svg" />
 
-## Vertical wrap layout
+## Vertical WrapLayout
 
 To wrap child items vertically, set the `WrapLayout`'s `orentation` property to `vertical`.
 The following example creates a column of equally-sized items. When the column runs out of space, the container wraps the last item to a new column.

Original file line number	Diff line number	Diff line change
`@@ -123,7 +123,7 @@ export class HelloWorldModel extends Observable {`
`123`	`123`	`}`
`124`	`124`	```
`125`	`125`
`126`		`-Gets or sets the specified items array as options in the list picker.`
	`126`	`+Gets or sets the specified items array as options in the ListPicker.`
`127`	`127`
`128`	`128`	`---`
`129`	`129`