# SvelteStep

**Repository Path**: hello_kuma/svelte-step

## Basic Information

- **Project Name**: SvelteStep
- **Description**: 让Svelte使用Step的组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-23
- **Last Updated**: 2024-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

使用案例
```html
<script>
    import Step from "$lib/form/Step.svelte";
    import Textfield from "@smui/textfield";
    import HelperText from "@smui/textfield/helper-text";
    import UsersList from "$lib/user/UsersList.svelte";
    import SelectUser from "$lib/user/SelectUser.svelte";
    import SelectProject from "$lib/question/SelectProject.svelte";
    import {goto} from "$app/navigation";
    import {onMount} from "svelte";
    import render_lottie from "../../../../script/render_lottie.js";

    let team_name = ""

    let validate = {
        1: ()=>{
            if (team_name === ""){
                throw Error("团队名称是必填的!");
            }
        }
    }

</script>

<div>
    <Step CurrentSteps={1} MaxSteps={3} ValidatesSteps={validate} finish_text="管理团队" finish_method="{()=>{goto('/home/my-team/manageable-team')}}">
        <div class="step-body step-body-1">
            <h1 class="step-title">首先确认你团队的名称...</h1>
            <div class="step-body-input">
                <div style="width: 60%">
                    <Textfield class="input-create-team-name" bind:value={team_name} label="想一个好听的名字吧">
                        <HelperText slot="helper">你可以随时修改团队的名称</HelperText>
                    </Textfield>
                </div>
            </div>
        </div>
        <div class="step-body step-body-2">
            <h1 class="step-title">你可以给新团队加入一些你的好友...</h1>
            <div style="width: 60%;margin: 20px auto">
                <SelectUser/>
            </div>
        </div>
        <div class="step-body step-body-3">
            <h1 class="step-title">你可以将团队设置到一个没有设置团队的题库项目...</h1>
            <div style="width: 60%;margin: 20px auto">
                <SelectProject />

            </div>
        </div>


        <div slot="finish">

            <h1 class="step-title">完成!...</h1>

            <div class="lottie-frame">
                <img src="/lotties/okay.gif" alt="">
            </div>
        </div>
    </Step>
</div>

<style lang="less">
  @import "/src/less/basic";
  @import "/src/less/mixins";

  @step-height-body: 300px;
  .step-body {
    min-height: @step-height-body;
  }

  .step-title {
    margin-top: 100px;
    text-align: center;
  }

  :global(.input-create-team-name) {
    width: 100%;
    margin: auto;
  }

  .step-body-input {
    height: @step-height-body;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lottie-frame{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - @nav-height - 200px);
    img{

      display: block;
      margin: auto;
    }
  }


</style>
```