mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-19 20:41:52 +00:00
252 lines
11 KiB
Vue
252 lines
11 KiB
Vue
<template>
|
|
<page-content page-title="Components - Stepper">
|
|
<docs-component>
|
|
<div slot="description">
|
|
<p>Step indicators are visual indications of an activity progression.</p>
|
|
</div>
|
|
|
|
<div slot="api">
|
|
<api-table name="md-stepper">
|
|
<md-table slot="properties">
|
|
<md-table-header>
|
|
<md-table-row>
|
|
<md-table-head>Name</md-table-head>
|
|
<md-table-head>Type</md-table-head>
|
|
<md-table-head>Description</md-table-head>
|
|
</md-table-row>
|
|
</md-table-header>
|
|
<md-table-body>
|
|
<md-table-row>
|
|
<md-table-cell>md-alternate-labels</md-table-cell>
|
|
<md-table-cell><code>Boolean</code></md-table-cell>
|
|
<md-table-cell>On the horizontal display it will place the labels underneigh the step icon. Default: false</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-elevation</md-table-cell>
|
|
<md-table-cell><code>Number</code></md-table-cell>
|
|
<md-table-cell>Sets the elevation of the container for each content and the horizontal header. Default: 1</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-vertical</md-table-cell>
|
|
<md-table-cell><code>Boolean</code></md-table-cell>
|
|
<md-table-cell>Will place the steps in a vertical position. Default: false</md-table-cell>
|
|
</md-table-row>
|
|
</md-table-body>
|
|
</md-table>
|
|
</api-table>
|
|
|
|
<api-table name="md-step">
|
|
<md-table slot="properties">
|
|
<md-table-header>
|
|
<md-table-row>
|
|
<md-table-head>Name</md-table-head>
|
|
<md-table-head>Type</md-table-head>
|
|
<md-table-head>Description</md-table-head>
|
|
</md-table-row>
|
|
</md-table-header>
|
|
<md-table-body>
|
|
<md-table-row>
|
|
<md-table-cell>md-button-back</md-table-cell>
|
|
<md-table-cell><code>String</code></md-table-cell>
|
|
<md-table-cell>The text to be displayed in the back button. Default: 'BACK'.</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-back-continue</md-table-cell>
|
|
<md-table-cell><code>String</code></md-table-cell>
|
|
<md-table-cell>The text to be displayed in the coninue button. Default: 'CONTINUE' or 'FINISH' (if is the last step)</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-continue</md-table-cell>
|
|
<md-table-cell><code>Boolean</code></md-table-cell>
|
|
<md-table-cell>Ability to define if the step is completed and allowed to continue. Default: true</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-disabled</md-table-cell>
|
|
<md-table-cell><code>Boolean</code></md-table-cell>
|
|
<md-table-cell>Ability to disable the step. Default: false</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-editable</md-table-cell>
|
|
<md-table-cell><code>Boolean</code></md-table-cell>
|
|
<md-table-cell>If the step is allowed to go 'back' after it has been completed. Default: false</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-icon</md-table-cell>
|
|
<md-table-cell><code>String</code></md-table-cell>
|
|
<md-table-cell>Icon to use instead of the index number. Default: will use the step index</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-label</md-table-cell>
|
|
<md-table-cell><code>String</code></md-table-cell>
|
|
<md-table-cell>The label of step header. Default: undefined</md-table-cell>
|
|
</md-table-row>
|
|
<md-table-row>
|
|
<md-table-cell>md-message</md-table-cell>
|
|
<md-table-cell><code>String</code></md-table-cell>
|
|
<md-table-cell>The sub message to be used underneigh the step header label. Default: undefined</md-table-cell>
|
|
</md-table-row>
|
|
</md-table-body>
|
|
</md-table>
|
|
<md-table slot="classes">
|
|
<md-table-header>
|
|
<md-table-row>
|
|
<md-table-head>Name</md-table-head>
|
|
<md-table-head>Description</md-table-head>
|
|
</md-table-row>
|
|
</md-table-header>
|
|
<md-table-body>
|
|
<md-table-row>
|
|
<md-table-cell>md-disabled</md-table-cell>
|
|
<md-table-cell>Disabled class.</md-table-cell>
|
|
</md-table-row>
|
|
</md-table-body>
|
|
</md-table>
|
|
</api-table>
|
|
</div>
|
|
|
|
<div slot="example">
|
|
<example-box card-title="Default steps">
|
|
<div class="stepper-demo" slot="demo">
|
|
<md-stepper>
|
|
<md-step>
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something important I need to fix just right before the last step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
<code-block lang="xml">
|
|
<md-stepper>
|
|
<md-step>
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something important I need to fix just right before the last step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</code-block>
|
|
</div>
|
|
</example-box>
|
|
|
|
<example-box card-title="Labels">
|
|
<div class="stepper-demo" slot="demo">
|
|
<md-stepper>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
<code-block lang="xml">
|
|
<md-stepper>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</code-block>
|
|
</div>
|
|
</example-box>
|
|
|
|
<example-box card-title="Alternate Labels">
|
|
<div class="stepper-demo" slot="demo">
|
|
<md-stepper md-alternate-labels>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
<code-block lang="xml">
|
|
<md-stepper md-alternate-labels>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</code-block>
|
|
</div>
|
|
</example-box>
|
|
|
|
<example-box card-title="Vertical steps">
|
|
<div class="stepper-demo" slot="demo">
|
|
<md-stepper md-vertical>
|
|
<md-step>
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something important I need to fix just right before the last step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
<code-block lang="xml">
|
|
<md-stepper md-vertical>
|
|
<md-step>
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
<md-step>
|
|
<p>This seems something important I need to fix just right before the last step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</code-block>
|
|
</div>
|
|
</example-box>
|
|
|
|
<example-box card-title="Vertical with Labels">
|
|
<div class="stepper-demo" slot="demo">
|
|
<md-stepper md-vertical>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</div>
|
|
|
|
<div slot="code">
|
|
<code-block lang="xml">
|
|
<md-stepper md-vertical>
|
|
<md-step md-label="Dunder Miflin">
|
|
<p>This seems something basic I need to do first before the next step.</p>
|
|
</md-step>
|
|
<md-step md-label="Scraton" md-message="Pennsylvania">
|
|
<p>This seems something I need to focus on just after the first step.</p>
|
|
</md-step>
|
|
</md-stepper>
|
|
</code-block>
|
|
</div>
|
|
</example-box>
|
|
</div>
|
|
</docs-component>
|
|
</page-content>
|
|
</template>
|