实现步进器

Question

我正在尝试使用物化步进器来创建类似的水平向导。

由于某种原因，它没有出现在步骤的内容中，甚至没有变得水平。

这是小提琴：Jsfiddle

<ul class="stepper horizontal" id="horizontal">
                    <li class="step active">
                        <div data-step-label="To step-title!" class="step-title waves-effect waves-dark">Step 1</div>
                        <div class="step-content">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input name="email" type="email" class="validate" required>
                                    <label for="email">Your e-mail</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue next-step">CONTINUE</button>
                            </div>
                        </div>
                    </li>
                    <li class="step">
                        <div class="step-title waves-effect waves-dark">Step 2</div>
                        <div class="step-content">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id name="password" type="password" class="validate" required>
                                    <label for="password">Your password</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue next-step" data-feedback="someFunction">CONTINUE</button>
                                <button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
                            </div>
                        </div>
                    </li>
                    <li class="step">
                        <div class="step-title waves-effect waves-dark">Step 3</div>
                        <div class="step-content">
                            Finish!
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue" type="submit">SUBMIT</button>
                            </div>
                        </div>
                    </li>
                </ul>

Answer 1

好吧，我发现了问题，因为文档没有说出来，或者至少我没有找到

您必须初始化步进器！

$(document).ready(function() {
    $('.stepper').activateStepper();
});

Answer 2

这对我有用

$(document).ready(function() {
    $('.step-content').show();
});

它将使您的内容可见。