How to insert a stepper into the dialog box?

Questions
1

By clicking on the button, a dialog box opens and I want to insert a stepper into it by the ‘open’ event. But the stepper is not displayed in the dialog box, namely in the - ‘.content-block’ class. Please help me solve the problem

f7.dialog.create({

            title: textNumber,

            content:

            '<div class="content-block">' +

            '<div class="step"></div>' +

            '</div>',

            buttons: [

                {

                    text: textOk,

                    bold: true,

                },

                {

                    text: textCancel

                }

            ],

            on: {

                open: () => { 

                    stepper = f7.stepper.create({

                        el: '.stepper',

                        inputEl: document.querySelector('.step'),

                        value: 1,

                        min: 0,

                        max: 100

                    })

                }

            }

        }).open();
2

You must respectively put the full stepper HTML layout (Stepper | Framework7 Documentation) not just the empty .step element

3

Is there a way not to put the entire layout of the stepper in the content property of the dialog box? For example, the picker has the containerEl property, where we can pass the place where we will insert it. The picker can be inserted via containerEl into the dialog box