feat(text): support block

CyanSalt · Jul 31, 2023 · cbcbad5 · cbcbad5
1 parent 9fc2702
commit cbcbad5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/docs/components/text.md b/docs/components/text.md
@@ -102,10 +102,24 @@ import { RSpace, RText } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['size', 'tag', 'type']"
+  :rows="['block', 'size', 'tag', 'type']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
+  <template #body:block:type>
+
+  `boolean`
+
+  </template>
+  <template #body:block:default>
+
+  `false`
+
+  </template>
+  <template #body:block:description>
+    Whether the text is displayed as block.
+  </template>
+
   <template #body:size:type>
 
   `string`, but usually `'small' | 'large'`

diff --git a/src/text/index.vue b/src/text/index.vue
@@ -7,10 +7,12 @@ defineOptions({
 })
 
 const {
+  block = false,
   tag = 'span',
   type,
   size,
 } = defineProps<{
+  block?: boolean,
   tag?: string,
 } & ColorProps & SizeProps>()
 
@@ -20,7 +22,7 @@ defineSlots<{
 </script>
 
 <template>
-  <component :is="tag" :class="['r-text', type, size]">
+  <component :is="tag" :class="['r-text', type, size, { 'is-block': block }]">
     <slot></slot>
   </component>
 </template>
@@ -29,6 +31,9 @@ defineSlots<{
 .r-text {
   --r-text-color: var(--r-element-color);
   color: var(--r-text-color);
+  &.is-block {
+    display: block;
+  }
   &.primary {
     --r-text-color: var(--r-common-primary-color);
   }