init
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
:root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}
|
||||
@@ -0,0 +1 @@
|
||||
.layui-fullscreen{top:0;left:0;width:100%;height:100%;position:fixed;overflow:auto;z-index:10}
|
||||
@@ -0,0 +1,2 @@
|
||||
declare const postionFns: any;
|
||||
export default postionFns;
|
||||
Binary file not shown.
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TableIcon",
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import LayIcon from "../component/icon/index";
|
||||
|
||||
const props = defineProps<{
|
||||
color?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<lay-icon :color="props.color" :size="props.size" type="layui-icon-table" />
|
||||
</template>
|
||||
Binary file not shown.
@@ -0,0 +1,90 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 基本介绍
|
||||
:::
|
||||
|
||||
::: describe 过渡效果的使用将大幅提升用户的使用体验。
|
||||
:::
|
||||
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-transition` 标签，为 `element` 提供过渡动画。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible">开始</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition>
|
||||
<lay-card title="标题" v-if="visible">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible = ref(true);
|
||||
|
||||
const changeVisible = () => {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 淡入淡出
|
||||
:::
|
||||
|
||||
::: demo 使用 `type` 属性，设置过渡方式。
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible1">开始</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-transition type="fade">
|
||||
<lay-card title="标题" v-if="visible1">内容</lay-card>
|
||||
</lay-transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const visible1 = ref(true);
|
||||
|
||||
const changeVisible1 = () => {
|
||||
visible1.value = !visible1.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title Transition 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 类型 |默认值 | 可选值 |
|
||||
| ------------ | ---------------- | ------------- | ---- | ---- |
|
||||
| enable | 启用 | `boolean` | `true` | `true` `false` |
|
||||
| type | 类型 | `string` | `collapse` | -- |
|
||||
| time | 过渡时间 | `string`|`boolean`| `0.3` | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Transition 属性值
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性值 | 描述 |
|
||||
| ------------ | ---------------- |
|
||||
| collapse | 折叠动画 |
|
||||
| fade | 淡入淡出 |
|
||||
:::
|
||||
|
||||
::: contributor transition
|
||||
:::
|
||||
|
||||
::: previousNext transition
|
||||
:::
|
||||
@@ -0,0 +1,82 @@
|
||||
.layui-badge,
|
||||
.layui-badge-dot,
|
||||
.layui-badge-rim {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: #ff5722;
|
||||
color: #fff;
|
||||
border-radius: var(--global-border-radius);
|
||||
}
|
||||
|
||||
.layui-badge {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.layui-badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layui-badge-rim {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
border-color: var(--global-neutral-color-3);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-badge-dot-ripple > span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
animation: layui-badge-dot-anim-ripple 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes layui-badge-dot-anim-ripple {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(2.4);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Badge 在与其他组件配合使用时的辅助样式 */
|
||||
|
||||
.layui-btn .layui-badge,
|
||||
.layui-btn .layui-badge-dot {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.layui-nav .layui-badge,
|
||||
.layui-nav .layui-badge-dot {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin: -5px 6px 0;
|
||||
}
|
||||
|
||||
.layui-nav .layui-badge {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.layui-tab-title .layui-badge,
|
||||
.layui-tab-title .layui-badge-dot {
|
||||
left: 5px;
|
||||
top: -2px;
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
ef01d2baa97b4636e4c1c9870671fe5e1ed77a4e
|
||||
Reference in New Issue
Block a user