菜单
Best practices for Canopy list-with-icons usage. Trigger when using lg-list-with-icons, lg-list-with-icons-item, ordered list markers, or list item variant theming in Angular.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Apply the Canopy v36→v37 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v37, upgrade @legal-and-general/canopy from v36, or fix errors after upgrading to v37.
Apply the Canopy v35→v36 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v36, upgrade @legal-and-general/canopy from v35, or fix errors after upgrading to v36.
Best practices for the Canopy Header component. Trigger when adding a site header, primary navigation, account menu, notification badge, or logo in an Angular project using Canopy.
Best practices for the Canopy Pictogram component. Trigger when using lg-pictogram, LgPictogramComponent, or adding illustrative pictograms in an Angular project using Canopy.
Apply the Canopy v34→v35 breaking changes to an Angular project. Trigger when the user asks to migrate to Canopy v35, upgrade @legal-and-general/canopy from v34, or fix errors after upgrading to v35.
Best practices for the Canopy Button component. Trigger when adding buttons, form submissions, navigation actions, icon buttons, loading states, button groups, or toggle buttons in an Angular project using Canopy.
| name | canopy-list |
| description | Best practices for Canopy list-with-icons usage. Trigger when using lg-list-with-icons, lg-list-with-icons-item, ordered list markers, or list item variant theming in Angular. |
| license | MIT |
| metadata | {"source":"https://github.com/Legal-and-General/canopy/tree/master/projects/canopy/src/lib/list/docs/guide.mdx"} |
Use this skill whenever you build list UI with LgListWithIconsComponent and
LgListWithIconsItemComponent from @legal-and-general/canopy.
import {
LgListWithIconsComponent,
LgListWithIconsItemComponent,
} from '@legal-and-general/canopy';
Add both to a standalone component imports array.
Apply the directives to native list elements:
<ul lg-list-with-icons>
<li lg-list-with-icons-item iconName="checkmark" variant="mono">List item 1</li>
<li lg-list-with-icons-item iconName="checkmark-spot-filled" variant="mono">
List item 2
</li>
</ul>
Use an ol with lg-list-with-icons for ordered lists. Items are numbered automatically via CSS counters:
<ol lg-list-with-icons>
<li lg-list-with-icons-item iconName="checkmark" variant="mono">Step 1</li>
<li lg-list-with-icons-item iconName="checkmark" variant="mono">Step 2</li>
<li lg-list-with-icons-item iconName="checkmark" variant="mono">Step 3</li>
</ol>
Markers are shown as 1., 2., 3. etc. in DOM order, with colour controlled by variant.
Set marker colour per item with variant:
monopositivenegativevariant is item-level and can differ between parent and child items.
variant set on an item controls marker colour.
<ul lg-list-with-icons>
<li lg-list-with-icons-item iconName="checkmark" variant="positive">Included</li>
<li lg-list-with-icons-item iconName="cross" variant="negative">Not included</li>
</ul>
Prefer the icon names currently used in stories for consistent list semantics:
checkmarkcheckmark-spot-filledbullet-pointbullet-squarebullet-featurebullet-dashbullet-circleprogress-to-docrosscrossmark-spot-filled| Input | Type | Default | Description |
|---|---|---|---|
size | 'default' | 'large' | 'default' | Controls list typography and marker sizing. |
| Input | Type | Default | Description |
|---|---|---|---|
iconName | IconName | — | Icon shown for unordered items. Keep this set for consistency across templates. |
variant | 'mono' | 'positive' | 'negative' | 'mono' | Item-level marker theme (controls both icon and ordered list number colour). |
lg-list-with-icons to ul or ol, and lg-list-with-icons-item to each li.variant on each item for mixed positive/negative/neutral lists.ol for naturally ordered sequences; use ul for unordered content.ul or ol expecting Canopy list marker styling.iconColour.