From b9a4e82461064469979cd786ed0357ba8be4d68a Mon Sep 17 00:00:00 2001 From: JD Solanki Date: Wed, 11 Jan 2023 10:12:37 +0530 Subject: [PATCH] docs(guide): added list customization tip --- .vscode/settings.json | 1 + docs/guide/components/list.md | 15 +++++++++++++++ packages/preset-theme-default/src/scss/index.scss | 2 ++ 3 files changed, 18 insertions(+) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0d9a0276..6a6052c5 100644 --- 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 index c05c2ded..6025e757 100644 --- 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 + +``` + +Below is available CSS variable you can override: + +<<< @/../packages/preset-theme-default/src/scss/index.scss#a-list-css-vars + +::: + ::::card Slots diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss index f759438d..b9807f1f 100644 --- 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 }