vue-container-query

KO | EN

gitlite — search

#javascript #typescript #golang #android #rust #deep-learning #linux #java #windows #kubernetes #pytorch #ios #openai #open-source

vue-container-query

(★ 8)

vue-container-query

vue-container-query 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-container-query

**Totally based on [d6u/react-container-query](https://github.com/d6u/react-container-query).**

## Notice

The following documentation is also originated from [d6u/react-container-query](https://github.com/d6u/react-container-query).

Your suggested to pay a visit to the repo `react-container-query`.

## Installation

```sh
npm i -D vue-container-query
```

## API

### `<container-query :query="query" :initialSize="{ width, height } />`

```html
<template>
  <container-query
    :query="query"
    v-model="params"
    @change="handleChange"
  >
    <pre class="app">{{ params }}</pre>
  </container-query>
</template>

const query = {
  'width-between-400-and-599': {
    minWidth: 400,
    maxWidth: 599
  },
  'width-larger-than-600': {
    minWidth: 600
  }
}

export default {
  components: { ContainerQuery },
  data () {
    return { query, params: {} }
  },
  methods: {
    handleChange () {}
  }
}
</script>
```

#### properties

- `props.children`

There should only be **one, and exactly one ** child component.

- `props.query`

"query" is key-value pairs where keys are the class names that will be applied to container element when all constraints are met. The values are the constraints.

- `props.initialSize` (optional)

`initialSize` is an object with optional `width` or `height` property. Because the limitation on how size is computed based on underlying element, in the initial rendering pass, we don't have the size info (because element must be in the DOM have a valid size). At this time `initialSize` will be used as the size of the element.

### `createContainerQueryMixin(query, initialSize)`

```html

<template>
  <pre class="app">{{ containerQuery }}</pre>
</template>

const query = {
  'width-between-400-and-599': {
    minWidth: 400,
    maxWidth: 599
  },
  'width-larger-than-600': {
    minWidth: 600
  }
}

export default {
  mixins: [
    createContainerQueryMixin(query)
  ]
}
</script>
```

vue-container-query

vue-container-query 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-container-query

vue-container-query 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README