Skip to content

Commit 195b5dc

Browse files
akinocccakinoccc
committed
docs(readme): simplify docs
1 parent 63c7a68 commit 195b5dc

File tree

2 files changed

+28
-216
lines changed

2 files changed

+28
-216
lines changed

‎README.md‎

Lines changed: 14 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,13 @@
4848

4949
✅ Support nesting css. (web only: https://drafts.csswg.org/css-nesting/#nesting)
5050

51-
## 📦Install
51+
## 📖Documentation
52+
53+
For detailed introduction and usage instructions, please refer to [the documentation website](https://vue-styled-components.com)
54+
55+
## Getting Start
56+
57+
### 📦Install
5258

5359
```sh
5460
npm i @vvibe/vue-styled-components
@@ -62,9 +68,9 @@ yarn add @vvibe/vue-styled-components
6268
pnpm i @vvibe/vue-styled-components
6369
```
6470

65-
## 🔨Usage
71+
### 🔨Usage
6672

67-
### Styled component
73+
#### Basic
6874

6975
```vue
7076
<script setup lang="ts">
@@ -98,7 +104,7 @@ const StyledOtherComponent = styled(OtherComponent)`
98104
</template>
99105
```
100106

101-
### Attrs Setting
107+
#### Attrs Setting
102108

103109
```vue
104110
<script setup lang="ts">
@@ -120,7 +126,7 @@ const StyledDiv = styled.div.attrs({
120126
</template>
121127
```
122128

123-
### Control Dynamic Style by Props
129+
#### Control Dynamic Style by Props
124130

125131
You must define the props in the `styled` function if you want to use them in the style. Because Vue components
126132
require explicit props declaration so that Vue knows what external props passed to the component should be treated as
@@ -145,7 +151,7 @@ const StyledDiv = styled('div', {
145151
</template>
146152
```
147153

148-
### Theming
154+
#### Theming
149155

150156
```vue
151157
<script setup lang="ts">
@@ -166,133 +172,6 @@ const StyledDiv = styled.div`
166172
</template>
167173
```
168174

169-
### Generate Keyframes
170-
171-
You can use the `keyframes` function to define a keyframe animation and then use the return value from `keyframes` to
172-
apply it to a styled component.
173-
174-
```vue
175-
<script setup lang="ts">
176-
import { styled, keyframes } from '@vvibe/vue-styled-components';
177-
178-
const rotate = keyframes`
179-
from {
180-
transform: rotate(0deg);
181-
}
182-
to {
183-
transform: rotate(360deg);
184-
}
185-
`;
186-
const translate = keyframes`
187-
0 {
188-
transform: translateX(0);
189-
}
190-
50% {
191-
transform: translateX(250%);
192-
}
193-
60% {
194-
transform: rotate(360deg);
195-
}
196-
`;
197-
198-
const StyledBaseDiv = styled.div`
199-
display: inline-block;
200-
width: 100px;
201-
height: 100px;
202-
`;
203-
204-
const StyledRotateDiv = styled(StyledBaseDiv)`
205-
background-color: skyblue;
206-
animation: ${rotate} 2s linear infinite;
207-
`;
208-
209-
const StyledTranslateDiv = styled(StyledBaseDiv)`
210-
margin-left: 10px;
211-
background-color: darkred;
212-
animation: ${translate} 2s ease infinite alternate;
213-
`;
214-
</script>
215-
216-
<template>
217-
<StyledRotateDiv />
218-
<StyledTranslateDiv />
219-
</template>
220-
```
221-
222-
### Create Global Style
223-
224-
A function to create a `style component` that can be used to handle global styles.
225-
226-
```vue
227-
<script setup>
228-
import { createGlobalStyle } from '@vvibe/vue-styled-components';
229-
230-
const GlobalStyle = createGlobalStyle`
231-
body {
232-
color: ${(props) => props.color};
233-
}
234-
`;
235-
</script>
236-
<template>
237-
<GlobalStyle color="white" />
238-
</template>
239-
```
240-
241-
### Generate CSS Mixin
242-
243-
A function to generate CSS from a template literal with interpolations.
244-
245-
```vue
246-
<script setup lang="ts">
247-
import { styled, css } from '@vvibe/vue-styled-components';
248-
249-
const mixin = css`
250-
color: red;
251-
background-color: blue;
252-
`;
253-
const DivWithStyles = styled('div')`
254-
${mixin}
255-
`;
256-
</script>
257-
258-
<template>
259-
<DivWithStyles>Div with mixin</DivWithStyles>
260-
</template>
261-
```
262-
263-
### Add or Override Attrs
264-
265-
A function to add attributes to a `ComponentInstance` or `HTMLElements`.
266-
267-
```vue
268-
<script setup lang="ts">
269-
import { withAttrs } from '@vvibe/vue-styled-components';
270-
271-
const DivWithAttrs = withAttrs('div', {
272-
class: 'div-with-attrs'
273-
});
274-
275-
const DivWithAttrs2 = withAttrs(DivWithAttrs, {
276-
class: 'div-with-attrs-2'
277-
});
278-
</script>
279-
280-
<template>
281-
<DivWithAttrs>Div with attrs</DivWithAttrs>
282-
<DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
283-
</template>
284-
285-
<style scope>
286-
.div-with-attrs {
287-
color: red;
288-
}
289-
290-
.div-with-attrs-2 {
291-
color: blue;
292-
}
293-
</style>
294-
```
295-
296175
**More details see [docs site](https://v-vibe.github.io/vue-styled-components/)**
297176

298177
## Contributors
@@ -301,4 +180,6 @@ const DivWithAttrs2 = withAttrs(DivWithAttrs, {
301180
<img alt="contributor list" src="https://contrib.rocks/image?repo=v-vibe/vue-styled-components" />
302181
</a>
303182

183+
<br>
184+
304185
And thanks [styled-components](https://github.com/styled-components).

‎README.zh_CN.md‎

Lines changed: 14 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@
2222
[discord]: https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true
2323
[discord-url]: https://discord.gg/UbJxnvt2UH
2424

25-
26-
2725
[Changelog](./CHANGELOG.md) · [English](./README.md) · 中文
2826
</div>
2927

@@ -47,7 +45,13 @@
4745

4846
✅ 支持 CSS 嵌套。（仅支持 web: https://drafts.csswg.org/css-nesting/#nesting）
4947

50-
## 📦安装
48+
## 文档
49+
50+
详细的介绍和使用方法，请参考[官方文档](https://vue-styled-components.com)
51+
52+
## 快速开始
53+
54+
### 📦安装
5155

5256
```sh
5357
npm i @vvibe/vue-styled-components
@@ -61,9 +65,9 @@ yarn add @vvibe/vue-styled-components
6165
pnpm i @vvibe/vue-styled-components
6266
```
6367

64-
## 🔨使用
68+
### 🔨用法
6569

66-
### 样式化组件
70+
#### 基本使用
6771

6872
```vue
6973
<script setup lang="ts">
@@ -97,7 +101,7 @@ const StyledOtherComponent = styled(OtherComponent)`
97101
</template>
98102
```
99103

100-
### Attributes 设置
104+
#### Attributes 设置
101105

102106
```vue
103107
<script setup lang="ts">
@@ -119,7 +123,7 @@ const StyledDiv = styled.div.attrs({
119123
</template>
120124
```
121125

122-
### 通过 Props 动态控制样式
126+
#### 通过 Props 动态控制样式
123127

124128
如果要在样式中传递 props，则必须在 styled 函数中定义这些属性。因为 Vue 组件需要显式声明 props，以便 Vue 知道应如何处理传递给组件的外部 props（请参阅 [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration)）
125129

@@ -142,7 +146,7 @@ const StyledDiv = styled('div', {
142146
</template>
143147
```
144148

145-
### 主题
149+
#### 主题
146150

147151
```vue
148152
<script setup lang="ts">
@@ -163,7 +167,7 @@ const StyledDiv = styled.div`
163167
</template>
164168
```
165169

166-
### 生成 keyframes
170+
#### 生成 keyframes
167171

168172
您可以使用 `keyframes` 函数来定义关键帧动画，然后使用 `keyframes` 的返回值将其应用于样式化组件。
169173

@@ -215,80 +219,6 @@ const StyledTranslateDiv = styled(StyledBaseDiv)`
215219
</template>
216220
```
217221

218-
### 生成全局样式
219-
220-
一个用于创建全局样式的函数。
221-
222-
```vue
223-
<script setup>
224-
import { createGlobalStyle } from '@vvibe/vue-styled-components';
225-
226-
const GlobalStyle = createGlobalStyle`
227-
body {
228-
color: ${(props) => props.color};
229-
}
230-
`;
231-
</script>
232-
<template>
233-
<GlobalStyle color="white" />
234-
</template>
235-
```
236-
237-
### 生成css
238-
239-
一个用于从带有插值的模板字符串生成 CSS 的函数。
240-
241-
```vue
242-
<script setup lang="ts">
243-
import { styled, css } from '@vvibe/vue-styled-components';
244-
245-
const mixin = css`
246-
color: red;
247-
background-color: blue;
248-
`;
249-
const DivWithStyles = styled('div')`
250-
${mixin}
251-
`;
252-
</script>
253-
254-
<template>
255-
<DivWithStyles>Div with mixin</DivWithStyles>
256-
</template>
257-
```
258-
259-
### 添加或覆盖 Attributes
260-
261-
一个向 `ComponentInstance` or `HTMLElements` 添加或覆盖 `Attributes` 的函数.
262-
263-
```vue
264-
<script setup lang="ts">
265-
import { withAttrs } from '@vvibe/vue-styled-components';
266-
267-
const DivWithAttrs = withAttrs('div', {
268-
class: 'div-with-attrs'
269-
});
270-
271-
const DivWithAttrs2 = withAttrs(DivWithAttrs, {
272-
class: 'div-with-attrs-2'
273-
});
274-
</script>
275-
276-
<template>
277-
<DivWithAttrs>Div with attrs</DivWithAttrs>
278-
<DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
279-
</template>
280-
281-
<style scope>
282-
.div-with-attrs {
283-
color: red;
284-
}
285-
286-
.div-with-attrs-2 {
287-
color: blue;
288-
}
289-
</style>
290-
```
291-
292222
**更多细节请查看 [官方文档](https://vue-styled-components.com)**
293223

294224
## 贡献者
@@ -297,5 +227,6 @@ const DivWithAttrs2 = withAttrs(DivWithAttrs, {
297227
<img alt="contributor list" src="https://contrib.rocks/image?repo=v-vibe/vue-styled-components" />
298228
</a>
299229

230+
<br>
300231

301232
另外，感谢 [styled-components](https://github.com/styled-components).

0 commit comments

Comments
 (0)