TinyVue

https://opentiny.design/tiny-vue/zh-CN/os-theme/
Admin
TinyVue is an intelligent component library that provides a collection of reusable UI components for...
Tokens:627,442
Snippets:1,875
Trust Score:7.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Vue Component Example Browsing Modes

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/badge

Illustrates different modes for browsing component examples in Vue, such as multi-example and single-example views.

```Vue
```vue
<template>
  <div class="example-viewer">
    <div v-if="isMultiExample">
      <!-- Display multiple examples -->
      <component-a />
      <component-b />
    </div>
    <div v-else>
      <!-- Display single example -->
      <component-c />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMultiExample: true // or false based on user selection
    };
  },
  components: {
    ComponentA: { template: '<div>Component A</div>' },
    ComponentB: { template: '<div>Component B</div>' },
    ComponentC: { template: '<div>Component C</div>' }
  }
};
</script>

<style scoped>
.example-viewer {
  /* Styles for example viewer */
}
</style>
```
```

--------------------------------

### Vue Component Theming Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-data-source

Demonstrates how to apply OS-like themes to Vue components using CSS variables and JavaScript. This snippet shows a basic setup for dynamic theming.

```Vue
<template>
  <div class="os-theme-container" :style="{ '--primary-color': themeColor }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'OsThemeContainer',
  props: {
    themeColor: {
      type: String,
      default: '#007bff'
    }
  }
};
</script>

<style scoped>
.os-theme-container {
  /* Default OS-like styling */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}

/* Example of using the theme color */
.os-theme-container > * {
  color: var(--primary-color);
}
</style>
```

--------------------------------

### Chart Basic Usage Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-graph

Demonstrates the basic usage of the Chart component. Refer to the following example for detailed usage instructions.

```vue
______
```

--------------------------------

### Vue OS Theme Component Examples

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/autocomplete

Provides examples for the OS Theme components in Vue.js. This section allows developers to browse different modes and styles for the components.

```Vue
```K`
```

--------------------------------

### JavaScript for Theme Switching (Conceptual)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/alert

A conceptual example of how JavaScript might be used to dynamically switch between different OS themes or apply theme variations.

```JavaScript
function switchTheme(themeName) {
  // Logic to load and apply the specified theme
  // This could involve adding/removing CSS classes or importing different stylesheets
  console.log(`Switching to theme: ${themeName}`);
  // Example: document.body.classList.add(themeName);
}

// Example usage:
// switchTheme('dark-theme');
```

--------------------------------

### Vue Component Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/alert

Demonstrates the basic structure and usage of a Vue.js component within the OpenTiny Vue framework. This example showcases how to import and render a component, likely a button or input field, with basic props and event handling.

```Vue.js
<template>
  <div class="os-theme-component">
    <p>{{ message }}</p>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

export default defineComponent({
  name: 'OsThemeComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('button-click');
    }
  }
});
</script>

<style scoped>
.os-theme-component {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
```

--------------------------------

### Vue Component Theming Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-dynamically-columns

Demonstrates how to apply OS-like themes to Vue components using CSS variables and JavaScript. This snippet shows a basic setup for dynamic theming.

```Vue
<template>
  <div class="os-theme-container" :style="{ '--primary-color': themeColor }">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'OsThemeContainer',
  props: {
    themeColor: {
      type: String,
      default: '#007bff'
    }
  }
};
</script>

<style scoped>
.os-theme-container {
  /* Default OS-like styling */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333;
}

/* Example of using the theme color */
.os-theme-container > * {
  color: var(--primary-color);
}
</style>
```

--------------------------------

### Chart 图表 - 基本用法

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-ring

Provides basic usage examples for the Chart component. Detailed usage can be found in the referenced examples.

```vue
<!-- Detailed usage reference in the following examples -->
```

--------------------------------

### Vue Component Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/button

Demonstrates the basic structure and usage of a Vue.js component within the OpenTiny Vue framework. This example showcases how to import and render a component, likely a button or input field, with basic props and event handling.

```Vue.js
<template>
  <div class="os-theme-component">
    <p>{{ message }}</p>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

export default defineComponent({
  name: 'OsThemeComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('button-click');
    }
  }
});
</script>

<style scoped>
.os-theme-component {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
```

--------------------------------

### Dynamic Theme Switching Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-radar

Illustrates how to dynamically switch between different themes, such as the OS theme and a dark theme, within a Vue application.

```JavaScript
import { ref } from 'vue';
import { ThemeProvider } from '@opentiny/vue';

export default {
  components: {
    ThemeProvider
  },
  setup() {
    const currentTheme = ref('os'); // 'os' or 'dark'

    const switchTheme = (theme) => {
      currentTheme.value = theme;
    };

    return {
      currentTheme,
      switchTheme
    };
  }
};
</script>

<template>
  <div>
    <button @click="switchTheme('os')">OS Theme</button>
    <button @click="switchTheme('dark')">Dark Theme</button>
    <ThemeProvider :theme="currentTheme">
      <MyComponent />
    </ThemeProvider>
  </div>
</template>
```

--------------------------------

### Display Title Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/icon

Demonstrates how to display a title using the OpenTiny vue component library. This example likely utilizes a specific title component provided by the library.

```vue
<template>
  <div class="title-container">
    <TiTitle>基本用法</TiTitle>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import TiTitle from '@opentiny/vue';

export default defineComponent({
  components: {
    TiTitle
  }
});
</script>

<style scoped>
.title-container {
  padding: 20px;
}
</style>
```

--------------------------------

### Vue.js OS Theme Component Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/carousel

Demonstrates a basic Vue.js component structure for applying OS-specific themes. This example shows how to import and use theme-related styles and potentially logic within a Vue component.

```Vue.js
<template>
  <div class="os-theme-container">
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'OsThemeWrapper',
  // Component logic can be added here
});
</script>

<style>
/* Basic styling for the theme wrapper */
.os-theme-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Add more theme-specific styles */
}
</style>
```

--------------------------------

### OpenTiny Vue OS Theme Basic Usage

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/autocomplete

Demonstrates the fundamental usage of OpenTiny Vue's OS theme components. This section likely covers the initial setup and rendering of these components within a Vue.js application.

```vue
<template>
  <div class="os-theme-example">
    <!-- Basic component usage will be shown here -->
  </div>
</template>

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

export default defineComponent({
  name: 'OsThemeBasicUsage',
  // Component logic and data
});
</script>

<style scoped>
/* Component styles */
</style>
```

--------------------------------

### OpenTiny Vue OS Theme Event Handling

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/autocomplete

Provides examples of handling various events emitted by OpenTiny Vue's OS theme components. This is essential for reacting to user interactions and component state changes.

```vue
<template>
  <div class="os-theme-event-example">
    <YourComponent @change="handleChange" @focus="handleFocus" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// Import YourComponent

export default defineComponent({
  name: 'OsThemeEventHandling',
  methods: {
    handleChange(value: any) {
      console.log('Value changed:', value);
    },
    handleFocus() {
      console.log('Component focused');
    }
  },
  // Component logic and data
  // components: { YourComponent }
});
</script>

<style scoped>
/* Component styles */
</style>
```

--------------------------------

### Chart 图表 - 基本用法

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-funnel

Demonstrates the basic usage of the Chart component. It serves as a starting point for integrating charts into your application. Further details can be found in the provided examples.

```vue
<!-- Detailed usage reference in the following example -->

```

--------------------------------

### OpenTiny Vue OS Theme Component Examples

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-toolbar

This section provides access to component examples for the OpenTiny Vue OS Theme. Users can browse examples in different modes, such as multi-example or single-example, and view code styles like Options API or Composition API.

```Vue
```K

```

--------------------------------

### OpenTiny Vue OS Theme Code Examples

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/steps

This section provides code examples for the OpenTiny Vue OS Theme. It allows users to browse examples in different modes, such as multi-example or single-example, and view them in different styles like options or composition.

```Vue
```K`
```

--------------------------------

### Chart Component Basic Usage - OpenTiny Vue

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-process

Demonstrates the fundamental usage of the Chart component in OpenTiny Vue. This section provides examples for getting started with integrating charts into your application.

```vue
<template>
  <div class="chart-container">
    <tiny-chart-core :options="chartOptions"></tiny-chart-core>
  </div>
</template>

<script>
import { ChartCore } from '@opentiny/vue';

export default {
  components: {
    'tiny-chart-core': ChartCore
  },
  data() {
    return {
      chartOptions: {
        // Chart configuration options go here
        // Example:
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>
```

--------------------------------

### OpenTiny Vue OS Theme Code Examples

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-faq

This section provides code examples for the OpenTiny Vue OS Theme. It allows users to browse examples in different modes, such as multi-example or single-example, and view them in different styles like options or composition.

```Vue
```K`
```

--------------------------------

### Dynamic Theme Switching (JavaScript Example)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid

Provides a JavaScript example for dynamically switching between different themes or applying the OS theme based on user preference or system settings.

```javascript
function applyOsTheme() {
  document.body.classList.add('os-theme-active');
  // Potentially load theme-specific JS or update CSS variables dynamically
}

function removeOsTheme() {
  document.body.classList.remove('os-theme-active');
}

// Example usage:
// applyOsTheme();
```

--------------------------------

### Chart 图表 - 多组数据示例

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-radar

Provides examples for using the Chart component with multiple sets of data. Detailed usage can be found in the following examples.

```vue
```vue
<template>
  <div class="chart-container">
    <tiny-chart-bar :options="options" />
  </div>
</template>

<script>
import { ChartBar } from '@opentiny/vue'

export default {
  components: {
    'tiny-chart-bar': ChartBar
  },
  data() {
    return {
      options: {
        tooltip: {},
        legend: {
          data: ['Product A', 'Product B']
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            name: 'Product A',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Product B',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>
```
```

--------------------------------

### Dynamic Theme Switching (JavaScript Example)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-span

Provides a JavaScript example for dynamically switching between different themes or applying the OS theme based on user preference or system settings.

```javascript
function applyOsTheme() {
  document.body.classList.add('os-theme-active');
  // Potentially load theme-specific JS or update CSS variables dynamically
}

function removeOsTheme() {
  document.body.classList.remove('os-theme-active');
}

// Example usage:
// applyOsTheme();
```

--------------------------------

### Install OpenTiny Vue Chart Components

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-docs

Instructions for installing the OpenTiny Vue chart components using npm or yarn. This is the recommended way to start development.

```bash
npm i @opentiny/vue-huicharts
# or
yarn add @opentiny/vue-huicharts
```

--------------------------------

### Chart Custom Node Connection Style Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-graph

Illustrates how to customize the connection styles for nodes within the Chart component. Detailed usage is provided in the example.

```vue
______
```

--------------------------------

### Chart 图表 - 金字塔漏斗图示例

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-funnel

Provides a specific example of a funnel chart, likely a pyramid funnel chart, showcasing its implementation within the OpenTiny Vue framework. Refer to the example for detailed usage.

```vue
<!-- Detailed usage reference in the following example -->

```

--------------------------------

### Chart Basic Usage Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-pie

Demonstrates the basic usage of the Chart component. Refer to the following example for detailed usage instructions.

```vue
______
```

--------------------------------

### OpenTiny Vue User Guidance - Paragraphs

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/guide

Shows how to implement user guidance using simple text paragraphs within OpenTiny Vue components. This is useful for providing instructions or contextual information to users.

```vue
<template>
  <div class="user-guidance-paragraph">
    <h3>Guidance Title</h3>
    <p>This is the first paragraph of user guidance. It explains the basic functionality.</p>
    <p>This second paragraph provides additional details or next steps for the user.</p>
  </div>
</template>

<script>
export default {
  name: 'UserGuidanceParagraph'
}
</script>

<style scoped>
.user-guidance-paragraph {
  border: 1px dashed green;
  padding: 15px;
  margin-bottom: 10px;
}
.user-guidance-paragraph h3 {
  margin-top: 0;
}
</style>
```

--------------------------------

### Vue Component Theming Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-tree-table

Demonstrates how to apply OS-specific themes to Vue components using CSS variables and a theming utility. This example shows the basic structure for creating themeable components.

```Vue
<template>
  <div class="os-themed-component">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'OsThemedComponent',
  data() {
    return {
      message: 'This component is OS themed!'
    };
  }
};
</script>

<style>
.os-themed-component {
  background-color: var(--os-background-color);
  color: var(--os-text-color);
  padding: 20px;
  border-radius: 8px;
}
</style>
```

--------------------------------

### JavaScript for Theme Switching (Conceptual)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/guide

A conceptual example of how JavaScript might be used to dynamically switch between different OS themes or apply theme variations.

```JavaScript
function switchTheme(themeName) {
  // Logic to load and apply the specified theme
  // This could involve adding/removing CSS classes or importing different stylesheets
  console.log(`Switching to theme: ${themeName}`);
  // Example: document.body.classList.add(themeName);
}

// Example usage:
// switchTheme('dark-theme');
```

--------------------------------

### JavaScript for Theme Switching (Conceptual)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-line

A conceptual example of how JavaScript might be used to dynamically switch between different OS themes or apply theme variations.

```JavaScript
function switchTheme(themeName) {
  // Logic to load and apply the specified theme
  // This could involve adding/removing CSS classes or importing different stylesheets
  console.log(`Switching to theme: ${themeName}`);
  // Example: document.body.classList.add(themeName);
}

// Example usage:
// switchTheme('dark-theme');
```

--------------------------------

### Linux OS Theme Styles (Example)

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/icon

This CSS code provides an example of how OpenTiny Vue components can be styled to align with common Linux desktop environments. It includes basic styling for buttons and inputs, adaptable to various Linux themes.

```CSS
.os-theme-container {
  font-family: Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

.tiny-button {
  background-color: #337ab7;
  color: white;
  border: 1px solid #2e6da4;
  border-radius: 3px;
  padding: 8px 16px;
}

.tiny-input {
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 8px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
```

--------------------------------

### Chart 图表 - 基本用法

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-radar

Demonstrates the basic usage of the Chart component. Refer to the following examples for detailed usage.

```vue
```vue
<template>
  <div class="chart-container">
    <tiny-chart-line :options="options" />
  </div>
</template>

<script>
import { ChartLine } from '@opentiny/vue'

export default {
  components: {
    'tiny-chart-line': ChartLine
  },
  data() {
    return {
      options: {
        tooltip: {},
        legend: {
          data: ['Sales']
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {},
        series: [
          {
            name: 'Sales',
            type: 'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>
```
```

--------------------------------

### Dynamic Theme Switching Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-loading

Illustrates how to dynamically switch between different themes, such as the OS theme and a dark theme, within a Vue application.

```JavaScript
import { ref } from 'vue';
import { ThemeProvider } from '@opentiny/vue';

export default {
  components: {
    ThemeProvider
  },
  setup() {
    const currentTheme = ref('os'); // 'os' or 'dark'

    const switchTheme = (theme) => {
      currentTheme.value = theme;
    };

    return {
      currentTheme,
      switchTheme
    };
  }
};
</script>

<template>
  <div>
    <button @click="switchTheme('os')">OS Theme</button>
    <button @click="switchTheme('dark')">Dark Theme</button>
    <ThemeProvider :theme="currentTheme">
      <MyComponent />
    </ThemeProvider>
  </div>
</template>
```

--------------------------------

### DatePicker Range Selection

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/date-picker

Illustrates how to configure the DatePicker for selecting a date range. This is useful for scenarios where users need to specify a start and end date.

```vue
<template>
  <div class="demo-date-picker">
    <tiny-date-picker v-model="value2" type="daterange"></tiny-date-picker>
  </div>
</template>

<script>
import { DatePicker } from '@opentiny/vue';

export default {
  components: {
    TinyDatePicker: DatePicker
  },
  data() {
    return {
      value2: ''
    };
  }
};
</script>
```

--------------------------------

### JavaScript for Theme Management in OpenTiny Vue

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-edit

Provides JavaScript code examples for managing theme switching and applying styles dynamically within an OpenTiny Vue application. This includes functions to load and apply theme configurations.

```javascript
import { setTheme } from 'opentiny-vue';

function applyOsTheme(themeName) {
  // Example: Load theme configuration from a JSON file or object
  const themeConfig = {
    'light': {
      '--os-background-color': '#ffffff',
      '--os-text-color': '#333333',
      '--os-spacing-medium': '16px',
      '--os-border-radius': '4px'
    },
    'dark': {
      '--os-background-color': '#333333',
      '--os-text-color': '#ffffff',
      '--os-spacing-medium': '16px',
      '--os-border-radius': '4px'
    }
  };

  if (themeConfig[themeName]) {
    setTheme(themeConfig[themeName]);
    console.log(`OS theme '${themeName}' applied.`);
  } else {
    console.error(`OS theme '${themeName}' not found.`);
  }
}

// Usage example:
// applyOsTheme('dark');
```

--------------------------------

### Chart 图表 - 双重圆环图示例

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-ring

Demonstrates how to create a double ring chart using the Chart component. Detailed usage instructions are available in the provided examples.

```vue
<!-- Detailed usage reference in the following examples -->
```

--------------------------------

### 基础用法 - Guide 引导

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/guide

通过 `dom-data` 设置每个步骤的内容，`show-step` 属性开启指引。`dom-data` 的详细配置参考 IDomData 类型。

```vue
<template>
  <div class="guide-example">
    <div v-for="(step, index) in guideData" :key="index" :data-guide="JSON.stringify(step)">
      <!-- 步骤内容 -->
      {{ step.content }}
    </div>
    <button @click="startGuide">开始引导</button>
  </div>
</template>

<script>
import { Guide } from 'tiny-vue';

export default {
  data() {
    return {
      guideData: [
        { content: '这是第一步', popPosition: 'top' },
        { content: '这是第二步', popPosition: 'bottom' },
      ]
    };
  },
  methods: {
    startGuide() {
      // 假设有一个全局的 Guide 实例或方法来启动引导
      // Guide.start(this.guideData);
      console.log('开始引导');
    }
  }
};
</script>

<style>
.guide-example .guide-step {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>
```

--------------------------------

### OpenTiny Vue Carousel Rotation Cards

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/carousel

Shows an example of using rotation cards within the OpenTiny Vue Carousel, likely for a more dynamic or visually distinct presentation.

```vue
<template>
  <div class="carousel-container">
    <tiny-carousel type="card" :loop="true" :autoplay="true" :interval="3000">
      <tiny-carousel-item v-for="item in 4" :key="item">
        <div class="card-content">
          <h3>Card {{ item }}</h3>
          <p>This is the content for card {{ item }}.</p>
        </div>
      </tiny-carousel-item>
    </tiny-carousel>
  </div>
</template>

<script>
export default {
  setup() {
    return {}
  }
}
</script>

<style scoped>
.carousel-container {
  width: 600px;
  height: 400px;
}
.card-content {
  padding: 20px;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 8px;
}
</style>
```

--------------------------------

### OpenTiny Vue OS Theme: Basic Usage and Data Formatting

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/tree

Demonstrates the fundamental usage of the OS theme components and how to format data for display. This includes setting up the basic structure and defining how data should be presented to the user.

```Vue
<template>
  <div class="os-theme-container">
    <!-- OS Theme components will be rendered here -->
  </div>
</template>

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

export default defineComponent({
  name: 'OsThemeExample',
  // Component logic and data properties would go here
});
</script>

<style scoped>
.os-theme-container {
  /* Styles for the main container */
}
</style>
```

--------------------------------

### Virtual Scrolling in OpenTiny Vue

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/grid-large-data

Demonstrates the implementation of virtual scrolling for enhanced performance with large datasets in OpenTiny Vue. This includes setup and basic usage patterns.

```Vue
<template>
  <tiny-virtual-scroll :data="tableData">
    <template #default="{ row }">
      <tiny-table-column v-for="(item, index) in columns" :key="index" :field="item.field" :title="item.title"></tiny-table-column>
    </template>
  </tiny-virtual-scroll>
</template>

<script>
import { VirtualScroll, TableColumn } from '@opentiny/vue';

export default {
  components: {
    TinyVirtualScroll: VirtualScroll,
    TinyTableColumn: TableColumn
  },
  data() {
    return {
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'area', title: 'Area' },
        { field: 'province', title: 'Province' },
        { field: 'city', title: 'City' },
        { field: 'address', title: 'Address' },
        { field: 'introduction', title: 'Introduction' }
      ],
      tableData: Array.from({ length: 1000 }, (_, i) => ({
        id: i + 1,
        name: `Name ${i + 1}`,
        area: `Area ${i + 1}`,
        province: `Province ${i + 1}`,
        city: `City ${i + 1}`,
        address: `Address ${i + 1}`,
        introduction: `Introduction ${i + 1}`
      }))
    };
  }
};
</script>
```

--------------------------------

### Vue Component Theming Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/flowchart

Demonstrates how to apply OS-specific themes to Vue components using CSS variables and the OpenTiny theming system. This allows for dynamic theme switching and customization.

```Vue
<template>
  <div class="os-theme-container">
    <h1 class="title">{{ title }}</h1>
    <p class="description">{{ description }}</p>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'OsThemeWrapper',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.os-theme-container {
  /* Default theme styles */
  background-color: var(--theme-background-color);
  color: var(--theme-text-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--theme-title-color);
}

.description {
  font-size: 16px;
  line-height: 1.5;
}
</style>

```

--------------------------------

### Vue.js Theme Customization Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart

Demonstrates how to customize themes in a Vue.js application using OpenTiny components. This snippet likely involves importing theme variables and applying them to components.

```Vue.js
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ThemeExample',
  template: `
    <div class="theme-container">
      <p>This is a themed component.</p>
    </div>
  `,
});

```

```CSS
.theme-container {
  --primary-color: #4CAF50; /* Example primary color */
  background-color: var(--background-color, #ffffff);
  color: var(--text-color, #333333);
  padding: 20px;
  border-radius: 8px;
}

```

--------------------------------

### CSS Variables for Theming

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/carousel

This example shows how CSS custom properties (variables) can be used to manage theme-specific values. These variables would be updated based on the detected operating system.

```CSS
:root {
  --primary-color: #007bff;
  --background-color: #f8f9fa;
  --text-color: #212529;
}

.windows {
  --primary-color: #005fcc;
  --background-color: #e9ecef;
}

.macos {
  --primary-color: #007aff;
  --background-color: #f2f2f7;
}

.linux {
  --primary-color: #4CAF50;
  --background-color: #f0f0f0;
}

.os-theme-container {
  background-color: var(--background-color);
  color: var(--text-color);
}

button {
  background-color: var(--primary-color);
  color: white;
}
```

--------------------------------

### OpenTiny Vue OS Theme Basic Usage

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/tree-select

Demonstrates the fundamental usage of the OpenTiny Vue OS Theme component. This section covers the initial setup and essential props required to render the component.

```vue
<template>
  <div class="os-theme-basic">
    <OSTheme />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { OSTheme } from '@opentiny/vue';

export default defineComponent({
  components: {
    OSTheme
  }
});
</script>

<style scoped>
.os-theme-basic {
  /* Add basic styling if needed */
}
</style>
```

--------------------------------

### Vue.js Theme Customization Example

Source: https://opentiny.design/tiny-vue/zh-CN/os-theme/components/chart-autonavi-map

Demonstrates how to customize themes in a Vue.js application using OpenTiny components. This snippet likely involves importing theme variables and applying them to components.

```Vue.js
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ThemeExample',
  template: `
    <div class="theme-container">
      <p>This is a themed component.</p>
    </div>
  `,
});

```

```CSS
.theme-container {
  --primary-color: #4CAF50; /* Example primary color */
  background-color: var(--background-color, #ffffff);
  color: var(--text-color, #333333);
  padding: 20px;
  border-radius: 8px;
}

```
Tokens:
Raw