feat: add support for inline ion-picker

[ivent]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Hello, I would like a feature to enable the inclusion of the ion-picker component within the content of a page without the need to open it in a modal, I managed to implement this feature with ion-datetime but it only works with dates, years and months and I want to use ion-picker to create an ios-style select and only that with ion-picker I can create but it only opens in modal, is this feature currently possible or could it be developed?

I am currently using the following code in angular/ionic 6

home.page.html

<ion-content>
  <ng-container >

    <ion-button expand="block" (click)="showPickerController()">Show Picker Controller</ion-button>

    <ion-list>     
      <ng-container *ngFor="let type of ['year']">   
            <ion-item slot="header">
              <ion-label>ion-datetime</ion-label>
              <ion-text slot="end"></ion-text>
            </ion-item>
            <ion-datetime
              size="cover"
              slot="content"
              [presentation]="type"
            >
            </ion-datetime>
      </ng-container>
    </ion-list>
  </ng-container>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { PickerController, PickerOptions } from '@ionic/angular';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  
})
export class HomePage {


  constructor(private pickerCtrl: PickerController) {}

  async showPickerController() {
    let opts: PickerOptions = {
      buttons: [
        {
          text: 'Ok'
        }
      ],
      columns: [
        {
          name: 'category',
          options: [
            { text: 'Dog', value: 'dog' },
            { text: 'Cat', value: 'cat' },
            { text: 'Fish', value: 'fish' },
            { text: 'Rabbit', value: 'rabbit' },
          ]
        }
      ]
    };
    
    let picker = await this.pickerCtrl.create(opts);
    picker.present();
    picker.onDidDismiss().then(async data => {
      console.log('dismiss');
    });
  }
}

Describe the Use Case

Create an inshot-style font select

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[loyaj]

I also would like this feature to be implemented. In my use case, I am still displaying the picker in a (sheet) modal, but the modal also has other text and buttons. Being able to place the picker "inline" on the page (similar to the way the ion-datetime component is rendered) would be essential for this. I'm not seeing a workaround but would be happy to be pointed to one :)

Edit: I'm using Vue 3 as my framework

[liamdebeasi]

Thanks for the request. In Ionic 8 we are adding a new inline picker. The existing overlay picker will still be available for developers to use. The work required to add this was completed in #28689, so I am going to close this.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.