svelte-steps - GitLite

KO | EN

gitlite — search

#python #llm #go #android #machine-learning #rust #linux #docker #java #kubernetes #pytorch #security #mcp #openai

svelte-steps

(★ 108)

🐾 A step component for svelte

파일 탐색기

최종 버전 다운로드 (.zip)

- - codeql-analysis.yml
- launch.json
- - Alert.svelte
  - check.svelte
  - index.js
  - Steps.svelte
- - +page.svelte
- app.d.ts
- app.html
- demo.png
- favicon.png
.gitignore
.npmrc
.prettierrc.yaml
jsconfig.json
LICENSE
package-lock.json
package.json
README.md
svelte.config.js
vite.config.js
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/shaozi/svelte-steps

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd svelte-steps

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --saveDev svelte-steps

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🐾 Svelte steps component 🐾

A customizable step component written in Svelte!

- [x] Bootstrap color theme
- [x] Icons
- [x] Animate progress
- [x] Horizontal and vertical
- [x] Dumpbells and bar
- [x] Custom size
- [x] Custom color
- [x] Custom font
- [x] Circle, square and between
- [x] Left and right

![demo](https://raw.githubusercontent.com/shaozi/svelte-steps/master/static/demo.png)

## Installation

```sh
npm install --saveDev svelte-steps
```

## Example Usages

Clone this project and run it. Itself is an example. Take a look at the homepage [here](https://svelte-steps.web.app).
The source file of the demo is at [src/routes/index.svelte](src/routes/index.svelte)

### Basic Usage

```javascript
<script>
    import { Steps } from 'svelte-steps';
    let steps = [
        { text: 'step one' },
        { text: 'step two' },
        { text: 'the last step' }
    ];
</script>

<Steps {steps} />
```

### Vertical Steps

> NOTE: needs svelte version 3.46.3 or newer

Add `vertical` props to `Steps` component.

```javascript
<Steps vertical {steps} />
```

You can also use `reverse` to put text label to the left.

```javascript
<Steps vertical reverse {steps}>
```

### With Icons

```javascript
let steps = [
  { text: 'step one', icon: IconMoney },
  { text: 'step two', icon: IconPaperClip },
  { text: 'the last step', icon: IconPerson },
]
```

### Square Steps

```javascript
<Steps {steps} borderRadius="0"/>
```

### Custom Color

```javascript
<Steps {steps} primary="#ff0000" secondary="#ffaaaa"/>
```

### Custom Size

```javascript
<Steps {steps} size="2rem" line="2px"/>
```

### No Text

```javascript
let steps = [{ icon: IconMoney }, { icon: IconPaperClip }, { icon: IconPerson }]
```

### Bar

```javascript
<Steps {steps} size="2rem" line="2rem"/>
```

### Use alert and customize icons (**NEW**)

````javascript
import Escalation from './YourEscalation.svelt'
<script>
    let steps = [
        { text: 'step one' , alert: true},
        { text: 'step two' },
        { text: 'the last step' }
    ];
</script>
<Steps {steps} alertColor={'#ff00ff'} alertIcon={Escalation} checkIcon={null}>
```

### Events

```javascript
<Steps
    {steps}
    {current}
    on:click={(e) => {
        last = e.detail.last;
        current = e.detail.current;
    }}
/>
````

## Use with Bootstrap

It by default uses `--bs-primary`, `--bs-secondary`, `--bs-danger`, `--bs-light`, and `--bs-dark` css variables if they are defined. These css vars are defined in bootstrap css:

```html

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
```

## Props

- `steps`:
  - Array of object. Length has to be more than 1
  - Required
  - Each item is a step object that can have:
    - `text`: The text displayed below each steps.
    - `icon`: A svelte component displayed inside each steps.
    - `iconProps`: An object that will be passed as props to the `icon` component.
- `current`: current step index. Number. Default `0`
- `size`: size of the step buttons. String. Default `"3rem"` (`"2rem"` for vertical steps)
- `line`: thickness of the connecting lines between the step buttons. String. Default `"0.3rem"` (`"0.15rem"` for vertical steps)
- `primary`: Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'`
- `secondary`: Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'`
- `light`: Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'`
- `dark`: Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'`
- `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle)
- `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"`
- `vertical`: Vertical steps. Default `false`
- `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false`
- `clickable`: When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true`
- `checkIcon`: User defined check icon for passed steps. If not specified, use the default check mark. Set to `null` if you don't want a check icon.
- `alertIcon`: User defined alert icon for passed steps that has truthful `alert` property. If not specified, use the default alert icon. Set to `null` if you don't want an alert icon.
- `alertColor`: User defined bg color for passed steps that has truthful `alert` property. Default 'var(--bs-danger, #dc3545)'

## Events

- `on:click(e)`: click event. Event detail object has two keys:
  - `e.detail.current`: the index of current step
  - `e.detail.last`: the index of last step