Skip to content
This repository was archived by the owner on Nov 17, 2022. It is now read-only.

Css guide contribution #1922

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/cookbook/formatted-string-ng.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,33 @@ NativeScript has a special class called [FormattedString](/api-reference/classes
</Label>
```

Binding (Two-way)

```HTML
<Label>
<FormattedString>
<Span [text]="title" fontWeight="Bold" textDecoration="underline"></Span>
</FormattedString>
</Label>
```
```TypeScript
import { Component } from '@angular/core';

@Component({
selector: 'ns-main',
moduleId: module.id,
templateUrl: './main.component.html',
})
export class MainComponent {
public title: string;

constructor() {
this.title = "Hello Word";
}
}
```


This syntax differs from the full syntax of FormattedString used in NativeScript Core, shown below, which does not work in Angular apps:

```HTML
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,15 @@ You can create a development certificate in the [iOS Dev Center](https://develop

1. Open [iOS Dev Center](https://developer.apple.com/membercenter) in your favorite browser and log in.
1. Click **Certificates, Identifiers &amp; Profiles**.
1. In the drop-down menu in the top left corner, verify that **iOS, tvOS, watchOS** is selected.
1. In the left-hand sidebar, select **Certificates** &#8594; **Development**.
1. Click **+**.
1. In the left-hand sidebar, select **Certificates**.
1. Click **+** blue button next to the subtitle bar **Certificates** to add a new Certificate.
1. Select **iOS App Development** and click **Continue**.
1. On the About Creating a Certificate Signing Request (CSR) page, click **Continue**.
1. On the Generate your certificate page, click **Choose File**.
1. On the Upload a Certificate Signing Request page, click **Choose File**.
1. Browse to the location where the `CSR` file for your code signing request is stored, select it and confirm the upload.
1. Click **Continue**.
1. (Optional) Click **Download** to download your certificate.
1. Click **Done**.
1. Click **All Certificates**.

## Next Steps

Create a **[development provisioning profile]({% slug create-development-provisioning %})** in the [iOS Dev Center](https://developer.apple.com/membercenter).
Create a **[development provisioning profile]({% slug create-development-provisioning %})** in the [iOS Dev Center](https://developer.apple.com/membercenter).
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,8 @@ You can create a development provisioning profile in the [iOS Dev Center](https:
## Procedure
1. Open [iOS Dev Center](https://developer.apple.com/membercenter) in your favorite browser and log in.
1. Click **Certificates, Identifiers &amp; Profiles**.
1. In the drop-down menu in the top left corner, verify that **iOS, tvOS, watchOS** is selected.
1. In the left-hand sidebar, select **Provisioning&nbsp;Profiles** &#8594; **Development**.
1. Click **+**.
1. In the left-hand sidebar, select **Profiles**.
1. Click **+** blue button next to the subtitle bar **Profiles** to add a new Profile.
1. Select **iOS&nbsp;App&nbsp;Development** and click **Continue**.
1. Select an App ID to associate with the provisioning profile and click **Continue**.<br/>To be able to use one development provisioning profile across multiple apps, select a wildcard App ID, if available.
1. Select one or more certificates for development to include in the provisioning profile and click **Continue**.<br/>Only certificates for development are listed.
Expand All @@ -36,4 +35,4 @@ You can create a development provisioning profile in the [iOS Dev Center](https:

## Next Steps

Now that you have created a development certificate and provisioning profile, you can [Deploy and Test Your App on a Connected Device]({% slug deploy-on-device %}).
Now that you have created a development certificate and provisioning profile, you can [Deploy and Test Your App on a Connected Device]({% slug deploy-on-device %}).
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,14 @@ You can create a distribution provisioning profile in the [iOS Dev Center](https

1. Open [iOS Dev Center](https://developer.apple.com/membercenter) in your favorite browser and log in.
1. Click **Certificates, Identifiers &amp; Profiles**.
1. In the drop-down menu in the top left corner, verify that **iOS, tvOS, watchOS** is selected.
1. In the left-hand sidebar, select **Provisioning&nbsp;Profiles** &#8594; **App Store**.
1. Click **+**.
1. In the left-hand sidebar, select **Profiles**.
1. Click **+** blue button next to subtitle bar **Profiles** to add a new Profile.
1. Select **App&nbsp;Store** and click **Continue**.
1. Select an **App ID** to associate with the provisioning profile and click **Continue**.
1. Select one or more certificates for distribution to include in the provisioning profile and click **Continue**.<br/>Only certificates for distribution are listed.
1. Select a certificate for distribution to include in the provisioning profile and click **Continue**.<br/>Only certificates for distribution are listed.
1. Enter a name for the profile and click **Continue**.
1. (Optional) Click **Download** to download the provisioning profile.

## Next Steps

Now that you have created a distribution certificate and provisioning profile, you can build your app in Release configuration and publish the produced app package to the App Store. For more information, see [Cloud Builds]({% slug cloud-build %}) and [Local Builds]({% slug local-build %}).
Now that you have created a distribution certificate and provisioning profile, you can build your app in Release configuration and publish the produced app package to the App Store. For more information, see [Cloud Builds]({% slug cloud-build %}) and [Local Builds]({% slug local-build %}).
21 changes: 21 additions & 0 deletions docs/ui/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,27 @@ After you have set the default CSS for the page, you can add to it using two met
{% endnativescript %}
{% angular %}

### Ternary operator

```HTML
<Button text="Tap me!" [class]="changeColor ? 'text-blue' : 'text-red'" (tap)="onChangeColor($event)"></Button>
```
```CSS
/* myCustomComponent.css */
.text-blue {
color: blue;
}
.text-red {
color: red;
}
```
```TypeScript
public changeColor = true;
onChangeColor(args: EventData) {
this.changeColor = !this.changeColor;
}
```

### Component-specific CSS

In an Angular application everything is a component, therefore, it is a very common task to add some CSS code that should only apply to one component. Adding component-specific CSS in a NativeScript-Angular app involves using a component’s `styles` or `styleUrls` property.
Expand Down