Skip to content

Commit

Permalink
style(cell): align design
Browse files Browse the repository at this point in the history
  • Loading branch information
@anlyyao
anlyyao committed Jun 15, 2022
1 parent 3301dc6 commit 13198e9
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 123 deletions.
8 changes: 1 addition & 7 deletions src/cell/demos/border.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="cell-base">
<t-cell-group title="显示组边框" border>
<t-cell-group title="显示组边框" bordered>
<t-cell>
<template #title>
<div>自定义标题</div>
Expand All @@ -16,9 +16,3 @@
</t-cell-group>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
18 changes: 5 additions & 13 deletions src/cell/demos/click.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<t-cell-group title="单元格点击时触发" border>
<t-cell-group title="单元格点击时触发" bordered>
<t-cell @click="onClick">
<template #title>
<div>自定义标题</div>
Expand All @@ -15,18 +15,10 @@
</t-cell-group>
</template>

<script>
import { defineComponent } from 'vue';
<script lang="ts" setup>
import Message from '../../message';
export default defineComponent({
setup() {
const onClick = () => {
Message.info('cell click');
};
return {
onClick,
};
},
});
const onClick = () => {
Message.info('cell click');
};
</script>
8 changes: 1 addition & 7 deletions src/cell/demos/group.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
<template>
<div class="cell-base">
<div>
<t-cell-group title="分组标题" summary="列表外常驻文字，常常用于辅助信息说明，列表外常驻文字，常常用于辅助信息说明">
<t-cell title="单行标题" />
<t-cell title="单行标题" arrow />
</t-cell-group>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
54 changes: 4 additions & 50 deletions src/cell/demos/mobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,15 @@
<h1 class="title">Cell 单元格</h1>
<p class="summary">一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容</p>
<tdesign-demo-block title="01 类型" summary="单行单元格">
<t-cell-group>
<t-cell title="单行标题" />
<t-cell title="单行标题" required />
<t-cell title="单行标题" note="辅助信息" arrow></t-cell>
<t-cell title="单行标题" arrow></t-cell>
<t-cell title="单行标题" arrow>
<template #note>
<t-badge :count="2"></t-badge>
</template>
</t-cell>
<t-cell title="单行标题">
<template #note>
<t-switch></t-switch>
</template>
</t-cell>
<t-cell title="单行标题">
<template #leftIcon>
<AppIcon />
</template>
</t-cell>
</t-cell-group>
<SingleDemo />
</tdesign-demo-block>
<tdesign-demo-block summary="多行单元格">
<t-cell-group>
<t-cell title="多行标题" description="一段很长很长的内容文字"></t-cell>
<t-cell title="多行带图标" description="一段很长很长的内容文字" arrow>
<template #leftIcon>
<AppIcon />
</template>
</t-cell>
<t-cell title="多行带头像" description="一段很长很长的内容文字">
<template #leftIcon>
<t-avatar shape="circle" image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png" />
</template>
</t-cell>
<t-cell title="多行带图片" description="一段很长很长的内容文字">
<template #leftIcon>
<img src="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png" style="width: 54px; height: 54px" />
</template>
</t-cell>
<t-cell
title="多行标题"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
></t-cell>
<t-cell
title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
></t-cell>
</t-cell-group>
<MultipleDemo />
</tdesign-demo-block>
</div>
</template>

<script lang="ts" setup>
import { ChevronRightIcon as TIconChevronRight, AppIcon } from 'tdesign-icons-vue-next';
import TSwitch from '../../switch';
import TBadge from '../../badge';
import SingleDemo from './single.vue';
import MultipleDemo from './multiple.vue';
</script>
55 changes: 29 additions & 26 deletions src/cell/demos/multiple.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
<template>
<div class="cell-base">
<t-cell title="单行标题" description="一段很长很长的内容文字"></t-cell>
<t-cell title="单行标题" description="一段很长很长的内容文字" arrow></t-cell>
<t-cell title="单行标题" description="一段很长很长的内容文字">
<t-button theme="primary" variant="outline" size="small">小按钮</t-button>
</t-cell>
<t-cell
title="单行标题"
description="一段很长很长的内容文字，一段很长很长的内容文字，一段很长很长的内容文字"
></t-cell>

<t-cell title="单行标题" description="一段很长很长的内容文字">
<template #leftIcon>
<img
src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
style="width: 50px; height: 50px; margin-right: 8px; float: left"
/>
</template>
</t-cell>
<t-cell
title="双行标题，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字"
></t-cell>
<div>
<t-cell-group>
<t-cell title="多行标题" description="一段很长很长的内容文字"></t-cell>
<t-cell title="多行带图标" description="一段很长很长的内容文字" arrow>
<template #leftIcon>
<AppIcon />
</template>
</t-cell>
<t-cell title="多行带头像" description="一段很长很长的内容文字" :right-icon="chevronRightIcon">
<template #leftIcon>
<t-avatar shape="circle" :image="avatarUrl" />
</template>
</t-cell>
<t-cell title="多行带图片" description="一段很长很长的内容文字" :image="imgUrl" />
<t-cell
title="多行标题"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
></t-cell>
<t-cell
title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
></t-cell>
</t-cell-group>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { h } from 'vue';
import { ChevronRightIcon, AppIcon } from 'tdesign-icons-vue-next';
export default defineComponent({});
const chevronRightIcon = () => h(ChevronRightIcon);
const avatarUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png';
const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png';
</script>
50 changes: 30 additions & 20 deletions src/cell/demos/single.vue
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
<template>
<div class="cell-base">
<t-cell title="单行标题" />
<t-cell title="单行标题">
<t-icon-chevron-right />
</t-cell>
<t-cell title="单行标题" note="辅助信息" arrow></t-cell>
<t-cell>
<template #leftIcon>
<t-icon-user-filled />
</template>
<template #title>
<span>单行标题</span>
</template>
</t-cell>
<div>
<t-cell-group bordered>
<t-cell title="单行标题" @click="onClick" />
<t-cell title="单行标题" required />
<t-cell title="单行标题" note="辅助信息"></t-cell>
<t-cell title="单行标题" arrow></t-cell>
<t-cell title="单行标题" note="辅助信息" :right-icon="chevronRightIcon"></t-cell>
<t-cell title="单行标题" arrow>
<template #note>
<t-badge :count="2"></t-badge>
</template>
</t-cell>
<t-cell title="单行标题">
<template #note>
<t-switch :default-value="true"></t-switch>
</template>
</t-cell>
<t-cell title="单行标题" :left-icon="appIcon" />
</t-cell-group>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ChevronRightIcon as TIconChevronRight, UserIcon as TIconUserFilled } from 'tdesign-icons-vue-next';
<script lang="ts" setup>
import { h } from 'vue';
import { ChevronRightIcon, AppIcon } from 'tdesign-icons-vue-next';
import TSwitch from '../../switch';
import TBadge from '../../badge';
import Message from '../../message';
export default defineComponent({
components: { TIconChevronRight, TIconUserFilled },
});
const onClick = () => {
Message.info('cell click');
};
const chevronRightIcon = () => h(ChevronRightIcon);
const appIcon = () => h(AppIcon);
</script>

0 comments on commit 13198e9

Please sign in to comment.