blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(Calendar): using primary color by default

Browse Source
This commit is contained in:
chenjiahan 2022-01-24 15:15:02 +08:00
parent d867710cc9
commit 4e89e88845
6 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/calendar/Calendar.tsx
View File

@ -489,7 +489,7 @@ export default defineComponent({
<Button
round
block
type="danger"
type="primary"
color={props.color}
class={bem('confirm')}
disabled={disabled}

10
packages/vant/src/calendar/README.md
View File

@ -125,7 +125,7 @@ Set `show-confirm` to `false` to hide the confirm button. In this case, the `con
Use `color` prop to custom calendar color.
```html
<van-calendar v-model:show="show" color="#1989fa" />
<van-calendar v-model:show="show" color="#ee0a24" />
```
### Custom Date Range
@ -251,7 +251,7 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i
| --- | --- | --- | --- |
| type | Type，can be set to `range` `multiple` | _string_ | `single` |
| title | Title of calendar | _string_ | `Calendar` |
| color | Color for the bottom button and selected date | _string_ | `#ee0a24` |
| color | Color for the bottom button and selected date | _string_ | `#1989fa` |
| min-date | Min date | _Date_ | Today |
| max-date | Max date | _Date_ | Six months after the today |
| default-date | Default selected date | _Date \| Date[] \| null_ | Today |
@ -395,14 +395,14 @@ The component provides the following CSS variables, which can be used to customi
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - |
| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

10
packages/vant/src/calendar/README.zh-CN.md
View File

@ -129,7 +129,7 @@ export default {
通过 `color` 属性可以自定义日历的颜色，对选中日期和底部按钮生效。
```html
<van-calendar v-model:show="show" color="#1989fa" />
<van-calendar v-model:show="show" color="#ee0a24" />
```
### 自定义日期范围
@ -255,7 +255,7 @@ export default {
| --- | --- | --- | --- |
| type | 选择类型:<br>`single` 表示选择单个日期，<br>`multiple` 表示选择多个日期，<br>`range` 表示选择日期区间 | _string_ | `single` |
| title | 日历标题 | _string_ | `日期选择` |
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#1989fa` |
| min-date | 可选择的最小日期 | _Date_ | 当前日期 |
| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 |
| default-date | 默认选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 |
@ -401,14 +401,14 @@ calendarRef.value?.reset();
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-edge-background | _var(--van-primary-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-primary-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - |
| --van-calendar-selected-day-background | _var(--van-primary-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-text-color-3)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

2
packages/vant/src/calendar/demo/index.vue
View File

@ -134,7 +134,7 @@ const show = (type: string, id: string) => {
state.showConfirm = false;
break;
case 'customColor':
state.color = '#1989fa';
state.color = '#ee0a24';
break;
case 'customConfirm':
state.confirmText = t('confirmText');

6
packages/vant/src/calendar/index.less
View File

@ -13,14 +13,14 @@
--van-calendar-day-height: 64px;
--van-calendar-day-font-size: var(--van-font-size-lg);
--van-calendar-range-edge-color: var(--van-white);
--van-calendar-range-edge-background: var(--van-danger-color);
--van-calendar-range-middle-color: var(--van-danger-color);
--van-calendar-range-edge-background: var(--van-primary-color);
--van-calendar-range-middle-color: var(--van-primary-color);
--van-calendar-range-middle-background-opacity: 0.1;
--van-calendar-selected-day-size: 54px;
--van-calendar-selected-day-color: var(--van-white);
--van-calendar-info-font-size: var(--van-font-size-xs);
--van-calendar-info-line-height: var(--van-line-height-xs);
--van-calendar-selected-day-background: var(--van-danger-color);
--van-calendar-selected-day-background: var(--van-primary-color);
--van-calendar-day-disabled-color: var(--van-text-color-3);
--van-calendar-confirm-button-height: 36px;
--van-calendar-confirm-button-margin: 7px 0;

2
packages/vant/src/cascader/index.less
View File

@ -7,7 +7,7 @@
--van-cascader-close-icon-color: var(--van-gray-5);
--van-cascader-selected-icon-size: 18px;
--van-cascader-tabs-height: 48px;
--van-cascader-active-color: var(--van-danger-color);
--van-cascader-active-color: var(--van-primary-color);
--van-cascader-options-height: 384px;
--van-cascader-option-disabled-color: var(--van-text-color-3);
--van-cascader-tab-color: var(--van-text-color);