From a11c4bcc3d1cda95b966710d8b3c563ebbdfa061 Mon Sep 17 00:00:00 2001 From: Emmanuel Salomon Date: Wed, 18 Jan 2023 02:58:18 +0100 Subject: [PATCH] docs: minor fixes & badge docs updates (#120) Co-authored-by: JD Solanki <47495003+jd-solanki@users.noreply.github.com> --- docs/components/demos/card/DemoCardVariants.vue | 4 +--- docs/guide/components/alert.md | 4 ++-- docs/guide/components/avatar.md | 10 +++++----- docs/guide/components/badge.md | 14 +++++++------- docs/guide/components/rating.md | 6 +++--- docs/guide/components/switch.md | 12 ++++++------ 6 files changed, 24 insertions(+), 26 deletions(-) diff --git a/docs/components/demos/card/DemoCardVariants.vue b/docs/components/demos/card/DemoCardVariants.vue index 866fc2eb..9ce6248f 100644 --- a/docs/components/demos/card/DemoCardVariants.vue +++ b/docs/components/demos/card/DemoCardVariants.vue @@ -17,9 +17,7 @@ variant="light" color="primary" class="shadow-none" - > -

Awesome

- + /> -import api from '@anu/component-meta/AAlert.json'; +import api from '@anu/component-meta/AAlert.json' # Alert @@ -42,7 +42,7 @@ You can use `variant="outline"` to create outlined alert. ::::card Icons -You can use `icon` prop to render icon in button. +You can use `icon` prop to render icon in alert. Use `append-icon` prop to render icon after default slot. diff --git a/docs/guide/components/avatar.md b/docs/guide/components/avatar.md index bfeb1ad1..bf720a19 100644 --- a/docs/guide/components/avatar.md +++ b/docs/guide/components/avatar.md @@ -1,5 +1,5 @@ # Avatar @@ -20,7 +20,7 @@ Use `color` prop to change the avatar color. ::::card Fill -You can use `variant="fill"` to create avatar with filled background +You can use `variant="fill"` to create avatar with filled background. :::code DemoAvatarFill <<< @/components/demos/avatar/DemoAvatarFill.vue{4,9,15} @@ -30,7 +30,7 @@ You can use `variant="fill"` to create avatar with filled background ::::card Outlined -You can use variant="outline" to create outlined avatar +You can use `variant="outline"` to create outlined avatar. :::code DemoAvatarOutlined <<< @/components/demos/avatar/DemoAvatarOutlined.vue{4,9,15} @@ -41,7 +41,7 @@ You can use variant="outline" to create outlined avatar ::::card Sizing -You can use font-size utility to adjust the size of avatar +You can use font-size utility to adjust the size of avatar. :::code DemoAvatarSizing <<< @/components/demos/avatar/DemoAvatarSizing.vue{5,9,13,17,21} @@ -52,7 +52,7 @@ You can use font-size utility to adjust the size of avatar ::::card Roundness -You can adjust avatar roundness using border-radius utilities +You can adjust avatar roundness using border-radius utilities. :::code DemoAvatarRoundness <<< @/components/demos/avatar/DemoAvatarRoundness.vue{5,9,13,17,21} diff --git a/docs/guide/components/badge.md b/docs/guide/components/badge.md index 2378454e..5590d0ef 100644 --- a/docs/guide/components/badge.md +++ b/docs/guide/components/badge.md @@ -1,5 +1,5 @@ # Badge @@ -7,7 +7,7 @@ import api from '@anu/component-meta/ABadge.json'; ::::card Default -Default variant for badge is `standard` +Default color for badge is `primary`. :::code DemoBadgeDefault <<< @/components/demos/badge/DemoBadgeDefault.vue @@ -18,7 +18,7 @@ Default variant for badge is `standard` ::::card Content -Use the prop `content` to pass numeric values, if you want to use other data different than a number, use the slot `content` instead +Use the prop `content` to pass numeric values, if you want to use other data different than a number use the slot `content` instead. :::code DemoBadgeContent <<< @/components/demos/badge/DemoBadgeContent.vue{3,8} @@ -29,7 +29,7 @@ Use the prop `content` to pass numeric values, if you want to use other data dif ::::card v-model support -You can use v-model to control hiding/showing the badge +You can use v-model to control hiding/showing the badge. :::code DemoBadgeVModel <<< @/components/demos/badge/DemoBadgeVModel.vue{4,9} @@ -51,7 +51,7 @@ You can use the `color` prop to change the badge color. ::::card Dot -Use the prop `variant` to transform the badge into a `dot` +Use the prop `dot` to transform the badge into a dot. :::code DemoBadgeDot <<< @/components/demos/badge/DemoBadgeDot.vue{3} @@ -62,7 +62,7 @@ Use the prop `variant` to transform the badge into a `dot` ::::card Anchor origin -Change the position of the badge by passing `horizontal` and `vertical` values to the `anchor` prop. +Change the position of the badge by passing `top/bottom` and `left/right` values to the `anchor` prop. :::code DemoBadgeAnchor <<< @/components/demos/badge/DemoBadgeAnchor.vue{5,11,17,23} @@ -73,7 +73,7 @@ Change the position of the badge by passing `horizontal` and `vertical` values t ::::card Max -Change the `max` prop to cap the numeric value of the content +Change the `max` prop to cap the numeric value of the content. :::code DemoBadgeMax <<< @/components/demos/badge/DemoBadgeMax.vue{5,11,17} diff --git a/docs/guide/components/rating.md b/docs/guide/components/rating.md index c4d94d64..842ad24d 100644 --- a/docs/guide/components/rating.md +++ b/docs/guide/components/rating.md @@ -1,5 +1,5 @@ # Rating @@ -7,7 +7,7 @@ import api from '@anu/component-meta/ARating.json'; ::::card Basic -Rating component allows users to rate content +Rating component allows users to rate content. :::code DemoRatingBasic <<< @/components/demos/rating/DemoRatingBasic.vue{4,8} @@ -18,7 +18,7 @@ Rating component allows users to rate content ::::card Colors -You can use `color` prop to change the rating color +You can use `color` prop to change the rating color. :::code DemoRatingColor <<< @/components/demos/rating/DemoRatingColor.vue{10} diff --git a/docs/guide/components/switch.md b/docs/guide/components/switch.md index e1a5c83c..2e858262 100644 --- a/docs/guide/components/switch.md +++ b/docs/guide/components/switch.md @@ -1,5 +1,5 @@ # Switch @@ -18,7 +18,7 @@ Use `ASwitch` component to create toggle for boolean value. ::::card Colors -You can use `color` prop to change the switch color +You can use `color` prop to change the switch color. :::code DemoSwitchColors <<< @/components/demos/switch/DemoSwitchColors.vue{15,19,23,27,31} @@ -42,7 +42,7 @@ Label and switch have `justify-between` added as this is how generally used but :::: :::tip -You can also use default slot to render the label +You can also use default slot to render the label. ::: @@ -59,7 +59,7 @@ Use `on-icon` & `off-icon` prop to render icons inside switch dot. ::::card Sizing -You can use font-size utility to adjust the size of switch +You can use font-size utility to adjust the size of switch. :::code DemoSwitchSizing <<< @/components/demos/switch/DemoSwitchSizing.vue{16,20,25,29,33} @@ -70,7 +70,7 @@ You can use font-size utility to adjust the size of switch ::::card States -You can use `disabled` prop to disable the switch +You can use `disabled` prop to disable the switch. :::code DemoSwitchStates <<< @/components/demos/switch/DemoSwitchStates.vue{23,28} @@ -81,7 +81,7 @@ You can use `disabled` prop to disable the switch ::::card Roundness -You can adjust switch roundness using border-radius utilities +You can adjust switch roundness using border-radius utilities. :::code DemoSwitchRoundness <<< @/components/demos/switch/DemoSwitchRoundness.vue{12,16}