mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-05 05:29:01 +08:00
561 lines
18 KiB
Vue
561 lines
18 KiB
Vue
<docs>
|
||
---
|
||
order: 2
|
||
title:
|
||
zh-CN: 方向
|
||
en-US: Direction
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
这里列出了支持 `rtl` 方向的组件，您可以在演示中切换方向。
|
||
|
||
## en-US
|
||
|
||
Components which support rtl direction are listed here, you can toggle the direction in the demo.
|
||
|
||
</docs>
|
||
|
||
<template>
|
||
<span style="margin-right: 16px">Change direction of components:</span>
|
||
<a-radio-group v-model:value="state.direction">
|
||
<a-radio-button value="ltr">LTR</a-radio-button>
|
||
<a-radio-button value="rtl">RTL</a-radio-button>
|
||
</a-radio-group>
|
||
<a-divider />
|
||
<a-config-provider :direction="state.direction">
|
||
<a-space direction="vertical" class="direction-components">
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Cascader example</a-divider>
|
||
<a-cascader
|
||
:options="cascaderOptions"
|
||
placeholder="یک مورد انتخاب کنید"
|
||
:placement="state.popupPlacement"
|
||
@change="onCascaderChange"
|
||
>
|
||
<template #suffixIcon><SearchIcon /></template>
|
||
</a-cascader>
|
||
With search:
|
||
<a-cascader
|
||
:options="cascaderOptions"
|
||
placeholder="Select an item"
|
||
:placement="state.popupPlacement"
|
||
:show-search="{ filter: cascaderFilter }"
|
||
@change="onCascaderChange"
|
||
>
|
||
<template #suffixIcon><SmileOutlined /></template>
|
||
</a-cascader>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Switch example</a-divider>
|
||
<a-space>
|
||
<a-switch default-checked />
|
||
<a-switch loading default-checked />
|
||
<a-switch size="small" loading />
|
||
</a-space>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Radio Group example</a-divider>
|
||
<a-radio-group default-value="c" button-style="solid">
|
||
<a-radio-button value="a">تهران</a-radio-button>
|
||
<a-radio-button value="b" disabled>اصفهان</a-radio-button>
|
||
<a-radio-button value="c">فارس</a-radio-button>
|
||
<a-radio-button value="d">خوزستان</a-radio-button>
|
||
</a-radio-group>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Button example</a-divider>
|
||
<div class="button-demo">
|
||
<a-button type="primary">
|
||
<template #icon><DownloadOutlined /></template>
|
||
</a-button>
|
||
<a-button type="primary" shape="circle">
|
||
<template #icon><DownloadOutlined /></template>
|
||
</a-button>
|
||
<a-button type="primary" shape="round">
|
||
<template #icon><DownloadOutlined /></template>
|
||
</a-button>
|
||
<a-button type="primary" shape="round">
|
||
<template #icon><DownloadOutlined /></template>
|
||
Download
|
||
</a-button>
|
||
<a-button type="primary">
|
||
<template #icon><DownloadOutlined /></template>
|
||
Download
|
||
</a-button>
|
||
<br />
|
||
<a-button-group>
|
||
<a-button type="primary">
|
||
<LeftOutlined />
|
||
Backward
|
||
</a-button>
|
||
<a-button type="primary">
|
||
Forward
|
||
<RightOutlined />
|
||
</a-button>
|
||
</a-button-group>
|
||
<a-button type="primary" loading>Loading</a-button>
|
||
<a-button type="primary" size="small" loading>Loading</a-button>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Tree example</a-divider>
|
||
<a-tree
|
||
v-model:expandedKeys="expandedKeys"
|
||
v-model:selectedKeys="selectedKeys"
|
||
v-model:checkedKeys="checkedKeys"
|
||
show-line
|
||
checkable
|
||
:tree-data="treeData"
|
||
>
|
||
<template #title="{ title, key }">
|
||
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
||
<template v-else>{{ title }}</template>
|
||
</template>
|
||
</a-tree>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Input (Input Group) example</a-divider>
|
||
<a-space direction="vertical" style="width: 100%">
|
||
<a-input-group size="large">
|
||
<a-row :gutter="8">
|
||
<a-col :span="5">
|
||
<a-input default-value="0571" />
|
||
</a-col>
|
||
<a-col :span="8">
|
||
<a-input default-value="26888888" />
|
||
</a-col>
|
||
</a-row>
|
||
</a-input-group>
|
||
<a-input-group compact>
|
||
<a-input style="width: 20%" default-value="0571" />
|
||
<a-input style="width: 30%" default-value="26888888" />
|
||
</a-input-group>
|
||
<a-input-group compact>
|
||
<a-select default-value="Option1">
|
||
<a-select-option value="Option1">Option1</a-select-option>
|
||
<a-select-option value="Option2">Option2</a-select-option>
|
||
</a-select>
|
||
<a-input style="width: 50%" default-value="input content" />
|
||
<a-inputNumber />
|
||
</a-input-group>
|
||
<a-input-search placeholder="input search text" enter-button="Search" size="large" />
|
||
<div style="margin-bottom: 16px">
|
||
<a-input default-value="mysite">
|
||
<template #selectBefore>
|
||
<a-select default-value="Http://" style="width: 90px">
|
||
<a-select-option value="Http://">Http://</a-select-option>
|
||
<a-select-option value="Https://">Https://</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
<template #selectAfter>
|
||
<a-select default-value=".com" style="width: 80px">
|
||
<a-select-option value=".com">.com</a-select-option>
|
||
<a-select-option value=".jp">.jp</a-select-option>
|
||
<a-select-option value=".cn">.cn</a-select-option>
|
||
<a-select-option value=".org">.org</a-select-option>
|
||
</a-select>
|
||
</template>
|
||
</a-input>
|
||
</div>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Select example</a-divider>
|
||
<a-space wrap>
|
||
<a-select mode="multiple" default-value="مورچه" style="width: 120px">
|
||
<a-select-option value="jack">Jack</a-select-option>
|
||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||
<a-select-option value="disabled" disabled>Disabled</a-select-option>
|
||
<a-select-option value="Yiminghe">yiminghe</a-select-option>
|
||
</a-select>
|
||
<a-select default-value="مورچه" style="width: 120px" disabled>
|
||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||
</a-select>
|
||
<a-select default-value="مورچه" style="width: 120px" loading>
|
||
<a-select-option value="مورچه">مورچه</a-select-option>
|
||
</a-select>
|
||
<a-select
|
||
show-search
|
||
style="width: 200px"
|
||
placeholder="Select a person"
|
||
option-filter-prop="children"
|
||
:filter-option="
|
||
(input, option) =>
|
||
option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
"
|
||
>
|
||
<a-select-option value="jack">Jack</a-select-option>
|
||
<a-select-option value="سعید">سعید</a-select-option>
|
||
<a-select-option value="tom">Tom</a-select-option>
|
||
</a-select>
|
||
</a-space>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">TreeSelect example</a-divider>
|
||
<div>
|
||
<a-tree-select
|
||
show-search
|
||
style="width: 100%"
|
||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||
placeholder="Please select"
|
||
allow-clear
|
||
tree-default-expand-all
|
||
:tree-data="treeSelectData"
|
||
></a-tree-select>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Modal example</a-divider>
|
||
<div>
|
||
<a-button type="primary" @click="showModal">Open Modal</a-button>
|
||
<a-modal v-model:open="state.modalVisible" title="پنچره ساده">
|
||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||
<p>نگاشتههای خود را اینجا قراردهید</p>
|
||
</a-modal>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Steps example</a-divider>
|
||
<div>
|
||
<a-steps
|
||
progress-dot
|
||
:current="state.currentStep"
|
||
:items="[
|
||
{
|
||
title: 'Finished',
|
||
description: 'This is a description.',
|
||
},
|
||
{
|
||
title: 'In Progress',
|
||
description: 'This is a description.',
|
||
},
|
||
{
|
||
title: 'Waiting',
|
||
description: 'This is a description.',
|
||
},
|
||
]"
|
||
></a-steps>
|
||
<br />
|
||
<a-steps
|
||
:current="state.currentStep"
|
||
:items="[
|
||
{
|
||
title: 'Step 1',
|
||
description: 'This is a description.',
|
||
},
|
||
{
|
||
title: 'Step 2',
|
||
description: 'This is a description.',
|
||
},
|
||
{
|
||
title: 'Step 3',
|
||
description: 'This is a description.',
|
||
},
|
||
]"
|
||
@change="onStepsChange"
|
||
></a-steps>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Rate example</a-divider>
|
||
<div>
|
||
<a-rate v-model:value="rateValue" />
|
||
<br />
|
||
<strong>* Note:</strong>
|
||
Half star not implemented in RTL direction.
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-divider orientation="left">Badge example</a-divider>
|
||
<div>
|
||
<div>
|
||
<a-badge :count="state.badgeCount">
|
||
<a href="#" class="head-example" />
|
||
</a-badge>
|
||
<a-button-group>
|
||
<a-button @click="declineBadge">
|
||
<MinusOutlined />
|
||
</a-button>
|
||
<a-button @click="increaseBadge">
|
||
<PlusOutlined />
|
||
</a-button>
|
||
</a-button-group>
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<a-badge :dot="state.showBadge">
|
||
<a href="#" class="head-example" />
|
||
</a-badge>
|
||
<a-switch :checked="state.showBadge" @change="onChangeBadge" />
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-space>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Pagination example</a-divider>
|
||
<a-pagination show-size-changer :default-current="3" :total="500" />
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="24">
|
||
<a-divider orientation="left">Grid System example</a-divider>
|
||
<div class="grid-demo">
|
||
<div class="code-box-demo">
|
||
<p>
|
||
<strong>* Note:</strong>
|
||
Every calculation in RTL grid system is from right side (offset, push, etc.)
|
||
</p>
|
||
<a-row>
|
||
<a-col :span="8">col-8</a-col>
|
||
<a-col :span="8" :offset="8">col-8</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
|
||
<a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="12" :offset="6">col-12 col-offset-6</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col :span="18" :push="6">col-18 col-push-6</a-col>
|
||
<a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-space>
|
||
</a-config-provider>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { reactive, watch, ref } from 'vue';
|
||
|
||
import {
|
||
SearchOutlined as SearchIcon,
|
||
SmileOutlined,
|
||
DownloadOutlined,
|
||
LeftOutlined,
|
||
RightOutlined,
|
||
MinusOutlined,
|
||
PlusOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import type { TreeProps, TreeSelectProps, CascaderProps } from 'ant-design-vue';
|
||
|
||
const state = reactive({
|
||
currentStep: 0,
|
||
modalVisible: false,
|
||
|
||
badgeCount: 5,
|
||
showBadge: true,
|
||
direction: 'ltr' as 'ltr' | 'rtl',
|
||
popupPlacement: 'bottomLeft' as CascaderProps['placement'],
|
||
});
|
||
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
||
|
||
const treeData: TreeProps['treeData'] = [
|
||
{
|
||
title: 'parent 1',
|
||
key: '0-0',
|
||
children: [
|
||
{
|
||
title: 'parent 1-0',
|
||
key: '0-0-0',
|
||
disabled: true,
|
||
children: [
|
||
{ title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
|
||
{ title: 'leaf', key: '0-0-0-1' },
|
||
],
|
||
},
|
||
{
|
||
title: 'parent 1-1',
|
||
key: '0-0-1',
|
||
children: [{ key: '0-0-1-0', title: 'sss' }],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
const treeSelectData = ref<TreeSelectProps['treeData']>([
|
||
{
|
||
title: 'parent 1',
|
||
value: 'parent 1',
|
||
children: [
|
||
{
|
||
title: 'parent 1-0',
|
||
value: 'parent 1-0',
|
||
children: [
|
||
{
|
||
title: 'my leaf',
|
||
value: 'leaf1',
|
||
},
|
||
{
|
||
title: 'your leaf',
|
||
value: 'leaf2',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: 'parent 1-1',
|
||
value: 'parent 1-1',
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
watch(
|
||
() => state.direction,
|
||
directionValue => {
|
||
if (directionValue === 'rtl') {
|
||
state.popupPlacement = 'bottomRight';
|
||
} else {
|
||
state.popupPlacement = 'bottomLeft';
|
||
}
|
||
},
|
||
);
|
||
const cascaderOptions = [
|
||
{
|
||
value: 'tehran',
|
||
label: 'تهران',
|
||
children: [
|
||
{
|
||
value: 'tehran-c',
|
||
label: 'تهران',
|
||
children: [
|
||
{
|
||
value: 'saadat-abad',
|
||
label: 'سعادت آیاد',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
value: 'ardabil',
|
||
label: 'اردبیل',
|
||
children: [
|
||
{
|
||
value: 'ardabil-c',
|
||
label: 'اردبیل',
|
||
children: [
|
||
{
|
||
value: 'primadar',
|
||
label: 'پیرمادر',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
value: 'gilan',
|
||
label: 'گیلان',
|
||
children: [
|
||
{
|
||
value: 'rasht',
|
||
label: 'رشت',
|
||
children: [
|
||
{
|
||
value: 'district-3',
|
||
label: 'منطقه ۳',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
// ==== Cascader ====
|
||
const cascaderFilter = (inputValue, path) =>
|
||
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||
|
||
const onCascaderChange = value => {
|
||
console.log(value);
|
||
};
|
||
// ==== End Cascader ====
|
||
|
||
// ==== Modal ====
|
||
const showModal = () => {
|
||
state.modalVisible = true;
|
||
};
|
||
|
||
// ==== End Modal ====
|
||
|
||
const onStepsChange = currentStep => {
|
||
console.log('onChange:', currentStep);
|
||
state.currentStep = currentStep;
|
||
};
|
||
|
||
// ==== Badge ====
|
||
|
||
const increaseBadge = () => {
|
||
const badgeCount = state.badgeCount + 1;
|
||
state.badgeCount = badgeCount;
|
||
};
|
||
|
||
const declineBadge = () => {
|
||
let badgeCount = state.badgeCount - 1;
|
||
if (badgeCount < 0) {
|
||
badgeCount = 0;
|
||
}
|
||
state.badgeCount = badgeCount;
|
||
};
|
||
|
||
const onChangeBadge = showBadge => {
|
||
state.showBadge = showBadge;
|
||
};
|
||
const rateValue = ref(2);
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.direction-components {
|
||
width: 100%;
|
||
.button-demo .ant-btn,
|
||
.button-demo .ant-btn-group {
|
||
margin-right: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.button-demo .ant-btn-group > .ant-btn,
|
||
.button-demo .ant-btn-group > span > .ant-btn {
|
||
margin-right: 0;
|
||
margin-left: 0;
|
||
}
|
||
|
||
.head-example {
|
||
display: inline-block;
|
||
width: 42px;
|
||
height: 42px;
|
||
vertical-align: middle;
|
||
background: #eee;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.ant-badge:not(.ant-badge-not-a-wrapper) {
|
||
margin-right: 20px;
|
||
}
|
||
.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
|
||
margin-right: 0;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
[data-theme='dark'] .head-example {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
}
|
||
</style>
|