Skip to content

Commit da86291

Browse files
committed
feat: add flex component
1 parent 8ba768d commit da86291

File tree

4 files changed

+3245
-1815
lines changed

4 files changed

+3245
-1815
lines changed

package.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@
3333
"test:watch": "vitest watch"
3434
},
3535
"dependencies": {
36-
"@nuxt/kit": "^3.5.2",
3736
"@ant-design/icons-vue": "^7.0.1",
38-
"ant-design-vue": "^4.0.1"
37+
"@nuxt/kit": "^3.8.1",
38+
"ant-design-vue": "^4.0.7"
3939
},
4040
"devDependencies": {
4141
"@nuxt/eslint-config": "^0.1.1",
4242
"@nuxt/module-builder": "^0.4.0",
43-
"@nuxt/schema": "^3.5.2",
44-
"@nuxt/test-utils": "^3.5.1",
45-
"@types/node": "^18",
46-
"changelogen": "^0.5.3",
47-
"eslint": "^8.41.0",
48-
"nuxt": "^3.5.1",
49-
"vitest": "^0.31.1"
43+
"@nuxt/schema": "^3.8.1",
44+
"@nuxt/test-utils": "^3.8.1",
45+
"@types/node": "^18.18.9",
46+
"changelogen": "^0.5.5",
47+
"eslint": "^8.53.0",
48+
"nuxt": "^3.8.1",
49+
"vitest": "^0.31.4"
5050
}
5151
}

playground/app.vue

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,35 @@
5454
notification info
5555
</a-button>
5656
</a-space>
57+
<a-flex gap="middle" vertical>
58+
<a-radio-group v-model:value="value">
59+
<a-radio value="horizontal">horizontal</a-radio>
60+
<a-radio value="vertical">vertical</a-radio>
61+
</a-radio-group>
62+
<a-flex :vertical="value === 'vertical'">
63+
<div
64+
v-for="(item, index) in new Array(4)"
65+
:key="item"
66+
:style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
67+
/>
68+
</a-flex>
69+
</a-flex>
5770
</div>
5871
</a-config-provider>
5972
</template>
6073

6174
<script setup lang="ts">
6275
import { theme as antdTheme } from "ant-design-vue"
63-
import { reactive } from "#imports";
76+
import { reactive, ref} from "#imports";
6477
const theme = reactive({
6578
algorithm: antdTheme.defaultAlgorithm
6679
})
67-
80+
import type { CSSProperties } from 'vue';
81+
const value = ref('horizontal');
82+
const baseStyle: CSSProperties = {
83+
width: '25%',
84+
height: '54px',
85+
};
6886
const color = reactive({
6987
bg:"#fff",
7088
color:"#000"

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy