物化步进器

Question

我正在尝试使用 materialize 步进器来创建一个水平向导，例如。

由于某种原因，它没有出现步骤的内容，甚至没有水平显示。

这是fiddle：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();
});

这将使您的内容可见。

物化步进器

Materialize stepper

css

jquery

materialize