docs(guide): added list customization tip

therealokoro · Jan 11, 2023 · b9a4e82 · b9a4e82
1 parent c3402f5
commit b9a4e82
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -84,6 +84,7 @@
     "cSpell.words": [
         "composables",
         "defu",
+        "endregion",
         "globby",
         "nuxt",
         "Vite",

diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -17,6 +17,21 @@ You can also use `default` slot to render your custom content if you don't want
 
 ::::
 
+:::tip Customization
+`AList` is highly customizable component. It uses CSS variables for its spacing so you can have full control over high it look. You can update this CSS variables via UnoCSS classes to change the appearance.
+
+```vue
+<template>
+  <AList class="[--a-list-gap:1rem]"></AList>
+</template>
+```
+
+Below is available CSS variable you can override:
+
+<<< @/../packages/preset-theme-default/src/scss/index.scss#a-list-css-vars
+
+:::
+
 <!-- 👉 Slots -->
 ::::card Slots
 

diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -54,11 +54,13 @@ $body-color: hsla(var(--a-base-color), 0.68);
 
     // 👉 List
     // ℹ️ We might not need `--a-list-gap` this if we are using just `AList`, however when we use list inside another component this will be helpful
+    // #region a-list-css-vars
     --a-list-gap: 0rem;
     --a-list-item-gap: 0.75rem;    
     --a-list-item-padding: 0.5rem 1rem;
     --a-list-item-margin: 0rem;
     --a-list-item-min-height: 2.5rem;
+    // #endregion a-list-css-vars
 
     // !SECTION
 }