Skip to content

Commit bdbb188

Browse files
kagolkagol
authored
docs: fix the problem of missing container component style (#453)
* docs(container): fix container composition demos fix #425 (#441) * docs: remove :::warning
1 parent f4c5973 commit bdbb188

9 files changed

+259
-16
lines changed

‎examples/sites/demos/app/container/basic-usage-composition-api.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,38 @@
1515
<script setup lang="jsx">
1616
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
1717
</script>
18+
19+
20+
<style>
21+
.demo-container .tiny-container {
22+
height: 200px;
23+
color: #5f6774;
24+
text-align: center;
25+
font-size: 18px;
26+
position: relative;
27+
}
28+
29+
.demo-container .tiny-container .tiny-container__header {
30+
background-color: #ecf8ff;
31+
border: 3px solid #ffffff;
32+
color: #5b90af;
33+
}
34+
35+
.demo-container .tiny-container .tiny-container__aside {
36+
background-color: #ffecec;
37+
border: 3px solid #ffffff;
38+
color: #d27070;
39+
}
40+
41+
.demo-container .tiny-container .tiny-container__main {
42+
background-color: #fffdec;
43+
border: 3px solid #ffffff;
44+
color: #b1a859;
45+
}
46+
47+
.demo-container .tiny-container .tiny-container__footer {
48+
background-color: #e8ffed;
49+
border: 3px solid #ffffff;
50+
color: #84a18a;
51+
}
52+
</style>

‎examples/sites/demos/app/container/classic-composition-api.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,45 @@ import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
2121
2222
const pattern = ref('classic')
2323
</script>
24+
25+
26+
27+
<style>
28+
.demo-container .tiny-container {
29+
height: 200px;
30+
color: #5f6774;
31+
text-align: center;
32+
font-size: 18px;
33+
position: relative;
34+
}
35+
36+
.demo-container .tiny-container .tiny-container__header {
37+
background-color: #ecf8ff;
38+
border: 3px solid #ffffff;
39+
color: #5b90af;
40+
}
41+
42+
.demo-container .tiny-container .tiny-container__aside {
43+
background-color: #fff0f0;
44+
border: 3px solid #ffffff;
45+
color: #d27070;
46+
}
47+
48+
.demo-container .tiny-container .tiny-container__main {
49+
background-color: #fffdec;
50+
border: 3px solid #ffffff;
51+
color: #b1a859;
52+
}
53+
54+
.demo-container .tiny-container .tiny-container__footer {
55+
background-color: #e8ffed;
56+
border: 3px solid #ffffff;
57+
color: #84a18a;
58+
}
59+
60+
.demo-container .tiny-container .main .changePattern .tiny-radio {
61+
color: #a3a355;
62+
font-size: 16px;
63+
margin: 0 7px;
64+
}
65+
</style>

‎examples/sites/demos/app/container/custom-container-composition-api.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,43 @@ const patternData = ref([
5151
}
5252
])
5353
</script>
54+
55+
<style>
56+
.demo-container .tiny-container {
57+
height: 200px;
58+
color: #5f6774;
59+
text-align: center;
60+
font-size: 18px;
61+
position: relative;
62+
}
63+
64+
.demo-container .tiny-container .tiny-container__header {
65+
background-color: #ecf8ff;
66+
border: 3px solid #ffffff;
67+
color: #5b90af;
68+
}
69+
70+
.demo-container .tiny-container .tiny-container__aside {
71+
background-color: #fff0f0;
72+
border: 3px solid #ffffff;
73+
color: #d27070;
74+
}
75+
76+
.demo-container .tiny-container .tiny-container__main {
77+
background-color: #fffdec;
78+
border: 3px solid #ffffff;
79+
color: #b1a859;
80+
}
81+
82+
.demo-container .tiny-container .tiny-container__footer {
83+
background-color: #e8ffed;
84+
border: 3px solid #ffffff;
85+
color: #84a18a;
86+
}
87+
88+
.demo-container .tiny-container .main .changePattern .tiny-radio {
89+
color: #a3a355;
90+
font-size: 16px;
91+
margin: 0 7px;
92+
}
93+
</style>

‎examples/sites/demos/app/container/custom-with-height-composition-api.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,43 @@ const asideWidth = ref(200)
2929
const footerHeight = ref(80)
3030
const headerHeight = ref(80)
3131
</script>
32+
33+
<style>
34+
.demo-container .tiny-container {
35+
height: 200px;
36+
color: #5f6774;
37+
text-align: center;
38+
font-size: 18px;
39+
position: relative;
40+
}
41+
42+
.demo-container .tiny-container .tiny-container__header {
43+
background-color: #ecf8ff;
44+
border: 3px solid #ffffff;
45+
color: #5b90af;
46+
}
47+
48+
.demo-container .tiny-container .tiny-container__aside {
49+
background-color: #fff0f0;
50+
border: 3px solid #ffffff;
51+
color: #d27070;
52+
}
53+
54+
.demo-container .tiny-container .tiny-container__main {
55+
background-color: #fffdec;
56+
border: 3px solid #ffffff;
57+
color: #b1a859;
58+
}
59+
60+
.demo-container .tiny-container .tiny-container__footer {
61+
background-color: #e8ffed;
62+
border: 3px solid #ffffff;
63+
color: #84a18a;
64+
}
65+
66+
.demo-container .tiny-container .main .changePattern .tiny-radio {
67+
color: #a3a355;
68+
font-size: 16px;
69+
margin: 0 7px;
70+
}
71+
</style>

‎examples/sites/demos/app/container/fashion-composition-api.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,37 @@
1515
<script setup lang="jsx">
1616
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
1717
</script>
18+
19+
<style>
20+
.demo-container .tiny-container {
21+
height: 200px;
22+
color: #5f6774;
23+
text-align: center;
24+
font-size: 18px;
25+
position: relative;
26+
}
27+
28+
.demo-container .tiny-container .tiny-container__header {
29+
background-color: #ecf8ff;
30+
border: 3px solid #ffffff;
31+
color: #5b90af;
32+
}
33+
34+
.demo-container .tiny-container .tiny-container__aside {
35+
background-color: #ffecec;
36+
border: 3px solid #ffffff;
37+
color: #d27070;
38+
}
39+
40+
.demo-container .tiny-container .tiny-container__main {
41+
background-color: #fffdec;
42+
border: 3px solid #ffffff;
43+
color: #b1a859;
44+
}
45+
46+
.demo-container .tiny-container .tiny-container__footer {
47+
background-color: #e8ffed;
48+
border: 3px solid #ffffff;
49+
color: #84a18a;
50+
}
51+
</style>

‎examples/sites/demos/app/container/legend-composition-api.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,37 @@
1818
<script setup lang="jsx">
1919
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
2020
</script>
21+
22+
<style>
23+
.demo-container .tiny-container {
24+
height: 200px;
25+
color: #5f6774;
26+
text-align: center;
27+
font-size: 18px;
28+
position: relative;
29+
}
30+
31+
.demo-container .tiny-container .tiny-container__header {
32+
background-color: #ecf8ff;
33+
border: 3px solid #ffffff;
34+
color: #5b90af;
35+
}
36+
37+
.demo-container .tiny-container .tiny-container__aside {
38+
background-color: #ffecec;
39+
border: 3px solid #ffffff;
40+
color: #d27070;
41+
}
42+
43+
.demo-container .tiny-container .tiny-container__main {
44+
background-color: #fffdec;
45+
border: 3px solid #ffffff;
46+
color: #b1a859;
47+
}
48+
49+
.demo-container .tiny-container .tiny-container__footer {
50+
background-color: #e8ffed;
51+
border: 3px solid #ffffff;
52+
color: #84a18a;
53+
}
54+
</style>

‎examples/sites/demos/app/container/simple-composition-api.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,37 @@
1212
<script setup lang="jsx">
1313
import { Container as TinyContainer, Layout as TinyLayout } from '@opentiny/vue'
1414
</script>
15+
16+
<style>
17+
.demo-container .tiny-container {
18+
height: 200px;
19+
color: #5f6774;
20+
text-align: center;
21+
font-size: 18px;
22+
position: relative;
23+
}
24+
25+
.demo-container .tiny-container .tiny-container__header {
26+
background-color: #ecf8ff;
27+
border: 3px solid #ffffff;
28+
color: #5b90af;
29+
}
30+
31+
.demo-container .tiny-container .tiny-container__aside {
32+
background-color: #ffecec;
33+
border: 3px solid #ffffff;
34+
color: #d27070;
35+
}
36+
37+
.demo-container .tiny-container .tiny-container__main {
38+
background-color: #fffdec;
39+
border: 3px solid #ffffff;
40+
color: #b1a859;
41+
}
42+
43+
.demo-container .tiny-container .tiny-container__footer {
44+
background-color: #e8ffed;
45+
border: 3px solid #ffffff;
46+
color: #84a18a;
47+
}
48+
</style>

‎examples/sites/demos/webdoc/envpreparation-open-en.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22

33
TinyVue is a`Vue`UI component library, which can also support`Vue 2.0`and`Vue 3.0`.
44

5-
:::warning
6-
75
Browser compatibility`TinyVue`The latest versions of mainstream browsers are supported: Chrome, Edge, Firefox, Opera, and Safari. No longer supported`Internet Explorer`.
86

9-
:::
10-
117
### Installing Node.js
128

139
Recommended Installation`v16.13.0`version, if the local`Node.js`, run the following command to check whether the version is correct:
@@ -24,8 +20,4 @@ management`npm`There are two main tools for the package. One is the installation
2420
npm install -g yarn
2521
```
2622

27-
:::warning
28-
2923
Selection of Package Manager`yarn`and`npm`You are advised to use only one package manager to avoid problems such as upgrade failure during installation.
30-
31-
:::

‎examples/sites/demos/webdoc/envpreparation-open.md

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22

33
TinyVue 是一个基于 `Vue` 的 UI 组件库，可以同时支持 `Vue 2.0` 和 `Vue 3.0`。
44

5-
:::warning
6-
75
浏览器兼容性 `TinyVue` 支持主流浏览器的最新版本：Chrome、Edge、Firefox、Opera、Safari 不支持 IE 浏览器
86

9-
:::
10-
117
### 安装 Node.js
128

139
推荐安装 `v16.13.0` 及以上版本，如果本地已经安装了 `Node.js`，可以通过以下命令检查版本是否正确：
@@ -24,8 +20,4 @@ node -v
2420
npm install -g yarn
2521
```
2622

27-
:::warning
28-
2923
包管理器的选择 `yarn` 和 `npm` 建议只选择使用一种包管理器，以免在安装过程中出现无法升级依赖包等问题。
30-
31-
:::

0 commit comments

Comments
 (0)