颜色属性

所有 Framework7-Vue 组件支持相同的颜色属性，允许设置单独的元素颜色和颜色主题

属性	类型	默认值	说明
color	字符串		单个元素颜色。一种默认颜色。
color-theme	字符串		将颜色主题应用于元素。它应该是某个父元素，因为这样会对所有支持的子元素（例如视图、页面、导航栏、工具栏、列表等）产生视觉效果。一种默认颜色。
text-color	字符串		设置元素文本颜色。一种默认颜色。
bg-color	字符串		设置元素背景颜色。一种默认颜色。
border-theme	字符串		设置元素边框颜色。一种默认颜色。
ripple-color	字符串		设置元素涟漪波颜色。一种默认颜色。
dark	布尔值	false	在元素上启用深色布局主题。它应该是某些父元素，因为这会对所有支持子元素（例如视图、页面、导航栏、工具栏、列表等）产生视觉效果。

例如

<!-- Button color -->
<f7-button color="red">Red Button</f7-button>

<!-- Link color -->
<f7-link color="green">Green Link</f7-link>

<!-- Page color theme -->
<f7-page color-theme="orange">
  ...
</f7-page>

<!-- Panel with dark theme -->
<f7-panel dark>
  ...
</f7-panel>

color-themes.vue

<template>
  <f7-page>
    <f7-navbar large title="Color Themes">
      <template #right>
        <f7-link>Link</f7-link>
      </template>
    </f7-navbar>
    <f7-toolbar tabbar icons bottom>
      <f7-link
        tab-link="#tab-1"
        tab-link-active
        text="Tab 1"
        icon-ios="f7:envelope_fill"
        icon-md="material:email"
      />
      <f7-link
        tab-link="#tab-2"
        text="Tab 2"
        icon-ios="f7:calendar_fill"
        icon-md="material:today"
      />
      <f7-link
        tab-link="#tab-3"
        text="Tab 3"
        icon-ios="f7:cloud_upload_fill"
        icon-md="material:file_upload"
      />
    </f7-toolbar>
    <f7-block-title medium>Layout Themes</f7-block-title>
    <f7-block strong>
      <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
      <div class="grid grid-cols-2 grid-gap">
        <div class="bg-color-white demo-theme-picker" @click="setLayoutTheme('light')">
          <f7-checkbox v-if="theme === 'light'" checked disabled />
        </div>
        <div class="bg-color-black demo-theme-picker" @click="setLayoutTheme('dark')">
          <f7-checkbox v-if="theme === 'dark'" checked disabled />
        </div>
      </div>
    </f7-block>

    <f7-block-title medium>Default Color Themes</f7-block-title>
    <f7-block strong>
      <p>Framework7 comes with {{ colors.length }} color themes set.</p>
      <div class="grid grid-cols-3 medium-grid-cols-4 large-grid-cols-5 grid-gap">
        <div v-for="(color, index) in colors" :key="index">
          <f7-button
            fill
            round
            small
            class="demo-color-picker-button"
            :color="color"
            @click="setColorTheme(color)"
            >{{ color }}</f7-button
          >
        </div>
      </div>
    </f7-block>
    <f7-block-title medium>Custom Color Theme</f7-block-title>
    <f7-list strong-ios outline-ios>
      <f7-list-input
        type="colorpicker"
        label="HEX Color"
        placeholder="e.g. #ff0000"
        readonly
        :value="{ hex: themeColor }"
        :color-picker-params="{
          targetEl: '#color-theme-picker-color',
        }"
        @colorpicker:change="(value) => setCustomColor(value.hex)"
      >
        <template #media>
          <div
            id="color-theme-picker-color"
            style="
              width: 28px;
              height: 28px;
              border-radius: 4px;
              background: var(--f7-color-primary);
            "
          ></div>
        </template>
      </f7-list-input>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Button,
  f7Block,
  f7List,
  f7ListInput,
  f7Checkbox,
  f7Link,
  f7Toolbar,
  f7,
} from 'framework7-vue';
import $ from 'dom7';

let theme = 'light';
let themeColor = $('html').css('--f7-color-primary').trim();

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Button,
    f7Block,
    f7List,
    f7ListInput,
    f7Checkbox,
    f7Link,
    f7Toolbar,
  },
  data() {
    const colors = Object.keys(f7.colors).filter(
      (c) => c !== 'primary' && c !== 'white' && c !== 'black',
    );

    return {
      colors,
      theme,
      themeColor,
    };
  },

  methods: {
    setLayoutTheme(newTheme) {
      f7.setDarkMode(newTheme === 'dark');
      theme = newTheme;
      this.theme = newTheme;
    },

    setColorTheme(newColor) {
      themeColor = f7.colors[newColor];
      this.themeColor = themeColor;
      f7.setColorTheme(themeColor);
    },

    setCustomColor(newColor) {
      themeColor = newColor;
      this.themeColor = newColor;
      f7.setColorTheme(newColor);
    },
  },
};
</script>

改进此文档