config-provider

config-provider is used to provide global configuration options, so that your configuration can be accessed globally, config-provider uses [Vue's provide/inject feature](https://v3.vuejs .org/guide/composition-api-provide-inject.html#reactivity)

Basic usage

to set the default configuration through this component

<script setup lang="ts">
import { ref } from 'vue';

const size = ref('medium');

function handlerClick() {
  size.value = size.value === 'medium' ? 'large' : 'medium';
}
</script>

<template>
  <v-config-provider
    :size="size"
    prefix-cls="v"
    :token="{
      color: {
        primary: '#14C9C9',
      },
    }"
  >
    <v-button theme="primary" @click="handlerClick">
      Button
    </v-button>
  </v-config-provider>
</template>

Component size

Customize the default size of the component by modifying size.

<script setup lang="ts">
const sizes = ['small', 'medium', 'large'];
</script>

<template>
  <v-space wrap>
    <v-config-provider
      v-for="size in sizes"
      :key="size"
      :size="size"
    >
      <v-space>
        <v-button>Default</v-button>
        <v-button theme="primary">
          Primary
        </v-button>
        <v-button theme="success">
          Success
        </v-button>
        <v-button theme="error">
          Error
        </v-button>
        <v-button theme="warning">
          Warning
        </v-button>
      </v-space>
    </v-config-provider>
  </v-space>
</template>

Component Namespace

Customize component class name and CSS variable name by modifying prefixCls. (You can open the debug window to see the result).

<template>
  <v-config-provider
    prefix-cls="p"
  >
    <v-button theme="primary">
      Button
    </v-button>
  </v-config-provider>
</template>

Component token

sets the default token of the component. By modifying token, we can present various styles (the CSS variable is used internally).

<script setup lang="ts">
import { reactive } from 'vue';

const token = reactive({
  color: {
    primary: '#14C9C9',
  },
});

function changeColor() {
  token.color.primary = token.color.primary === '#14C9C9' ? '#8b5cf6' : '#14C9C9';
}
</script>

<template>
  <v-space>
    <v-button theme="primary">
      Button
    </v-button>
    <v-config-provider :token="token">
      <v-space>
        <v-button theme="primary" @click="changeColor">
          Button
        </v-button>
        <v-config-provider
          :token="{
            color: {
              primary: 'pink',
            },
          }"
        >
          <v-button theme="primary">
            Button
          </v-button>
        </v-config-provider>
      </v-space>
    </v-config-provider>
  </v-space>
</template>

Component theme

<script setup lang="ts">
import { themes } from '@/index';
</script>

<template>
  <v-config-provider
    :themes="themes"
  >
    <v-space wrap>
      <v-button>Default</v-button>
      <v-button theme="primary">
        Primary
      </v-button>
      <v-button theme="success">
        Success
      </v-button>
      <v-button theme="error">
        Error
      </v-button>
      <v-button theme="warning">
        Warning
      </v-button>
    </v-space>
  </v-config-provider>
</template>

The --demo component is not responsible for generating styles, but introduces various styles through the injected theme. You can modify the default theme according to your needs.

Set the locale

Set component default locale

API

config-provider property

property name	description	type	default value
size	default size	string | enum	medium
prefix-cls	component namespace	string	v
token	component token	Token	default token
themes	Component themes	Themes	-
locale	locale	Locale	-

config-provider slot

Slot Name	Description
default	default slot