Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Avatar & Badge & Calendar & Card & Collapse example replace with t-space #1655

Merged
merged 5 commits into from
Sep 13, 2022
Merged

chore: Avatar & Badge & Calendar & Card & Collapse example replace with t-space #1655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6eacab
docs(avatar): example space
RayJason Sep 12, 2022
1b71233
docs(badge): example space
RayJason Sep 12, 2022
14c6ee7
docs(calendar): example space
RayJason Sep 13, 2022
48dbb6e
docs(card): example space
RayJason Sep 13, 2022
3a0d501
docs(collapse): example space
RayJason Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions src/avatar/_example/adjust.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
<template>
<div class="demo-avatar">
<t-space :size="40">
<t-avatar>王</t-avatar>
<t-avatar>王亿</t-avatar>
<t-avatar>王亿亿</t-avatar>
</div>
</t-space>
</template>

<style lang="less" scoped>
.demo-avatar {
.t-avatar {
margin-right: 40px;
}
}
</style>
11 changes: 2 additions & 9 deletions src/avatar/_example/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="demo-avatar">
<t-space :size="40">
<t-avatar :image="image" :hide-on-load-failed="false" />
<t-avatar>W</t-avatar>
<t-avatar :icon="icon" />
Expand All @@ -8,7 +8,7 @@
<user-icon />
</template>
</t-avatar>
</div>
</t-space>
</template>
<script setup lang="jsx">
import { computed } from 'vue';
Expand All @@ -17,10 +17,3 @@ import { UserIcon } from 'tdesign-icons-vue-next';
const icon = computed(() => () => <UserIcon />);
const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
</script>
<style lang="less" scoped>
.demo-avatar {
.t-avatar {
margin-right: 40px;
}
}
</style>
14 changes: 3 additions & 11 deletions src/avatar/_example/group-cascading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="demo-avatar">
<t-space direction="vertical" :size="40">
<div class="demo-avatar-block">
<t-avatar-group>
<t-avatar :image="image" />
Expand All @@ -15,19 +15,11 @@
<t-avatar :icon="icon" />
</t-avatar-group>
</div>
</div>
</t-space>
</template>
<script setup lang="jsx">
import { computed } from 'vue';
import { UserIcon } from 'tdesign-icons-vue-next';

const icon = computed(() => () => <UserIcon />);
const icon = () => <UserIcon />;
const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
</script>
<style lang="less" scoped>
.demo-avatar {
.demo-avatar-block:first-child {
margin-bottom: 40px;
}
}
</style>
49 changes: 19 additions & 30 deletions src/avatar/_example/group-max.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
<template>
<div class="demo-avatar">
<div class="demo-avatar-block">
<t-avatar-group size="large" :max="2">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :image="image" />
</t-avatar-group>
</div>
<div class="demo-avatar-block">
<t-avatar-group size="large" :max="2" :collapse-avatar="ellipsisIcon">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</div>
<div class="demo-avatar-block">
<t-avatar-group size="large" :max="2" collapse-avatar="more">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</div>
</div>
<t-space direction="vertical" :size="40">
<t-avatar-group size="large" :max="2">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :image="image" />
</t-avatar-group>

<t-avatar-group size="large" :max="2" :collapse-avatar="ellipsisIcon">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>

<t-avatar-group size="large" :max="2" collapse-avatar="more">
<t-avatar :image="image" />
<t-avatar>Avatar</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</t-space>
</template>
<script setup lang="jsx">
import { UserIcon, EllipsisIcon } from 'tdesign-icons-vue-next';
Expand All @@ -30,10 +26,3 @@ const icon = () => <UserIcon />;
const ellipsisIcon = () => <EllipsisIcon />;
const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
</script>
<style lang="less" scoped>
.demo-avatar {
&-block:not(:last-child) {
margin-bottom: 40px;
}
}
</style>
32 changes: 13 additions & 19 deletions src/avatar/_example/group.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
<template>
<div class="demo-avatar">
<div class="demo-avatar-block">
<t-avatar-group>
<t-avatar :image="image" />
<t-avatar>W</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</div>
<div class="demo-avatar-block">
<t-avatar-group size="large">
<t-avatar :image="image" />
<t-avatar>W</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</div>
</div>
<t-space class="demo-avatar" direction="vertical" :size="40">
<t-avatar-group>
<t-avatar :image="image" />
<t-avatar>W</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>

<t-avatar-group size="large">
<t-avatar :image="image" />
<t-avatar>W</t-avatar>
<t-avatar :icon="icon" />
</t-avatar-group>
</t-space>
</template>
<script setup lang="jsx">
import { UserIcon } from 'tdesign-icons-vue-next';
Expand All @@ -24,9 +21,6 @@ const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
</script>
<style lang="less" scoped>
.demo-avatar {
.demo-avatar-block:not(:last-child) {
margin-bottom: 40px;
}
.t-avatar {
margin-right: 40px;
}
Expand Down
12 changes: 2 additions & 10 deletions src/avatar/_example/shape.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
<template>
<div class="demo-avatar">
<t-space :size="40">
<t-avatar>W</t-avatar>
<t-avatar shape="round"> W </t-avatar>
</div>
</t-space>
</template>

<style lang="less" scoped>
.demo-avatar {
.t-avatar {
margin-right: 40px;
}
}
</style>
24 changes: 7 additions & 17 deletions src/avatar/_example/size.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
<template>
<div class="demo-avatar">
<div class="demo-avatar-block">
<t-space direction="vertical" :size="40">
<t-space :size="40">
<t-avatar size="small"> W </t-avatar>
<t-avatar size="medium"> W </t-avatar>
<t-avatar size="large"> W </t-avatar>
<t-avatar size="100px"> W </t-avatar>
</div>
<div class="demo-avatar-block">
</t-space>

<t-space :size="40">
<t-avatar shape="round" size="small"> W </t-avatar>
<t-avatar shape="round" size="medium"> W </t-avatar>
<t-avatar shape="round" size="large"> W </t-avatar>
<t-avatar shape="round" size="100px"> W </t-avatar>
</div>
</div>
</t-space>
</t-space>
</template>

<style lang="less" scoped>
.demo-avatar {
.demo-avatar-block:first-child {
margin-bottom: 40px;
}
.t-avatar {
margin-right: 40px;
}
}
</style>
47 changes: 13 additions & 34 deletions src/badge/_example/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,20 @@
<template>
<div>
<div class="demo-badge-block">
<t-badge dot>
<div class="badge-block" />
</t-badge>
<t-badge dot> 解锁新徽章 </t-badge>
<t-badge dot>
<svg
class="t-icon"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style="font-size: 24px"
>
<path
fill-rule="evenodd"
d="M8,9 C9.40504021,9 10.7254812,9.36221239 11.8730402,9.99835445 L11.885,10 L12.4565011,10.2862457 C12.7901689,10.4574447 13,10.8009441 13,11.1759685 L13,13 C13,13.5522847 12.5522847,14 12,14 L4,14 C3.44771525,14 3,13.5522847 3,13 L3,11.1762791 C3,10.8012353 3.20985249,10.4577217 3.54354665,10.2865317 L4.121,10 L4.126,9.999 L4.27379497,9.91895294 C5.38659871,9.3321599 6.6545093,9 8,9 Z M8,10 C6.51283435,10 5.13398645,10.4637634 4.00018867,11.2545577 L4,13 L12,13 L12.0003287,11.2549186 C10.8664331,10.4639045 9.48739188,10 8,10 Z M8,2.49576492 C9.65685425,2.49576492 11,3.83891067 11,5.49576492 C11,7.15261916 9.65685425,8.49576492 8,8.49576492 C6.34314575,8.49576492 5,7.15261916 5,5.49576492 C5,3.83891067 6.34314575,2.49576492 8,2.49576492 Z M8,3.49576492 C6.8954305,3.49576492 6,4.39119542 6,5.49576492 C6,6.60033441 6.8954305,7.49576492 8,7.49576492 C9.1045695,7.49576492 10,6.60033441 10,5.49576492 C10,4.39119542 9.1045695,3.49576492 8,3.49576492 Z"
/>
</svg>
</t-badge>
</div>
</div>
<t-space align="center" size="large">
<t-badge dot>
<div class="badge-block" />
</t-badge>
<t-badge dot> 解锁新徽章 </t-badge>
<t-badge dot>
<user-icon size="24" />
</t-badge>
</t-space>
</template>

<style>
.demo-t-badge-title {
margin: 20px 0;
}
<script setup lang="jsx">
import { UserIcon } from 'tdesign-icons-vue-next';
</script>

.demo-badge-block {
display: flex;
align-items: center;
}
<style>
.badge-block {
width: 40px;
height: 40px;
Expand All @@ -40,8 +23,4 @@
box-sizing: border-box;
border-radius: 3px;
}

.tbadge-block + .t-badge {
margin-left: 32px;
}
</style>
8 changes: 2 additions & 6 deletions src/badge/_example/custom.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<t-space size="large">
<t-badge count="2" dot>
<div class="badge-block"></div>
</t-badge>
Expand All @@ -12,7 +12,7 @@
<t-badge count="100" color="#0052D9" shape="round">
<div class="badge-block"></div>
</t-badge>
</div>
</t-space>
</template>
<style scoped>
.badge-block {
Expand All @@ -23,8 +23,4 @@
box-sizing: border-box;
border-radius: 3px;
}

.t-badge + .t-badge {
margin-left: 32px;
}
</style>
8 changes: 2 additions & 6 deletions src/badge/_example/number.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<t-space size="large">
<t-badge :count="2">
<div class="badge-block" />
</t-badge>
Expand All @@ -9,7 +9,7 @@
<t-badge :count="100">
<div class="badge-block" />
</t-badge>
</div>
</t-space>
</template>

<style>
Expand All @@ -21,8 +21,4 @@
box-sizing: border-box;
border-radius: 3px;
}

.badge-block + .badge-block {
margin-left: 16px;
}
</style>
12 changes: 2 additions & 10 deletions src/badge/_example/offset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<t-space size="large">
<t-badge count="2">
<div class="badge-block" />
</t-badge>
Expand All @@ -19,7 +19,7 @@
<t-badge count="2" :offset="[10, -10]">
<div class="badge-block" />
</t-badge>
</div>
</t-space>
</template>

<style>
Expand All @@ -31,12 +31,4 @@
box-sizing: border-box;
border-radius: 3px;
}

.badge-block + .badge-block {
margin-left: 24px;
}

.badge-block + div {
margin-top: 8px;
}
</style>
8 changes: 2 additions & 6 deletions src/badge/_example/shape.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div>
<t-space size="large">
<t-badge shape="circle" count="2">
<div class="badge-block" />
</t-badge>
<t-badge shape="round" count="99">
<div class="badge-block" />
</t-badge>
</div>
</t-space>
</template>

<style>
Expand All @@ -18,8 +18,4 @@
box-sizing: border-box;
border-radius: 3px;
}

.badge-block + .badge-block {
margin-left: 16px;
}
</style>
Loading