Skip to content

Commit 0969632

Browse files
committed
docs(readme): simplify usage
1 parent 6e5adf4 commit 0969632

File tree

2 files changed

+9
-65
lines changed

2 files changed

+9
-65
lines changed

README.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252

5353
For detailed introduction and usage instructions, please refer to [the documentation website](https://vue-styled-components.com)
5454

55-
## Getting Start
55+
## 🚀Getting Start
5656

5757
### 📦Install
5858

@@ -68,9 +68,7 @@ yarn add @vvibe/vue-styled-components
6868
pnpm i @vvibe/vue-styled-components
6969
```
7070

71-
### 🔨Usage
72-
73-
#### Basic
71+
### 💅Basic
7472

7573
```vue
7674
<script setup lang="ts">
@@ -104,7 +102,7 @@ const StyledOtherComponent = styled(OtherComponent)`
104102
</template>
105103
```
106104

107-
#### Attrs Setting
105+
### Attrs Setting
108106

109107
```vue
110108
<script setup lang="ts">
@@ -126,7 +124,7 @@ const StyledDiv = styled.div.attrs({
126124
</template>
127125
```
128126

129-
#### Control Dynamic Style by Props
127+
### 🕹️Control Dynamic Style by Props
130128

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

154-
#### Theming
152+
### 🧙Theming
155153

156154
```vue
157155
<script setup lang="ts">

README.zh_CN.md

Lines changed: 4 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,7 @@ yarn add @vvibe/vue-styled-components
6565
pnpm i @vvibe/vue-styled-components
6666
```
6767

68-
### 🔨用法
69-
70-
#### 基本使用
68+
### 💅基本使用
7169

7270
```vue
7371
<script setup lang="ts">
@@ -101,7 +99,7 @@ const StyledOtherComponent = styled(OtherComponent)`
10199
</template>
102100
```
103101

104-
#### Attributes 设置
102+
### 🔧Attributes 设置
105103

106104
```vue
107105
<script setup lang="ts">
@@ -123,7 +121,7 @@ const StyledDiv = styled.div.attrs({
123121
</template>
124122
```
125123

126-
#### 通过 Props 动态控制样式
124+
### 🕹️通过 Props 动态控制样式
127125

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

@@ -146,7 +144,7 @@ const StyledDiv = styled('div', {
146144
</template>
147145
```
148146

149-
#### 主题
147+
### 🧙主题
150148

151149
```vue
152150
<script setup lang="ts">
@@ -167,58 +165,6 @@ const StyledDiv = styled.div`
167165
</template>
168166
```
169167

170-
#### 生成 keyframes
171-
172-
您可以使用 `keyframes` 函数来定义关键帧动画,然后使用 `keyframes` 的返回值将其应用于样式化组件。
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-
222168
**更多细节请查看 [官方文档](https://vue-styled-components.com)**
223169

224170
## 贡献者

0 commit comments

Comments
 (0)