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: replace demo of icon link divider grid layout with t-space #1599

Merged
merged 5 commits into from
Sep 4, 2022
Merged

chore: replace demo of icon link divider grid layout with t-space #1599

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
d37ac7d
feat: icon demo space
PengYYYYY Sep 3, 2022
71e277d
feat: divider space
PengYYYYY Sep 3, 2022
6357134
feat: link space
PengYYYYY Sep 3, 2022
310d6e2
test: snap update
PengYYYYY Sep 3, 2022
0f9d2c7
feat: breadcrumb grid layout
PengYYYYY Sep 3, 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
16 changes: 9 additions & 7 deletions src/breadcrumb/_example/href.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
<template>
<div>
<t-space direction="vertical">
<t-breadcrumb>
<t-breadcrumbItem :to="{ path: '/' }"> 首页 </t-breadcrumbItem>
<t-breadcrumbItem to="/vue-next/components/menu" :replace="true"> 页面1(覆盖路由) </t-breadcrumbItem>
<t-breadcrumbItem href="https://www.tencent.com" :target="'_blank'"> 页面2 </t-breadcrumbItem>
<t-breadcrumbItem href="/components/button" :disabled="true"> 页面3(disabled) </t-breadcrumbItem>
<t-breadcrumbItem @click="onClickItem"> 页面4自定义点击 </t-breadcrumbItem>
<t-breadcrumbItem :to="{ path: '/' }">首页</t-breadcrumbItem>
<t-breadcrumbItem to="/vue/components/menu" :replace="true">页面1(覆盖路由)</t-breadcrumbItem>
<t-breadcrumbItem href="http://tdesign.tencent.com/" :target="'_blank'">页面2</t-breadcrumbItem>
<t-breadcrumbItem href="http://tdesign.tencent.com/vue/components/button" :disabled="true"
>页面3(disabled)</t-breadcrumbItem
>
<t-breadcrumbItem @click="onClickItem">页面4自定义点击</t-breadcrumbItem>
</t-breadcrumb>
<div style="margin-top: 20px">点击计数器：{{ count }}</div>
</div>
</t-space>
</template>
<script setup>
import { ref } from 'vue';
Expand Down
4 changes: 2 additions & 2 deletions src/divider/_example/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div>
<t-space direction="vertical">
<p>
这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
Expand All @@ -11,5 +11,5 @@
<p>
这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
</div>
</t-space>
</template>
10 changes: 5 additions & 5 deletions src/divider/_example/text.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<template>
<div>
<t-space direction="vertical">
<p>
这是第一种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
<t-divider align="left"> TDesign </t-divider>
<t-divider align="left">TDesign</t-divider>
<p>
这是第二种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
<t-divider align="center" dashed> TDesign </t-divider>
<t-divider align="center" dashed>TDesign</t-divider>
<p>
这是第三种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
<t-divider align="right" dashed> TDesign </t-divider>
<t-divider align="right" dashed>TDesign</t-divider>
<p>
这是第四种类型的内容元素或信息数据，通过分割线进行分割。分割线方便用户清晰明确的读取和预览，减少信息符合，提高用户使用效率。避免大段内容的聚集、信息负荷过多，导致信息获取或内容操作效率降低。
</p>
</div>
</t-space>
</template>
8 changes: 4 additions & 4 deletions src/divider/_example/vertical.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div>
<t-space break-line>
<span>正直</span>
<t-divider layout="vertical" />
<span>进取</span>
<t-divider layout="vertical" />
<span>合作</span>
<span>协作</span>
<t-divider layout="vertical" dashed />
<span>创新</span>
</div>
<span>创造</span>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/flex.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-item--grid">
<t-space direction="vertical">
<t-row>
<t-col :flex="2">
<div>2 / 5</div>
Expand Down Expand Up @@ -35,5 +35,5 @@
<div>auto with no-wrap</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/gutter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<!-- 只指定水平 gutter，垂直默认为0 -->
<span>水平 gutter 为固定值</span>
<t-row :gutter="16">
Expand Down Expand Up @@ -62,5 +62,5 @@
<div>col-3</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/halign.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<span>align left</span>
<t-row justify="start">
<t-col :span="2">
Expand Down Expand Up @@ -79,5 +79,5 @@
<div>col-2</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/offset.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<t-row>
<t-col :span="4">
<div>col-4</div>
Expand All @@ -23,5 +23,5 @@
<div>col-6 col-offset-3</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/order.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<t-row>
<t-col :span="3" :order="4">
<div>1 col-3-order-4</div>
Expand All @@ -14,5 +14,5 @@
<div>4 col-3-order-1</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/responsive.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<span>宽度响应式</span>
<t-row>
<t-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
Expand All @@ -22,5 +22,5 @@
<div>Col</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/sort.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<t-row>
<t-col :span="9" :push="3">
<div>col-9 col-pull-3</div>
Expand All @@ -8,5 +8,5 @@
<div>col-3 col-pull-9</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
4 changes: 2 additions & 2 deletions src/grid/_example/valign.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="tdesign-demo-block-column">
<t-space direction="vertical">
<p>align top</p>
<t-row align="top" justify="center">
<t-col :span="3">
Expand Down Expand Up @@ -47,5 +47,5 @@
<div>col-3</div>
</t-col>
</t-row>
</div>
</t-space>
</template>
27 changes: 8 additions & 19 deletions src/icon/_example/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,29 @@
<template>
<div class="t-demo-iconfont">
<div class="t-demo-row">
<t-space direction="vertical">
<t-space break-line>
<icon name="loading" style="color: #999999" />
<icon name="close" @click="onIconClose" />
<icon name="check-circle-filled" />
</div>
<br />
<div class="t-demo-row">
</t-space>
<t-space break-line align="center">
<icon name="check-circle-filled" size="small" />
<icon name="check-circle-filled" />
<icon name="check-circle-filled" size="medium" />
<icon name="check-circle-filled" size="large" />
<icon name="check-circle-filled" size="25px" />
<icon name="check-circle-filled" size="2em" />
</div>
<br />
<div class="t-demo-row">
</t-space>
<t-space break-line>
<icon name="check-circle-filled" style="color: red" />
<icon name="check-circle-filled" style="color: green" />
<icon name="check-circle-filled" style="color: orange" />
</div>
</div>
</t-space>
</t-space>
</template>

<script setup>
import { Icon } from 'tdesign-icons-vue-next';

const onIconClose = () => {
console.log('icon was clicked.');
};
</script>

<style lang="less">
.t-demo-iconfont {
.t-icon {
margin-right: 24px;
}
}
</style>
14 changes: 6 additions & 8 deletions src/icon/_example/enhanced.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@
<template>
<div class="t-demo-iconfont">
<div>
<t-space direction="vertical">
<t-space break-line align="center">
<icon name="cps-icon-home-sheep" :url="newSvgUrl" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" size="medium" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" size="large" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" size="25px" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" size="2em" />
</div>
<br />
<div>
</t-space>
<t-space break-line align="center">
<icon name="cps-icon-home-sheep" :url="newSvgUrl" style="color: red" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" style="color: green" />
<icon name="cps-icon-home-sheep" :url="newSvgUrl" style="color: orange" />
<!-- 引入新 Icon 之后，内置 Icon 依旧有效。name 传入图标名称全称。 -->
<icon name="t-icon-home" :url="newSvgUrl" />
</div>
</div>
</t-space>
</t-space>
</template>

<script setup>
import { Icon } from 'tdesign-icons-vue-next';

Expand Down
6 changes: 2 additions & 4 deletions src/icon/_example/icon-select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
<template>
<t-select
v-model="value"
placeholder="请选择"
:style="{ width: '400px' }"
:popup-props="{ overlayStyle: { width: '400px' } }"
placeholder="请选择图标"
>
<t-option v-for="item in options" :key="item.stem" :value="item.stem" class="overlay-options">
<div>
<t-icon :name="item.stem" />
</div>
</t-option>
<template #valueDisplay> <t-icon :name="value" :style="{ marginRight: '8px' }" />{{ value }} </template>
<template #valueDisplay><t-icon :name="value" :style="{ marginRight: '8px' }" />{{ value }}</template>
</t-select>
</template>

<script setup>
import { ref } from 'vue';
import { manifest } from 'tdesign-icons-vue-next/lib/manifest';
// 获取全部图标的列表
const options = ref(manifest);
const value = ref('add');
</script>

<style>
.overlay-options {
display: inline-block;
Expand Down
14 changes: 6 additions & 8 deletions src/icon/_example/iconfont-enhanced.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
<template>
<div class="t-demo-iconfont">
<div>
<t-space direction="vertical">
<t-space break-line align="center">
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" size="medium" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" size="large" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" size="25px" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" size="2em" />
</div>
<br />
<div>
</t-space>
<t-space break-line align="center">
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" style="color: red" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" style="color: green" />
<icon-font name="cps-icon cps-icon-home-sheep" :url="newIconfontUrl" style="color: orange" />
<!-- 引入新 Icon 之后，内置 Icon 依旧有效。name 传入图标名称全称。 -->
<icon-font name="t-icon-home" :url="newIconfontUrl" />
</div>
</t-space>
<br />
</div>
</t-space>
</template>

<script setup>
import { IconFont } from 'tdesign-icons-vue-next';

Expand Down
19 changes: 8 additions & 11 deletions src/icon/_example/iconfont.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
<template>
<div class="t-demo-iconfont">
<div class="t-demo-row">
<t-space direction="vertical">
<t-space break-line>
<icon-font name="loading" />
<icon-font name="close" @click="onIconClose" />
<icon-font name="check-circle-filled" />
</div>
<br />
<div class="t-demo-row">
</t-space>
<t-space break-line align="center">
<icon-font name="check-circle-filled" size="small" />
<icon-font name="check-circle-filled" />
<icon-font name="check-circle-filled" size="medium" />
<icon-font name="check-circle-filled" size="large" />
<icon-font name="check-circle-filled" size="25px" />
<icon-font name="check-circle-filled" size="2em" />
</div>
<br />
<div class="t-demo-row">
</t-space>
<t-space break-line align="center">
<icon-font name="check-circle-filled" style="color: red" />
<icon-font name="check-circle-filled" style="color: green" />
<icon-font name="check-circle-filled" style="color: orange" />
</div>
</div>
</t-space>
</t-space>
</template>

<script setup>
import { IconFont } from 'tdesign-icons-vue-next';

Expand Down
Loading