forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(web-components) remove design system provider from examples (microso…
…ft#18229) * remove fluent design system provider from examples * Change files
- Loading branch information
1 parent
ddc4147
commit 259f6e8
Showing
37 changed files
with
2,574 additions
and
2,730 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@fluentui-web-components-e3adc2bc-2ad2-40de-932c-5359ca339da6.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"type": "none", | ||
"comment": "remove fluent design system provider from examples", | ||
"packageName": "@fluentui/web-components", | ||
"email": "[email protected]", | ||
"dependentChangeType": "none" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
164 changes: 81 additions & 83 deletions
164
packages/web-components/src/accordion/fixtures/base.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,83 +1,81 @@ | ||
<fluent-design-system-provider use-defaults> | ||
<style> | ||
fluent-accordion-item.disabled::part(button) { | ||
pointer-events: none; | ||
} | ||
</style> | ||
<h1>Accordion</h1> | ||
<h4>Default</h4> | ||
<fluent-accordion> | ||
<fluent-accordion-item expanded> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel one</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item> | ||
<span slot="heading">Panel two</span> | ||
Panel two content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item expanded> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> | ||
<h4>Single expand</h4> | ||
<fluent-accordion expand-mode="single"> | ||
<fluent-accordion-item> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel one</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item class="disabled"> | ||
<span slot="heading">Panel Two</span> | ||
Panel two content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> | ||
<h4>With disabled item</h4> | ||
<fluent-accordion> | ||
<fluent-accordion-item> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel two</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item class="disabled"> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Disabled</span> | ||
Disabled content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item expanded> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> | ||
</fluent-design-system-provider> | ||
<style> | ||
fluent-accordion-item.disabled::part(button) { | ||
pointer-events: none; | ||
} | ||
</style> | ||
<h1>Accordion</h1> | ||
<h4>Default</h4> | ||
<fluent-accordion> | ||
<fluent-accordion-item expanded> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel one</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item> | ||
<span slot="heading">Panel two</span> | ||
Panel two content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item expanded> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> | ||
<h4>Single expand</h4> | ||
<fluent-accordion expand-mode="single"> | ||
<fluent-accordion-item> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel one</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item class="disabled"> | ||
<span slot="heading">Panel Two</span> | ||
Panel two content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> | ||
<h4>With disabled item</h4> | ||
<fluent-accordion> | ||
<fluent-accordion-item> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel two</span> | ||
Panel one content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item class="disabled"> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Disabled</span> | ||
Disabled content | ||
</fluent-accordion-item> | ||
<fluent-accordion-item expanded> | ||
<div slot="start"> | ||
<button>1</button> | ||
</div> | ||
<div slot="end"> | ||
<button>1</button> | ||
</div> | ||
<span slot="heading">Panel three</span> | ||
Panel three content | ||
</fluent-accordion-item> | ||
</fluent-accordion> |
108 changes: 53 additions & 55 deletions
108
packages/web-components/src/anchor/fixtures/anchor.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,67 +1,65 @@ | ||
<fluent-design-system-provider use-defaults> | ||
<h1>Anchor</h1> | ||
<h1>Anchor</h1> | ||
|
||
<h4>Default</h4> | ||
<fluent-anchor href="#">Anchor</fluent-anchor> | ||
<h4>Default</h4> | ||
<fluent-anchor href="#">Anchor</fluent-anchor> | ||
|
||
<h5>With target</h5> | ||
<fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor> | ||
<h5>With target</h5> | ||
<fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor> | ||
|
||
<h4>Neutral</h4> | ||
<fluent-anchor href="#" appearance="neutral">Button</fluent-anchor> | ||
<h4>Neutral</h4> | ||
<fluent-anchor href="#" appearance="neutral">Button</fluent-anchor> | ||
|
||
<h4>Accent</h4> | ||
<fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor> | ||
<h4>Accent</h4> | ||
<fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor> | ||
|
||
<h4>Hypertext</h4> | ||
<fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor> | ||
<br /> | ||
<fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate, | ||
corrupti | ||
<fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor> | ||
dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci. | ||
</p> | ||
<h4>Hypertext</h4> | ||
<fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor> | ||
<br /> | ||
<fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor> | ||
<p> | ||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate, | ||
corrupti | ||
<fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor> | ||
dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci. | ||
</p> | ||
|
||
<h4>Lightweight</h4> | ||
<fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor> | ||
<h4>Lightweight</h4> | ||
<fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor> | ||
|
||
<h4>Outline</h4> | ||
<fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor> | ||
<h4>Outline</h4> | ||
<fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor> | ||
|
||
<h4>Stealth</h4> | ||
<fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor> | ||
<h4>Stealth</h4> | ||
<fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor> | ||
|
||
<h4>With start</h4> | ||
<fluent-anchor href="#"> | ||
Anchor | ||
<svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
<h4>With start</h4> | ||
<fluent-anchor href="#"> | ||
Anchor | ||
<svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
|
||
<h4>With end</h4> | ||
<fluent-anchor href="#"> | ||
Anchor | ||
<svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
<h4>With end</h4> | ||
<fluent-anchor href="#"> | ||
Anchor | ||
<svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
|
||
<h4>Icon in default slot</h4> | ||
<fluent-anchor href="#"> | ||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
<h4>Icon in default slot</h4> | ||
<fluent-anchor href="#"> | ||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> | ||
<path | ||
d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z" | ||
/> | ||
</svg> | ||
</fluent-anchor> | ||
|
||
<h4>With aria-label</h4> | ||
<fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor> | ||
</fluent-design-system-provider> | ||
<h4>With aria-label</h4> | ||
<fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.