mirror of https://github.com/halo-dev/halo
380 lines
12 KiB
Vue
380 lines
12 KiB
Vue
<template>
|
||
<FilledLayout>
|
||
<div class="container p-3">
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Button</h1>
|
||
<h2 class="mb-1">Type:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VButton type="primary">Primary</VButton>
|
||
<VButton type="secondary">Secondary</VButton>
|
||
<VButton type="danger">Danger</VButton>
|
||
<VButton type="default">Default</VButton>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Size:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VButton size="lg" type="secondary">Large</VButton>
|
||
<VButton type="secondary"> Default</VButton>
|
||
<VButton size="sm" type="secondary"> sm</VButton>
|
||
<VButton size="xs" type="secondary"> xs</VButton>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Circle:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VButton circle size="lg" type="secondary"> lg</VButton>
|
||
<VButton circle type="secondary"> d</VButton>
|
||
<VButton circle size="sm" type="secondary"> sm</VButton>
|
||
<VButton circle size="xs" type="secondary"> xs</VButton>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Block:</h2>
|
||
<div class="mb-3">
|
||
<VSpace direction="column" class="w-full">
|
||
<VButton block type="primary"> Primary</VButton>
|
||
<VButton block type="secondary"> Secondary</VButton>
|
||
<VButton block type="danger"> Danger</VButton>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Disabled:</h2>
|
||
<div>
|
||
<VSpace>
|
||
<VButton disabled type="primary"> Primary</VButton>
|
||
<VButton disabled type="secondary"> Secondary</VButton>
|
||
<VButton disabled type="danger"> Danger</VButton>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Loading:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VButton type="default" @click="buttonLoading = !buttonLoading">
|
||
{{ buttonLoading ? "停止" : "启动" }}
|
||
</VButton>
|
||
<VButton type="primary" :loading="buttonLoading"> Primary </VButton>
|
||
<VButton type="secondary" :loading="buttonLoading">
|
||
Secondary
|
||
</VButton>
|
||
<VButton type="danger" :loading="buttonLoading"> Danger </VButton>
|
||
<VButton type="default" :loading="buttonLoading"> Default </VButton>
|
||
<VButton size="lg" type="secondary" :loading="buttonLoading"
|
||
>Large</VButton
|
||
>
|
||
<VButton type="secondary" :loading="buttonLoading">
|
||
Default</VButton
|
||
>
|
||
<VButton size="sm" type="secondary" :loading="buttonLoading">
|
||
sm</VButton
|
||
>
|
||
<VButton size="xs" type="secondary" :loading="buttonLoading">
|
||
xs</VButton
|
||
>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">Icon:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VButton size="lg" type="secondary">
|
||
<template #icon>
|
||
<IconSettings class="w-full h-full" />
|
||
</template>
|
||
Large
|
||
</VButton>
|
||
<VButton type="secondary">
|
||
<template #icon>
|
||
<IconSettings class="w-full h-full" />
|
||
</template>
|
||
Default
|
||
</VButton>
|
||
<VButton size="sm" type="secondary">
|
||
<template #icon>
|
||
<IconSettings class="w-full h-full" />
|
||
</template>
|
||
sm
|
||
</VButton>
|
||
<VButton size="xs" type="secondary">
|
||
<template #icon>
|
||
<IconSettings class="w-full h-full" />
|
||
</template>
|
||
xs
|
||
</VButton>
|
||
</VSpace>
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Input</h1>
|
||
<h2 class="mb-1">Size:</h2>
|
||
<div class="mb-3">
|
||
<VInput
|
||
v-model="inputValue"
|
||
class="mb-2"
|
||
placeholder="请输入邮箱"
|
||
size="lg"
|
||
/>
|
||
<VInput
|
||
v-model="inputValue"
|
||
class="mb-2"
|
||
placeholder="请输入邮箱"
|
||
size="md"
|
||
/>
|
||
<VInput
|
||
v-model="inputValue"
|
||
class="mb-2"
|
||
placeholder="请输入邮箱"
|
||
size="sm"
|
||
/>
|
||
<VInput v-model="inputValue" placeholder="请输入邮箱" size="xs" />
|
||
</div>
|
||
<!-- <h2 class="mb-1">With Icon:</h2>-->
|
||
<!-- <div class="mb-3">-->
|
||
<!-- <VInput v-model="inputValue" class="mb-2" size="md">-->
|
||
<!-- <template #prefix>-->
|
||
<!-- <IconDashboard />-->
|
||
<!-- </template>-->
|
||
<!-- <template #suffix>-->
|
||
<!-- <IconDashboard />-->
|
||
<!-- </template>-->
|
||
<!-- </VInput>-->
|
||
<!-- </div>-->
|
||
<h2 class="mb-1">Disabled:</h2>
|
||
<div class="mb-3">
|
||
<VInput v-model="inputValue" disabled />
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Textarea</h1>
|
||
<div class="mb-3">
|
||
<VTextarea
|
||
v-model="inputValue"
|
||
placeholder="Please input your description"
|
||
/>
|
||
</div>
|
||
<h2 class="mb-1">Disabled:</h2>
|
||
<div class="mb-3">
|
||
<VTextarea v-model="inputValue" :rows="4" disabled />
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Select</h1>
|
||
<h2 class="mb-1">Size:</h2>
|
||
<div class="mb-3">
|
||
<VSelect v-model="selectValue">
|
||
<VOption
|
||
v-for="(option, index) in selectData"
|
||
:key="index"
|
||
:value="option.value"
|
||
>
|
||
{{ option.label }}
|
||
</VOption>
|
||
</VSelect>
|
||
</div>
|
||
<h2 class="mb-1">Disabled:</h2>
|
||
<div class="mb-3">
|
||
<VSelect v-model="selectValue" disabled>
|
||
<VOption
|
||
v-for="(option, index) in selectData"
|
||
:key="index"
|
||
:value="option.value"
|
||
>
|
||
{{ option.label }}
|
||
</VOption>
|
||
</VSelect>
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Radio</h1>
|
||
<h2 class="mb-1">Radio:</h2>
|
||
<div class="mb-3">
|
||
<VRadio
|
||
v-for="(option, index) in radioData"
|
||
:key="index"
|
||
v-model="radioValue"
|
||
:label="option.label"
|
||
:value="option.value"
|
||
name="fruit"
|
||
></VRadio>
|
||
</div>
|
||
<h2 class="mb-1">Radio Group:</h2>
|
||
<div class="mb-3">
|
||
<VRadioGroup v-model="radioValue" :options="radioData"></VRadioGroup>
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">CheckBox</h1>
|
||
<h2 class="mb-1">CheckBox:</h2>
|
||
<div class="mb-3">
|
||
<VCheckbox v-model:checked="checkboxValue" label="Apple" />
|
||
</div>
|
||
<h2 class="mb-1">CheckBox Group:</h2>
|
||
<div class="mb-3">
|
||
<VCheckboxGroup
|
||
v-model="checkboxGroupValue"
|
||
:options="checkboxData"
|
||
name="fruit"
|
||
/>
|
||
<span class="mr-1 text-gray-500">
|
||
Checked: {{ checkboxGroupValue }}
|
||
</span>
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Space</h1>
|
||
<div class="mb-3">
|
||
<VRadio
|
||
v-for="(option, index) in ['row', 'column']"
|
||
:key="index"
|
||
v-model="spaceState.direction"
|
||
:label="option"
|
||
:value="option"
|
||
name="direction"
|
||
></VRadio>
|
||
<VRadio
|
||
v-for="(option, index) in ['start', 'center', 'end', 'stretch']"
|
||
:key="index"
|
||
v-model="spaceState.align"
|
||
:label="option"
|
||
:value="option"
|
||
name="align"
|
||
></VRadio>
|
||
<VRadio
|
||
v-for="(option, index) in ['xs', 'sm', 'md', 'lg']"
|
||
:key="index"
|
||
v-model="spaceState.spacing"
|
||
:label="option"
|
||
:value="option"
|
||
name="spacing"
|
||
></VRadio>
|
||
<VSpace
|
||
:direction="spaceState.direction"
|
||
:spacing="spaceState.spacing"
|
||
:align="spaceState.align"
|
||
>
|
||
<div>Control：</div>
|
||
<VButton type="primary">确定</VButton>
|
||
<VButton>取消</VButton>
|
||
</VSpace>
|
||
</div>
|
||
</section>
|
||
<section class="box border-2 rounded p-2 mb-3">
|
||
<h1 class="text-xl font-bold mb-2">Tag</h1>
|
||
<h2 class="mb-1">Themes:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VTag theme="default">Halo</VTag>
|
||
<VTag theme="primary">Halo</VTag>
|
||
<VTag theme="secondary">Halo</VTag>
|
||
<VTag theme="danger">Halo</VTag>
|
||
</VSpace>
|
||
</div>
|
||
<h2 class="mb-1">With Icon:</h2>
|
||
<div class="mb-3">
|
||
<VSpace>
|
||
<VTag theme="default" rounded>
|
||
<template #leftIcon>
|
||
<IconSettings />
|
||
</template>
|
||
Halo
|
||
</VTag>
|
||
<VTag theme="primary" rounded>
|
||
<template #leftIcon>
|
||
<IconSettings />
|
||
</template>
|
||
Halo
|
||
</VTag>
|
||
<VTag theme="secondary">
|
||
<template #leftIcon>
|
||
<IconSettings />
|
||
</template>
|
||
Halo
|
||
</VTag>
|
||
<VTag theme="danger">
|
||
<template #leftIcon>
|
||
<IconSettings />
|
||
</template>
|
||
Halo
|
||
</VTag>
|
||
</VSpace>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</FilledLayout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { IconSettings } from "@/core/icons";
|
||
import { FilledLayout } from "../layouts";
|
||
import { VButton } from "@/components/base/button";
|
||
import { VInput } from "@/components/base/input";
|
||
import { VOption, VSelect } from "@/components/base/select";
|
||
import { VTextarea } from "@/components/base/textarea";
|
||
import { VRadio, VRadioGroup } from "@/components/base/radio";
|
||
import { VCheckbox, VCheckboxGroup } from "@/components/base/checkbox";
|
||
import { VSpace } from "@/components/base/space";
|
||
import { VTag } from "@/components/base/tag";
|
||
import { reactive, ref } from "vue";
|
||
import type {
|
||
Align,
|
||
Direction,
|
||
Spacing,
|
||
} from "@/components/base/space/interface";
|
||
|
||
const buttonLoading = ref(true);
|
||
const inputValue = ref();
|
||
const selectValue = ref();
|
||
const radioValue = ref("apple");
|
||
const checkboxValue = ref(false);
|
||
const checkboxGroupValue = ref(["apple"]);
|
||
|
||
const spaceState = reactive<{
|
||
direction: Direction;
|
||
spacing: Spacing;
|
||
align: Align;
|
||
}>({
|
||
direction: "row",
|
||
spacing: "xs",
|
||
align: "center",
|
||
});
|
||
|
||
const selectData = [
|
||
{
|
||
value: "1",
|
||
label: "1",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "2",
|
||
},
|
||
];
|
||
|
||
const radioData = [
|
||
{
|
||
value: "banana",
|
||
label: "Banana",
|
||
},
|
||
{
|
||
value: "apple",
|
||
label: "Apple",
|
||
},
|
||
{
|
||
value: "orange",
|
||
label: "Orange",
|
||
},
|
||
];
|
||
|
||
const checkboxData = [
|
||
{
|
||
value: "apple",
|
||
label: "Apple",
|
||
},
|
||
{
|
||
value: "banana",
|
||
label: "Banana",
|
||
},
|
||
{
|
||
value: "orange",
|
||
label: "Orange",
|
||
},
|
||
];
|
||
</script>
|