Skip to content

Commit 57f5843

Browse files
committed
docs(searchbar): update angular to standalone
1 parent c5926f0 commit 57f5843

32 files changed

+342
-20
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-searchbar></ion-searchbar>
3+
<ion-searchbar placeholder="Custom Placeholder"></ion-searchbar>
4+
<ion-searchbar disabled="true" placeholder="Disabled"></ion-searchbar>
5+
<ion-searchbar value="Value"></ion-searchbar>
6+
<ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
7+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonSearchbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonSearchbar],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/searchbar/basic/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/searchbar/basic/demo.html"
1224
size="300px"
1325
/>
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-searchbar show-cancel-button="focus" placeholder="Show on Focus"></ion-searchbar>
3+
<ion-searchbar show-cancel-button="always" placeholder="Always Show"></ion-searchbar>
4+
<ion-searchbar show-cancel-button="never" placeholder="Never Show"></ion-searchbar>
5+
<ion-searchbar
6+
show-cancel-button="always"
7+
cancel-button-text="Custom Cancel"
8+
cancel-button-icon="trash"
9+
placeholder="Custom Cancel Button"
10+
></ion-searchbar>
11+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonSearchbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonSearchbar],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/searchbar/cancel-button/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/searchbar/cancel-button/demo.html"
1224
size="250px"
1325
/>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
```html
2+
<ion-searchbar show-clear-button="focus" value="Show on Focus"></ion-searchbar>
3+
<ion-searchbar show-clear-button="always" value="Always Show"></ion-searchbar>
4+
<ion-searchbar show-clear-button="never" value="Never Show"></ion-searchbar>
5+
<ion-searchbar show-clear-button="always" clear-icon="trash-bin" value="Custom Clear Icon"></ion-searchbar>
6+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonSearchbar } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonSearchbar],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/searchbar/clear-button/index.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
1123
src="usage/v7/searchbar/clear-button/demo.html"
1224
size="250px"
1325
/>

static/usage/v7/searchbar/debounce/angular/example_component_ts.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular/standalone';
34

45
@Component({
56
selector: 'app-example',
67
templateUrl: 'example.component.html',
8+
imports: [IonItem, IonLabel, IonList, IonSearchbar],
79
})
810
export class ExampleComponent {
911
public data = [

0 commit comments

Comments
 (0)