新增各选项提示信息
This commit is contained in:
Vendored
+1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Vendored
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -5,8 +5,8 @@
|
|||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>CSS3 Flexbox 在线演示---语言爱好网</title>
|
<title>CSS3 Flexbox 在线演示---语言爱好网</title>
|
||||||
<script type="module" crossorigin src="/assets/index.a7dc6faf.js"></script>
|
<script type="module" crossorigin src="/assets/index.2e2d7739.js"></script>
|
||||||
<link rel="stylesheet" href="/assets/index.17ce6544.css">
|
<link rel="stylesheet" href="/assets/index.844ff92c.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+47
-13
@@ -16,26 +16,35 @@ const flexContainerForm: { [key: string]: any } = reactive({
|
|||||||
const flexContainerList = {
|
const flexContainerList = {
|
||||||
"flex-direction": {
|
"flex-direction": {
|
||||||
title: "flex-direction",
|
title: "flex-direction",
|
||||||
|
titleTooltip: "排列方向",
|
||||||
list: ["row", "row-reverse", "column", "column-reverse"],
|
list: ["row", "row-reverse", "column", "column-reverse"],
|
||||||
modelValue: "row",
|
tooltip: ["主轴为水平方向，起点在左端", "row反方向", "主轴为垂直方向，起点在上沿", "column反方向"],
|
||||||
|
modelValue: "row"
|
||||||
},
|
},
|
||||||
"flex-wrap": {
|
"flex-wrap": {
|
||||||
title: "flex-wrap",
|
title: "flex-wrap",
|
||||||
|
titleTooltip: "排不下，换行",
|
||||||
list: ["nowrap", "wrap", "wrap-reverse"],
|
list: ["nowrap", "wrap", "wrap-reverse"],
|
||||||
|
tooltip: ["不换行", "换行，第一行在上方", "换行，第一行在下方"],
|
||||||
modelValue: "nowrap",
|
modelValue: "nowrap",
|
||||||
},
|
},
|
||||||
"justify-content": {
|
"justify-content": {
|
||||||
title: "justify-content",
|
title: "justify-content",
|
||||||
|
titleTooltip: "主轴上的对齐方式",
|
||||||
list: ["flex-start", "flex-end", "center", "space-between", "space-around"],
|
list: ["flex-start", "flex-end", "center", "space-between", "space-around"],
|
||||||
|
tooltip: ["左对齐", "右对齐", "居中", "两端对齐，项目之间的间隔都相等", "每个项目两侧的间隔相等"],
|
||||||
modelValue: "flex-start",
|
modelValue: "flex-start",
|
||||||
},
|
},
|
||||||
"align-items": {
|
"align-items": {
|
||||||
title: "align-items",
|
title: "align-items",
|
||||||
|
titleTooltip: "交叉轴上如何对齐",
|
||||||
list: ["stretch", "flex-start", "flex-end", "center", "baseline"],
|
list: ["stretch", "flex-start", "flex-end", "center", "baseline"],
|
||||||
|
tooltip: ["项目未设置高度或设为auto，将占满整个容器的高度", "交叉轴的起点对齐", "交叉轴的终点对齐", "交叉轴的中点对齐", "目的第一行文字的基线对齐"],
|
||||||
modelValue: "stretch",
|
modelValue: "stretch",
|
||||||
},
|
},
|
||||||
"align-content": {
|
"align-content": {
|
||||||
title: "align-content",
|
title: "align-content",
|
||||||
|
titleTooltip: "多根轴线的对齐方式",
|
||||||
list: [
|
list: [
|
||||||
"stretch",
|
"stretch",
|
||||||
"flex-start",
|
"flex-start",
|
||||||
@@ -44,6 +53,7 @@ const flexContainerList = {
|
|||||||
"space-between",
|
"space-between",
|
||||||
"space-around",
|
"space-around",
|
||||||
],
|
],
|
||||||
|
tooltip: ["轴线占满整个交叉轴", "与交叉轴的起点对齐", "与交叉轴的终点对齐", "与交叉轴的中点对齐", "与交叉轴两端对齐，轴线之间的间隔平均分布", "每根轴线两侧的间隔都相等"],
|
||||||
modelValue: "stretch",
|
modelValue: "stretch",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -70,6 +80,14 @@ const itemAlignSelf = [
|
|||||||
"flex-end",
|
"flex-end",
|
||||||
"baseline",
|
"baseline",
|
||||||
];
|
];
|
||||||
|
const itemAlignSelfTooltip = [
|
||||||
|
"为父元素的align-items值，没有父容器，则为stretch",
|
||||||
|
"适合容器",
|
||||||
|
"容器的中央",
|
||||||
|
"容器的开头",
|
||||||
|
"容器的末端",
|
||||||
|
"容器的基线",
|
||||||
|
];
|
||||||
|
|
||||||
/** 子项列表 JSON 数据 */
|
/** 子项列表 JSON 数据 */
|
||||||
let flexItemForm: {
|
let flexItemForm: {
|
||||||
@@ -274,19 +292,28 @@ setInterval(() => {
|
|||||||
:key="key"
|
:key="key"
|
||||||
>
|
>
|
||||||
<h4>
|
<h4>
|
||||||
|
<a-tooltip
|
||||||
|
:content="item.titleTooltip"
|
||||||
|
background-color="goldenrod"
|
||||||
|
:mini="true">
|
||||||
<strong>{{ item.title }}</strong>
|
<strong>{{ item.title }}</strong>
|
||||||
|
</a-tooltip>
|
||||||
</h4>
|
</h4>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
v-model="flexContainerForm[key]"
|
v-model="flexContainerForm[key]"
|
||||||
>
|
>
|
||||||
<a-radio
|
<a-tooltip
|
||||||
v-for="(value, keys) in item.list"
|
v-for="(value, keys) in item.list"
|
||||||
:value="value"
|
|
||||||
:key="keys"
|
:key="keys"
|
||||||
|
:content="item.tooltip[keys]"
|
||||||
|
background-color="#00bd7e"
|
||||||
|
:mini="true"
|
||||||
>
|
>
|
||||||
|
<a-radio :value="value">
|
||||||
{{ value }}
|
{{ value }}
|
||||||
</a-radio>
|
</a-radio>
|
||||||
|
</a-tooltip>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
@@ -339,7 +366,7 @@ setInterval(() => {
|
|||||||
:key="index"
|
:key="index"
|
||||||
:style="flexItemFormStyle[indexKey]"
|
:style="flexItemFormStyle[indexKey]"
|
||||||
>
|
>
|
||||||
<a-card :title="(index + 1).toString()" :bordered="false">
|
<a-card :title="(index + 1).toString() +`】`" :bordered="false">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<a-button
|
<a-button
|
||||||
type="text"
|
type="text"
|
||||||
@@ -351,7 +378,7 @@ setInterval(() => {
|
|||||||
</template>
|
</template>
|
||||||
<a-list>
|
<a-list>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-tooltip content="order">
|
<a-tooltip content="order：排列顺序，数值越小，排列越靠前" :mini="true">
|
||||||
<a-input-number
|
<a-input-number
|
||||||
v-model="flexItemForm[indexKey].order"
|
v-model="flexItemForm[indexKey].order"
|
||||||
:min="0"
|
:min="0"
|
||||||
@@ -360,7 +387,7 @@ setInterval(() => {
|
|||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-tooltip content="flex-grow">
|
<a-tooltip content="flex-grow：项目的放大比例" :mini="true">
|
||||||
<a-input-number
|
<a-input-number
|
||||||
v-model="flexItemForm[indexKey]['flex-grow']"
|
v-model="flexItemForm[indexKey]['flex-grow']"
|
||||||
:min="0"
|
:min="0"
|
||||||
@@ -369,7 +396,7 @@ setInterval(() => {
|
|||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-tooltip content="flex-shrink">
|
<a-tooltip content="flex-shrink：项目的缩小比例" :mini="true">
|
||||||
<a-input-number
|
<a-input-number
|
||||||
v-model="flexItemForm[indexKey]['flex-shrink']"
|
v-model="flexItemForm[indexKey]['flex-shrink']"
|
||||||
:min="1"
|
:min="1"
|
||||||
@@ -379,7 +406,9 @@ setInterval(() => {
|
|||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-tooltip content="flex-basis">
|
<a-tooltip
|
||||||
|
content="flex-basis：计算主轴是否有多余空间，设为跟width或height属性一样的值，将占据固定空间"
|
||||||
|
:mini="true">
|
||||||
<a-input
|
<a-input
|
||||||
v-model="flexItemForm[indexKey]['flex-basis']"
|
v-model="flexItemForm[indexKey]['flex-basis']"
|
||||||
allow-clear
|
allow-clear
|
||||||
@@ -387,16 +416,21 @@ setInterval(() => {
|
|||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-tooltip content="align-self">
|
<a-tooltip content="align-self：单个项目有与其他项目不一样的对齐方式，覆盖align-items属性"
|
||||||
|
:mini="true">
|
||||||
<a-select
|
<a-select
|
||||||
v-model="flexItemForm[indexKey]['align-self']"
|
v-model="flexItemForm[indexKey]['align-self']"
|
||||||
>
|
>
|
||||||
<a-option
|
<a-tooltip
|
||||||
v-for="ikeys in itemAlignSelf"
|
v-for="(ivalue,ikeys) in itemAlignSelf"
|
||||||
:key="ikeys"
|
:key="ikeys"
|
||||||
>
|
:content="itemAlignSelfTooltip[ikeys]"
|
||||||
{{ ikeys }}
|
:mini="true"
|
||||||
|
background-color="#00bd7e">
|
||||||
|
<a-option>
|
||||||
|
{{ ivalue }}
|
||||||
</a-option>
|
</a-option>
|
||||||
|
</a-tooltip>
|
||||||
</a-select>
|
</a-select>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
|
|||||||
Reference in New Issue
Block a user