init
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayCollapse",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { withDefaults, provide, ref, watch } from "vue";
|
||||
|
||||
export interface CollapseProps {
|
||||
accordion?: boolean;
|
||||
modelValue?: number | string | number[] | string[];
|
||||
collapseTransition?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<CollapseProps>(), {
|
||||
modelValue: () => [],
|
||||
accordion: false,
|
||||
collapseTransition: true,
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
activeValues.value = ([] as any[]).concat(val);
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
|
||||
const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));
|
||||
|
||||
provide("layCollapse", {
|
||||
accordion: props.accordion,
|
||||
collapseTransition: props.collapseTransition,
|
||||
activeValues,
|
||||
emit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-collapse">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,139 @@
|
||||
@import "../button/index.less";
|
||||
@import "../input/index.less";
|
||||
|
||||
@border-color: #eee;
|
||||
@hover-border-color: var(--global-primary-color);
|
||||
|
||||
@input-number-lg: 44px;
|
||||
@input-number-lg-wdith: 200px;
|
||||
@input-number-lg-right: 22px;
|
||||
@input-number-md: 38px;
|
||||
@input-number-md-wdith: 160px;
|
||||
@input-number-md-right: 19px;
|
||||
@input-number-sm: 32px;
|
||||
@input-number-sm-wdith: 140px;
|
||||
@input-number-sm-right: 16px;
|
||||
@input-number-xs: 26px;
|
||||
@input-number-xs-wdith: 120px;
|
||||
@input-number-xs-right: 13px;
|
||||
|
||||
.set-size(@width, @size, @right-size) {
|
||||
& {
|
||||
height: @size;
|
||||
width: @width;
|
||||
|
||||
.layui-input {
|
||||
height: @size;
|
||||
line-height: @size;
|
||||
padding: 0 @size;
|
||||
}
|
||||
|
||||
.layui-control-btn {
|
||||
width: @size;
|
||||
height: @size;
|
||||
line-height: @size;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[position="right"] {
|
||||
.layui-input {
|
||||
padding: 0 @size 0 0;
|
||||
}
|
||||
|
||||
.layui-control-btn {
|
||||
height: @right-size;
|
||||
line-height: @right-size;
|
||||
}
|
||||
|
||||
.layui-subtraction-btn {
|
||||
top: @right-size - 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layui-input-number + .layui-input-number {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.layui-input-number {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @border-color;
|
||||
border-color: @border-color;
|
||||
border-radius: var(--global-border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
.layui-input {
|
||||
border: 0;
|
||||
|
||||
input {
|
||||
text-align: center;
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-control-btn {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-color: @border-color;
|
||||
border-style: solid;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
color: @hover-border-color;
|
||||
}
|
||||
|
||||
&.layui-subtraction-btn {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
&.layui-addition-btn {
|
||||
border-left-width: 1px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.layui-icon {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-input input::-webkit-outer-spin-button,
|
||||
.layui-input input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.layui-input input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
&[position="right"] {
|
||||
.layui-subtraction-btn {
|
||||
right: 0;
|
||||
border-right-width: 0px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.layui-addition-btn {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&[size="lg"] {
|
||||
.set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
|
||||
}
|
||||
&[size="md"] {
|
||||
.set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
|
||||
}
|
||||
&[size="sm"] {
|
||||
.set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
|
||||
}
|
||||
&[size="xs"] {
|
||||
.set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { LayIcon as Component } from "@layui/icons-vue";
|
||||
import { withInstall, WithInstallType } from "../../utils";
|
||||
|
||||
const component: WithInstallType<typeof Component> = withInstall(Component);
|
||||
export default component;
|
||||
Binary file not shown.
@@ -0,0 +1,160 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感。
|
||||
:::
|
||||
|
||||
::: title 主色调
|
||||
:::
|
||||
|
||||
::: demo layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。
|
||||
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#009688</p><p>
|
||||
</p><p tips="">主色调</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#5FB878</p><p>
|
||||
</p><p tips="">次色调</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#1E9FFF</p><p>
|
||||
</p><p tips="">经典蓝</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#393D49</p><p>
|
||||
</p><p tips="">导航色</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 次色调
|
||||
:::
|
||||
|
||||
::: demo 事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。
|
||||
|
||||
<template>
|
||||
<ul class="layui-row layui-col-space15">
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #31BDEC;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#31BDEC</p><p>
|
||||
</p><p tips="">引导 - INFO</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#5FB878</p><p>
|
||||
</p><p tips="">成功 - SUCCESS</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FFB800</p><p>
|
||||
</p><p tips="">警示 - WARNING</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="layui-col-sm6">
|
||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||
<p>#FF5722</p><p>
|
||||
</p><p tips="">错误 - DANGER</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 中性色
|
||||
:::
|
||||
|
||||
::: demo layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！
|
||||
|
||||
<template>
|
||||
<ul class="layui-row site-doc-color site-doc-necolor">
|
||||
<li class="layui-col-md12">
|
||||
<div style="background-color: #FAFAFA;">
|
||||
<p>#FAFAFA</p><p>
|
||||
</p></div>
|
||||
</li>
|
||||
<li class="layui-col-md12">
|
||||
<div style="background-color: #f6f6f6;"><p>#F6F6F6</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #eeeeee;"><p>#eeeeee</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #e2e2e2;"><p>#e2e2e2</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #dddddd;"><p>#dddddd</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #d2d2d2;"><p>#d2d2d2</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #cccccc;"><p>#cccccc</p><p></p></div>
|
||||
</li>
|
||||
<li class="layui-col-md4">
|
||||
<div style="background-color: #c2c2c2;"><p>#c2c2c2</p><p></p></div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: contributor color
|
||||
:::
|
||||
|
||||
::: previousNext color
|
||||
:::
|
||||
Reference in New Issue
Block a user