diff --git a/review/feat-new-icons/404.html b/review/feat-new-icons/404.html index 60ea17bb19f..92ae2d7e156 100644 --- a/review/feat-new-icons/404.html +++ b/review/feat-new-icons/404.html @@ -1 +1 @@ -
(Default) Docked
\n \n(Default) Docked
\n \n(Default) Docked
\n \n(Default) Docked
\n \nStandalone
\n \nStandalone
\n \nStandalone
\n \nStandalone
\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \n(Default) Docked
\n \n(Default) Docked
\n \n(Default) Docked
\n \n(Default) Docked
\n \nStandalone
\n \nStandalone
\n \nStandalone
\n \nStandalone
\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \nOverlay
\n 10 min ago\n \n(Default) Permanent
\n(Default) Permanent
\n(Default) Permanent
\n(Default) Permanent
\nCloseable
\n \nCloseable
\n \nCloseable
\n \nCloseable
\n \n(Default) Adaptive
\n \n(Default) Adaptive
\n \n(Default) Adaptive
\n \n(Default) Adaptive
\n \nNeutral
\n \nNeutral
\n \nNeutral
\n \nNeutral
\n \nCritical
\n \nCritical
\n \nCritical
\n \nCritical
\n \nInformational
\n \nInformational
\n \nInformational
\n \nInformational
\n \nSuccessful
\n \nSuccessful
\n \nSuccessful
\n \nSuccessful
\n \nWarning
\n \nWarning
\n \nWarning
\n \nWarning
\n \nfunctional
\n \nfunctional
\n \nfunctional
\n \nfunctional
\n \nregular (Default)
\n \nregular (Default)
\n \nregular (Default)
\n \nregular (Default)
\n \nexpressive
\n \nexpressive
\n \nexpressive
\n \nexpressive
\n \n<db-accordion-item title="Collapsed (Default)">
- Collapsed (Default)
-</db-accordion-item>
undefined
<DBAccordionItem title="Collapsed (Default)">
- Collapsed (Default)
-</DBAccordionItem>
<DBAccordionItem title="Collapsed (Default)">
- Collapsed (Default)
-</DBAccordionItem>
<db-accordion-item title="Open" [open]="true">Open</db-accordion-item>
undefined
<DBAccordionItem title="Open" open>
+DB UI Mono
<db-accordion-item headlinePlain="(Default) Collapsed">
+ (Default) Collapsed
+</db-accordion-item>
undefined
<DBAccordionItem headlinePlain="(Default) Collapsed">
+ (Default) Collapsed
+</DBAccordionItem>
<DBAccordionItem headlinePlain="(Default) Collapsed">
+ (Default) Collapsed
+</DBAccordionItem>
<db-accordion-item headlinePlain="Open" [open]="true">Open</db-accordion-item>
undefined
<DBAccordionItem headlinePlain="Open" open>
Open
-</DBAccordionItem>
<DBAccordionItem title="Open" :open="true">Open</DBAccordionItem>
\ No newline at end of file
+</DBAccordionItem>
<DBAccordionItem headlinePlain="Open" :open="true">Open</DBAccordionItem>
<db-accordion-item title="Functional">Functional</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
+DB UI Mono
<db-accordion-item headlinePlain="Functional">Functional</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
<summary>Functional</summary>
<div>Functional</div>
-</details>
<DBAccordionItem title="Functional">Functional</DBAccordionItem>
<DBAccordionItem title="Functional">Functional</DBAccordionItem>
<db-accordion-item title="Regular (Default)">
- Regular (Default)
+</details>
<DBAccordionItem headlinePlain="Functional">Functional</DBAccordionItem>
<DBAccordionItem headlinePlain="Functional">Functional</DBAccordionItem>
<db-accordion-item headlinePlain="(Default) Regular">
+ (Default) Regular
</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
- <summary>Regular (Default)</summary>
- <div>Regular (Default)</div>
-</details>
<DBAccordionItem title="Regular (Default)">Regular (Default)</DBAccordionItem>
<DBAccordionItem title="Regular (Default)">Regular (Default)</DBAccordionItem>
<db-accordion-item title="Expressive">Expressive</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
+ <summary>(Default) Regular</summary>
+ <div>(Default) Regular</div>
+</details>
<DBAccordionItem headlinePlain="(Default) Regular">
+ (Default) Regular
+</DBAccordionItem>
<DBAccordionItem headlinePlain="(Default) Regular">
+ (Default) Regular
+</DBAccordionItem>
<db-accordion-item headlinePlain="Expressive">Expressive</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
<summary>Expressive</summary>
<div>Expressive</div>
-</details>
<DBAccordionItem title="Expressive">Expressive</DBAccordionItem>
<DBAccordionItem title="Expressive">Expressive</DBAccordionItem>
\ No newline at end of file
+</details>
<DBAccordionItem headlinePlain="Expressive">Expressive</DBAccordionItem>
<DBAccordionItem headlinePlain="Expressive">Expressive</DBAccordionItem>
<db-accordion-item title="Enabled (Default)/Hover/Pressed">
+DB UI Mono
<db-accordion-item headlinePlain="Enabled (Default)/Hover/Pressed">
Enabled (Default)/Hover/Pressed
-</db-accordion-item>
undefined
<DBAccordionItem title="Enabled (Default)/Hover/Pressed">
+</db-accordion-item>
undefined
<DBAccordionItem headlinePlain="Enabled (Default)/Hover/Pressed">
Enabled (Default)/Hover/Pressed
-</DBAccordionItem>
<DBAccordionItem title="Enabled (Default)/Hover/Pressed">
+</DBAccordionItem>
<DBAccordionItem headlinePlain="Enabled (Default)/Hover/Pressed">
Enabled (Default)/Hover/Pressed
-</DBAccordionItem>
<db-accordion-item title="Disabled" [disabled]="true">Disabled</db-accordion-item>
undefined
<DBAccordionItem title="Disabled" disabled>
+</DBAccordionItem>
<db-accordion-item headlinePlain="Disabled" [disabled]="true">Disabled</db-accordion-item>
undefined
<DBAccordionItem headlinePlain="Disabled" disabled>
Disabled
-</DBAccordionItem>
<DBAccordionItem title="Disabled" :disabled="true">Disabled</DBAccordionItem>
\ No newline at end of file
+</DBAccordionItem>
<DBAccordionItem headlinePlain="Disabled" :disabled="true">Disabled</DBAccordionItem>
For general installation and configuration look at the ngx-components package.
// app.component.ts
@@ -15,11 +15,11 @@ Use componentWith Content Projectionwith-content-projection anchor link
<!-- app.component.html -->
<db-accordion-item>
- <ng-container *title>Title</ng-container>
+ <ng-container *headline>Title</ng-container>
Content
</db-accordion-item>
With attributeswith-attributes anchor link
<!-- app.component.html -->
-<db-accordion-item title="Title" content="Content"></db-accordion-item>
-
For general installation and configuration look at the components package.
<!-- index.html -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/accordion-item/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description cmp-accordion
🔁 db-accordion-item
The old accordion was just 1 item, we split it to combine multiple accordion-items into 1 accordion (which is another component) propsprops anchor link
-
Before Status After Description summary
🔁 title
The title/summary of the details element. emphasis
❌ ❌ There is no emphasis anymore. size
❌ ❌ Controlled by the density. 🆕 disabled
Disable the component. 🆕 content
Pass in a simple string as fallback to normal children/slot
Before | Status | After | Description |
---|---|---|---|
summary | 🔁 | headline | The title/summary of the details element. |
emphasis | ❌ | ❌ | There is no emphasis anymore. |
size | ❌ | ❌ | Controlled by the density. |
🆕 | disabled | Disable the component. | |
🆕 | content | Pass in a simple string as fallback to normal children/slot |
For general installation and configuration look at the react-components package.
// App.tsx
import { DBAccordionItem } from "@db-ui/react-components";
-const App = () => <DBAccordionItem slotTitle="Title">Content</DBAccordionItem>;
+const App = () => <DBAccordionItem headline="Title">Content</DBAccordionItem>;
export default App;
// App.tsx
import { DBAccordionItem } from "@db-ui/react-components";
-const App = () => <DBAccordionItem title="Title" content="Content" />;
+const App = () => <DBAccordionItem headline="Title" content="Content" />;
export default App;
-
For general installation and configuration look at the v-components package.
<db-accordion>
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+DB UI Mono
<db-accordion>
+ <db-accordion-item headline="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item headline="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item headline="Item 3" content="Content 3"></db-accordion-item>
</db-accordion>
The accordion is a pure JS Component
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
</DBAccordion>
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
-</DBAccordion>
<db-accordion behaviour="single">
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion behaviour="single">
+ <db-accordion-item headline="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item headline="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item headline="Item 3" content="Content 3"></db-accordion-item>
</db-accordion>
The accordion is a pure JS Component
<DBAccordion behaviour="single">
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
</DBAccordion>
<DBAccordion behaviour="single">
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
-</DBAccordion>
\ No newline at end of file
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion>
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+DB UI Mono
<db-accordion>
+ <db-accordion-item headline="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item headline="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item headline="Item 3" content="Content 3"></db-accordion-item>
</db-accordion>
The accordion is a pure JS Component
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
</DBAccordion>
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
-</DBAccordion>
<db-accordion>
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion>
+ <db-accordion-item headline="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item headline="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item headline="Item 3" content="Content 3"></db-accordion-item>
</db-accordion>
The accordion is a pure JS Component
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
</DBAccordion>
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
-</DBAccordion>
<db-accordion>
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion>
+ <db-accordion-item headline="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item headline="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item headline="Item 3" content="Content 3"></db-accordion-item>
</db-accordion>
The accordion is a pure JS Component
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
</DBAccordion>
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
-</DBAccordion>
\ No newline at end of file
+ <DBAccordionItem headline="Item 1" content="Content 1" />
+ <DBAccordionItem headline="Item 2" content="Content 2" />
+ <DBAccordionItem headline="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion>
+ <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+</db-accordion>
The accordion is a pure JS Component
<DBAccordion>
+ <DBAccordionItem title="Item 1" content="Content 1" />
+ <DBAccordionItem title="Item 2" content="Content 2" />
+ <DBAccordionItem title="Item 3" content="Content 3" />
+</DBAccordion>
<DBAccordion>
+ <DBAccordionItem title="Item 1" content="Content 1" />
+ <DBAccordionItem title="Item 2" content="Content 2" />
+ <DBAccordionItem title="Item 3" content="Content 3" />
+</DBAccordion>
<db-accordion behaviour="single">
+ <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
+ <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
+ <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+</db-accordion>
The accordion is a pure JS Component
<DBAccordion behaviour="single">
+ <DBAccordionItem title="Item 1" content="Content 1" />
+ <DBAccordionItem title="Item 2" content="Content 2" />
+ <DBAccordionItem title="Item 3" content="Content 3" />
+</DBAccordion>
<DBAccordion behaviour="single">
+ <DBAccordionItem title="Item 1" content="Content 1" />
+ <DBAccordionItem title="Item 2" content="Content 2" />
+ <DBAccordionItem title="Item 3" content="Content 3" />
+</DBAccordion>
For general installation and configuration look at the ngx-components package.
// app.component.ts
-import { DBAccordion } from '@db-ui/ngx-components';
+import { DBAccordion, DBAccordionItem } from '@db-ui/ngx-components';
@Component({
// ...
standalone: true,
- imports: [..., DBAccordion],
+ imports: [..., DBAccordion, DBAccordionItem],
// ...
})
<!-- app.component.html -->
<db-accordion>
- <db-accordion-item title="Item 1" content="Content 1"></db-accordion-item>
- <db-accordion-item title="Item 2" content="Content 2"></db-accordion-item>
- <db-accordion-item title="Item 3" content="Content 3"></db-accordion-item>
+ <db-accordion-item
+ headlinePlain="Item 1"
+ content="Content 1"
+ ></db-accordion-item>
+ <db-accordion-item
+ headlinePlain="Item 2"
+ content="Content 2"
+ ></db-accordion-item>
+ <db-accordion-item
+ headlinePlain="Item 3"
+ content="Content 3"
+ ></db-accordion-item>
</db-accordion>
-
For general installation and configuration look at the components package.
<!-- index.html -->
@@ -19,4 +19,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/accordion/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration look at the react-components package.
// App.tsx
-import { DBAccordion } from "@db-ui/react-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/react-components";
const App = () => (
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+ <DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+ <DBAccordionItem headlinePlain="Item 3" content="Content 3" />
</DBAccordion>
);
export default App;
-
For general installation and configuration look at the v-components package.
<!-- App.vue -->
<script>
-import { DBAccordion } from "@db-ui/v-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/v-components";
</script>
<template>
<DBAccordion>
- <DBAccordionItem title="Item 1" content="Content 1" />
- <DBAccordionItem title="Item 2" content="Content 2" />
- <DBAccordionItem title="Item 3" content="Content 3" />
+ <DBAccordionItem headlinePlain="Item 1" content="Content 1" />
+ <DBAccordionItem headlinePlain="Item 2" content="Content 2" />
+ <DBAccordionItem headlinePlain="Item 3" content="Content 3" />
</DBAccordion>
</template>
-
<db-badge>Text (Default)</db-badge>
<span class="db-badge">Text (Default)</span>
<DBBadge>Text (Default)</DBBadge>
<DBBadge>Text (Default)</DBBadge>
<db-badge size="medium">Text (Default) - Medium</db-badge>
<span class="db-badge" data-size="medium">
- Text (Default) - Medium
-</span>
<DBBadge size="medium">Text (Default) - Medium</DBBadge>
<DBBadge size="medium">Text (Default) - Medium</DBBadge>
<db-badge [noContent]="true">Dot - Small</db-badge>
<span class="db-badge">Dot - Small</span>
<DBBadge noContent>Dot - Small</DBBadge>
<DBBadge :noContent="true">Dot - Small</DBBadge>
<db-badge [noContent]="true" size="medium">Dot - Medium</db-badge>
<span class="db-badge" data-size="medium">
+DB UI Mono
<db-badge>(Default) Text</db-badge>
<span class="db-badge">(Default) Text</span>
<DBBadge>(Default) Text</DBBadge>
<DBBadge>(Default) Text</DBBadge>
<db-badge size="medium">(Default) Text - Medium</db-badge>
<span class="db-badge" data-size="medium">
+ (Default) Text - Medium
+</span>
<DBBadge size="medium">(Default) Text - Medium</DBBadge>
<DBBadge size="medium">(Default) Text - Medium</DBBadge>
<db-badge [noContent]="true">Dot - Small</db-badge>
<span class="db-badge">Dot - Small</span>
<DBBadge noContent>Dot - Small</DBBadge>
<DBBadge :noContent="true">Dot - Small</DBBadge>
<db-badge [noContent]="true" size="medium">Dot - Medium</db-badge>
<span class="db-badge" data-size="medium">
Dot - Medium
</span>
<DBBadge noContent size="medium">
Dot - Medium
-</DBBadge>
<DBBadge :noContent="true" size="medium">Dot - Medium</DBBadge>
<db-badge example="icon">Icon - Small</db-badge>
<span class="db-badge">Icon - Small</span>
<DBBadge example="icon">Icon - Small</DBBadge>
<DBBadge example="icon">Icon - Small</DBBadge>
<db-badge example="icon" size="medium">
+</DBBadge>
<DBBadge :noContent="true" size="medium">Dot - Medium</DBBadge>
<db-badge example="icon">Icon - Small</db-badge>
<span class="db-badge">Icon - Small</span>
<DBBadge example="icon">Icon - Small</DBBadge>
<DBBadge example="icon">Icon - Small</DBBadge>
<db-badge example="icon" size="medium">
Icon - Medium
</db-badge>
<span class="db-badge" data-size="medium">
Icon - Medium
@@ -12,4 +12,4 @@
Icon - Medium
</DBBadge>
<DBBadge example="icon" size="medium">
Icon - Medium
-</DBBadge>
\ No newline at end of file
+</DBBadge>
<db-badge>Functional</db-badge>
<span class="db-badge">Functional</span>
<DBBadge>Functional</DBBadge>
<DBBadge>Functional</DBBadge>
<db-badge>Regular (Default)</db-badge>
<span class="db-badge">Regular (Default)</span>
<DBBadge>Regular (Default)</DBBadge>
<DBBadge>Regular (Default)</DBBadge>
<db-badge>Expressive</db-badge>
<span class="db-badge">Expressive</span>
<DBBadge>Expressive</DBBadge>
<DBBadge>Expressive</DBBadge>
<db-badge>Functional</db-badge>
<span class="db-badge">Functional</span>
<DBBadge>Functional</DBBadge>
<DBBadge>Functional</DBBadge>
<db-badge>(Default) Regular</db-badge>
<span class="db-badge">(Default) Regular</span>
<DBBadge>(Default) Regular</DBBadge>
<DBBadge>(Default) Regular</DBBadge>
<db-badge>Expressive</db-badge>
<span class="db-badge">Expressive</span>
<DBBadge>Expressive</DBBadge>
<DBBadge>Expressive</DBBadge>
<db-badge>Weak (Default)</db-badge>
<span class="db-badge">Weak (Default)</span>
<DBBadge>Weak (Default)</DBBadge>
<DBBadge>Weak (Default)</DBBadge>
<db-badge emphasis="strong">Strong</db-badge>
<span class="db-badge" data-emphasis="strong">
+DB UI Mono
<db-badge>(Default) Weak</db-badge>
<span class="db-badge">(Default) Weak</span>
<DBBadge>(Default) Weak</DBBadge>
<DBBadge>(Default) Weak</DBBadge>
<db-badge emphasis="strong">Strong</db-badge>
<span class="db-badge" data-emphasis="strong">
Strong
-</span>
<DBBadge emphasis="strong">Strong</DBBadge>
<DBBadge emphasis="strong">Strong</DBBadge>
\ No newline at end of file
+</span>
<DBBadge emphasis="strong">Strong</DBBadge>
<DBBadge emphasis="strong">Strong</DBBadge>
<db-badge example="number">Numbers</db-badge>
<span class="db-badge">Numbers</span>
<DBBadge example="number">Numbers</DBBadge>
<DBBadge example="number">Numbers</DBBadge>
<db-badge example="number">Numbers</db-badge>
<span class="db-badge">Numbers</span>
<DBBadge example="number">Numbers</DBBadge>
<DBBadge example="number">Numbers</DBBadge>
<db-badge placement="inline">Inline (Default)</db-badge>
<span class="db-badge" data-placement="inline">
- Inline (Default)
-</span>
<DBBadge placement="inline">Inline (Default)</DBBadge>
<DBBadge placement="inline">Inline (Default)</DBBadge>
<db-badge placement="corner-top-left">Corner - Top - Left</db-badge>
<span class="db-badge" data-placement="corner-top-left">
+DB UI Mono
<db-badge placement="inline">(Default) Inline</db-badge>
<span class="db-badge" data-placement="inline">
+ (Default) Inline
+</span>
<DBBadge placement="inline">(Default) Inline</DBBadge>
<DBBadge placement="inline">(Default) Inline</DBBadge>
<db-badge placement="corner-top-left">Corner - Top - Left</db-badge>
<span class="db-badge" data-placement="corner-top-left">
Corner - Top - Left
-</span>
<DBBadge placement="corner-top-left">Corner - Top - Left</DBBadge>
<DBBadge placement="corner-top-left">Corner - Top - Left</DBBadge>
<db-badge placement="corner-center-left">Corner - Center - Left</db-badge>
<span class="db-badge" data-placement="corner-center-left">
+</span>
<DBBadge placement="corner-top-left">Corner - Top - Left</DBBadge>
<DBBadge placement="corner-top-left">Corner - Top - Left</DBBadge>
<db-badge placement="corner-center-left">Corner - Center - Left</db-badge>
<span class="db-badge" data-placement="corner-center-left">
Corner - Center - Left
-</span>
<DBBadge placement="corner-center-left">Corner - Center - Left</DBBadge>
<DBBadge placement="corner-center-left">Corner - Center - Left</DBBadge>
<db-badge placement="corner-bottom-left">Corner - Bottom- Left</db-badge>
<span class="db-badge" data-placement="corner-bottom-left">
+</span>
<DBBadge placement="corner-center-left">Corner - Center - Left</DBBadge>
<DBBadge placement="corner-center-left">Corner - Center - Left</DBBadge>
<db-badge placement="corner-bottom-left">Corner - Bottom- Left</db-badge>
<span class="db-badge" data-placement="corner-bottom-left">
Corner - Bottom- Left
-</span>
<DBBadge placement="corner-bottom-left">Corner - Bottom- Left</DBBadge>
<DBBadge placement="corner-bottom-left">Corner - Bottom- Left</DBBadge>
<db-badge placement="corner-top-right">Corner - Top - Right</db-badge>
<span class="db-badge" data-placement="corner-top-right">
+</span>
<DBBadge placement="corner-bottom-left">Corner - Bottom- Left</DBBadge>
<DBBadge placement="corner-bottom-left">Corner - Bottom- Left</DBBadge>
<db-badge placement="corner-top-right">Corner - Top - Right</db-badge>
<span class="db-badge" data-placement="corner-top-right">
Corner - Top - Right
-</span>
<DBBadge placement="corner-top-right">Corner - Top - Right</DBBadge>
<DBBadge placement="corner-top-right">Corner - Top - Right</DBBadge>
<db-badge placement="corner-center-right">Corner - Center - Right</db-badge>
<span class="db-badge" data-placement="corner-center-right">
+</span>
<DBBadge placement="corner-top-right">Corner - Top - Right</DBBadge>
<DBBadge placement="corner-top-right">Corner - Top - Right</DBBadge>
<db-badge placement="corner-center-right">Corner - Center - Right</db-badge>
<span class="db-badge" data-placement="corner-center-right">
Corner - Center - Right
-</span>
<DBBadge placement="corner-center-right">Corner - Center - Right</DBBadge>
<DBBadge placement="corner-center-right">Corner - Center - Right</DBBadge>
<db-badge placement="corner-bottom-right">Corner - Bottom- Right</db-badge>
<span class="db-badge" data-placement="corner-bottom-right">
+</span>
<DBBadge placement="corner-center-right">Corner - Center - Right</DBBadge>
<DBBadge placement="corner-center-right">Corner - Center - Right</DBBadge>
<db-badge placement="corner-bottom-right">Corner - Bottom- Right</db-badge>
<span class="db-badge" data-placement="corner-bottom-right">
Corner - Bottom- Right
-</span>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
\ No newline at end of file
+</span>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
<db-badge>Adaptive (Default)</db-badge>
<span class="db-badge">Adaptive (Default)</span>
<DBBadge>Adaptive (Default)</DBBadge>
<DBBadge>Adaptive (Default)</DBBadge>
<db-badge semantic="neutral">Neutral</db-badge>
<span class="db-badge" data-semantic="neutral">
+DB UI Mono
<db-badge>(Default) Adaptive</db-badge>
<span class="db-badge">(Default) Adaptive</span>
<DBBadge>(Default) Adaptive</DBBadge>
<DBBadge>(Default) Adaptive</DBBadge>
<db-badge semantic="neutral">Neutral</db-badge>
<span class="db-badge" data-semantic="neutral">
Neutral
-</span>
<DBBadge semantic="neutral">Neutral</DBBadge>
<DBBadge semantic="neutral">Neutral</DBBadge>
<db-badge semantic="critical">Critical</db-badge>
<span class="db-badge" data-semantic="critical">
+</span>
<DBBadge semantic="neutral">Neutral</DBBadge>
<DBBadge semantic="neutral">Neutral</DBBadge>
<db-badge semantic="critical">Critical</db-badge>
<span class="db-badge" data-semantic="critical">
Critical
-</span>
<DBBadge semantic="critical">Critical</DBBadge>
<DBBadge semantic="critical">Critical</DBBadge>
<db-badge semantic="informational">Informational</db-badge>
<span class="db-badge" data-semantic="informational">
+</span>
<DBBadge semantic="critical">Critical</DBBadge>
<DBBadge semantic="critical">Critical</DBBadge>
<db-badge semantic="informational">Informational</db-badge>
<span class="db-badge" data-semantic="informational">
Informational
-</span>
<DBBadge semantic="informational">Informational</DBBadge>
<DBBadge semantic="informational">Informational</DBBadge>
<db-badge semantic="successful">Successful</db-badge>
<span class="db-badge" data-semantic="successful">
+</span>
<DBBadge semantic="informational">Informational</DBBadge>
<DBBadge semantic="informational">Informational</DBBadge>
<db-badge semantic="successful">Successful</db-badge>
<span class="db-badge" data-semantic="successful">
Successful
-</span>
<DBBadge semantic="successful">Successful</DBBadge>
<DBBadge semantic="successful">Successful</DBBadge>
<db-badge semantic="warning">Warning</db-badge>
<span class="db-badge" data-semantic="warning">
+</span>
<DBBadge semantic="successful">Successful</DBBadge>
<DBBadge semantic="successful">Successful</DBBadge>
<db-badge semantic="warning">Warning</db-badge>
<span class="db-badge" data-semantic="warning">
Warning
-</span>
<DBBadge semantic="warning">Warning</DBBadge>
<DBBadge semantic="warning">Warning</DBBadge>
<db-badge emphasis="strong">Adaptive Strong</db-badge>
<span class="db-badge" data-emphasis="strong">
+</span>
<DBBadge semantic="warning">Warning</DBBadge>
<DBBadge semantic="warning">Warning</DBBadge>
<db-badge emphasis="strong">Adaptive Strong</db-badge>
<span class="db-badge" data-emphasis="strong">
Adaptive Strong
-</span>
<DBBadge emphasis="strong">Adaptive Strong</DBBadge>
<DBBadge emphasis="strong">Adaptive Strong</DBBadge>
<db-badge semantic="neutral" emphasis="strong">
+</span>
<DBBadge emphasis="strong">Adaptive Strong</DBBadge>
<DBBadge emphasis="strong">Adaptive Strong</DBBadge>
<db-badge semantic="neutral" emphasis="strong">
Neutral Strong
</db-badge>
<span class="db-badge" data-semantic="neutral" data-emphasis="strong">
Neutral Strong
@@ -18,7 +18,7 @@
Neutral Strong
</DBBadge>
<DBBadge semantic="neutral" emphasis="strong">
Neutral Strong
-</DBBadge>
<db-badge semantic="critical" emphasis="strong">
+</DBBadge>
<db-badge semantic="critical" emphasis="strong">
Critical Strong
</db-badge>
<span class="db-badge" data-semantic="critical" data-emphasis="strong">
Critical Strong
@@ -26,7 +26,7 @@
Critical Strong
</DBBadge>
<DBBadge semantic="critical" emphasis="strong">
Critical Strong
-</DBBadge>
<db-badge semantic="informational" emphasis="strong">
+</DBBadge>
<db-badge semantic="informational" emphasis="strong">
Informational Strong
</db-badge>
<span class="db-badge" data-semantic="informational" data-emphasis="strong">
Informational Strong
@@ -34,7 +34,7 @@
Informational Strong
</DBBadge>
<DBBadge semantic="informational" emphasis="strong">
Informational Strong
-</DBBadge>
<db-badge semantic="successful" emphasis="strong">
+</DBBadge>
<db-badge semantic="successful" emphasis="strong">
Successful Strong
</db-badge>
<span class="db-badge" data-semantic="successful" data-emphasis="strong">
Successful Strong
@@ -42,7 +42,7 @@
Successful Strong
</DBBadge>
<DBBadge semantic="successful" emphasis="strong">
Successful Strong
-</DBBadge>
<db-badge semantic="warning" emphasis="strong">
+</DBBadge>
<db-badge semantic="warning" emphasis="strong">
Warning Strong
</db-badge>
<span class="db-badge" data-semantic="warning" data-emphasis="strong">
Warning Strong
@@ -50,4 +50,4 @@
Warning Strong
</DBBadge>
<DBBadge semantic="warning" emphasis="strong">
Warning Strong
-</DBBadge>
\ No newline at end of file
+</DBBadge>
<db-badge>Small (Default)</db-badge>
<span class="db-badge">Small (Default)</span>
<DBBadge>Small (Default)</DBBadge>
<DBBadge>Small (Default)</DBBadge>
<db-badge size="medium">Medium</db-badge>
<span class="db-badge" data-size="medium">
+DB UI Mono
<db-badge>(Default) Small</db-badge>
<span class="db-badge">(Default) Small</span>
<DBBadge>(Default) Small</DBBadge>
<DBBadge>(Default) Small</DBBadge>
<db-badge size="medium">Medium</db-badge>
<span class="db-badge" data-size="medium">
Medium
-</span>
<DBBadge size="medium">Medium</DBBadge>
<DBBadge size="medium">Medium</DBBadge>
\ No newline at end of file
+</span>
<DBBadge size="medium">Medium</DBBadge>
<DBBadge size="medium">Medium</DBBadge>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-badge>Badge</db-badge>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/badge/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/badge/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/badge/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-brand>functional</db-brand>
<div class="db-brand">
+DB UI Mono
<db-brand>Functional</db-brand>
<div class="db-brand">
<a>
<img
class="db-logo"
@@ -7,9 +7,9 @@
height="24"
width="34"
/>
- functional
+ Functional
</a>
-</div>
<DBBrand>functional</DBBrand>
<DBBrand>functional</DBBrand>
<db-brand>regular (Default)</db-brand>
<div class="db-brand">
+</div>
<DBBrand>Functional</DBBrand>
<DBBrand>Functional</DBBrand>
<db-brand>(Default) Regular</db-brand>
<div class="db-brand">
<a>
<img
class="db-logo"
@@ -18,9 +18,9 @@
height="24"
width="34"
/>
- regular (Default)
+ (Default) Regular
</a>
-</div>
<DBBrand>regular (Default)</DBBrand>
<DBBrand>regular (Default)</DBBrand>
<db-brand>expressive</db-brand>
<div class="db-brand">
+</div>
<DBBrand>(Default) Regular</DBBrand>
<DBBrand>(Default) Regular</DBBrand>
<db-brand>Expressive</db-brand>
<div class="db-brand">
<a>
<img
class="db-logo"
@@ -29,6 +29,6 @@
height="24"
width="34"
/>
- expressive
+ Expressive
</a>
-</div>
<DBBrand>expressive</DBBrand>
<DBBrand>expressive</DBBrand>
\ No newline at end of file
+</div>
<DBBrand>Expressive</DBBrand>
<DBBrand>Expressive</DBBrand>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-brand>Brand</db-brand>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/brand/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/brand/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/brand/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-button>(Default) Auto Width</db-button>
<button class="db-button">(Default) Auto Width</button>
<DBButton>(Default) Auto Width</DBButton>
<DBButton>(Default) Auto Width</DBButton>
<db-button width="full">Width full</db-button>
<button class="db-button" data-width="full">
+DB UI Mono
<db-button>(Default) Auto Width</db-button>
<button class="db-button">(Default) Auto Width</button>
<DBButton>(Default) Auto Width</DBButton>
<DBButton>(Default) Auto Width</DBButton>
<db-button width="full">Width full</db-button>
<button class="db-button" data-width="full">
Width full
-</button>
<DBButton width="full">Width full</DBButton>
<DBButton width="full">Width full</DBButton>
\ No newline at end of file
+</button>
<DBButton width="full">Width full</DBButton>
<DBButton width="full">Width full</DBButton>
<db-button>(Default) Text</db-button>
<button class="db-button">(Default) Text</button>
<DBButton>(Default) Text</DBButton>
<DBButton>(Default) Text</DBButton>
<db-button icon="user">Icon & Text</db-button>
<button class="db-button" data-icon="user">
+DB UI Mono
<db-button>(Default) Text</db-button>
<button class="db-button">(Default) Text</button>
<DBButton>(Default) Text</DBButton>
<DBButton>(Default) Text</DBButton>
<db-button icon="user">Icon & Text</db-button>
<button class="db-button" data-icon="user">
Icon & Text
-</button>
<DBButton icon="user">Icon & Text</DBButton>
<DBButton icon="user">Icon & Text</DBButton>
<db-button icon="user" [noText]="true">Icon</db-button>
<button class="db-button" data-icon="user" data-no-text="true">
+</button>
<DBButton icon="user">Icon & Text</DBButton>
<DBButton icon="user">Icon & Text</DBButton>
<db-button icon="user" [noText]="true">Icon</db-button>
<button class="db-button" data-icon="user" data-no-text="true">
Icon
</button>
<DBButton icon="user" noText>
Icon
-</DBButton>
<DBButton icon="user" :noText="true">Icon</DBButton>
\ No newline at end of file
+</DBButton>
<DBButton icon="user" :noText="true">Icon</DBButton>
<db-button>(Default) regular</db-button>
<button class="db-button">(Default) regular</button>
<DBButton>(Default) regular</DBButton>
<DBButton>(Default) regular</DBButton>
<db-button>expressive</db-button>
<button class="db-button">expressive</button>
<DBButton>expressive</DBButton>
<DBButton>expressive</DBButton>
<db-button>functional</db-button>
<button class="db-button">functional</button>
<DBButton>functional</DBButton>
<DBButton>functional</DBButton>
<db-button>Functional</db-button>
<button class="db-button">Functional</button>
<DBButton>Functional</DBButton>
<DBButton>Functional</DBButton>
<db-button>(Default) Regular</db-button>
<button class="db-button">(Default) Regular</button>
<DBButton>(Default) Regular</DBButton>
<DBButton>(Default) Regular</DBButton>
<db-button>Expressive</db-button>
<button class="db-button">Expressive</button>
<DBButton>Expressive</DBButton>
<DBButton>Expressive</DBButton>
<db-button>(Default) Medium</db-button>
<button class="db-button">(Default) Medium</button>
<DBButton>(Default) Medium</DBButton>
<DBButton>(Default) Medium</DBButton>
<db-button size="small">Small</db-button>
<button class="db-button" data-size="small">
+DB UI Mono
<db-button>(Default) Medium</db-button>
<button class="db-button">(Default) Medium</button>
<DBButton>(Default) Medium</DBButton>
<DBButton>(Default) Medium</DBButton>
<db-button size="small">Small</db-button>
<button class="db-button" data-size="small">
Small
-</button>
<DBButton size="small">Small</DBButton>
<DBButton size="small">Small</DBButton>
\ No newline at end of file
+</button>
<DBButton size="small">Small</DBButton>
<DBButton size="small">Small</DBButton>
<db-button>(Default) Enabled</db-button>
<button class="db-button">(Default) Enabled</button>
<DBButton>(Default) Enabled</DBButton>
<DBButton>(Default) Enabled</DBButton>
<db-button [disabled]="true">Disabled</db-button>
<button class="db-button" disabled="">
+DB UI Mono
<db-button>(Default) Enabled</db-button>
<button class="db-button">(Default) Enabled</button>
<DBButton>(Default) Enabled</DBButton>
<DBButton>(Default) Enabled</DBButton>
<db-button [disabled]="true">Disabled</db-button>
<button class="db-button" disabled="">
Disabled
-</button>
<DBButton disabled>Disabled</DBButton>
<DBButton :disabled="true">Disabled</DBButton>
\ No newline at end of file
+</button>
<DBButton disabled>Disabled</DBButton>
<DBButton :disabled="true">Disabled</DBButton>
<db-button>(Default) Outlined - Adaptive</db-button>
<button class="db-button">(Default) Outlined - Adaptive</button>
<DBButton>(Default) Outlined - Adaptive</DBButton>
<DBButton>(Default) Outlined - Adaptive</DBButton>
<db-button variant="filled">Filled - Adaptive</db-button>
<button class="db-button" data-variant="filled">
+DB UI Mono
<db-button>(Default) Outlined - Adaptive</db-button>
<button class="db-button">(Default) Outlined - Adaptive</button>
<DBButton>(Default) Outlined - Adaptive</DBButton>
<DBButton>(Default) Outlined - Adaptive</DBButton>
<db-button variant="filled">Filled - Adaptive</db-button>
<button class="db-button" data-variant="filled">
Filled - Adaptive
-</button>
<DBButton variant="filled">Filled - Adaptive</DBButton>
<DBButton variant="filled">Filled - Adaptive</DBButton>
<db-button variant="ghost">Ghost - Adaptive</db-button>
<button class="db-button" data-variant="ghost">
+</button>
<DBButton variant="filled">Filled - Adaptive</DBButton>
<DBButton variant="filled">Filled - Adaptive</DBButton>
<db-button variant="ghost">Ghost - Adaptive</db-button>
<button class="db-button" data-variant="ghost">
Ghost - Adaptive
-</button>
<DBButton variant="ghost">Ghost - Adaptive</DBButton>
<DBButton variant="ghost">Ghost - Adaptive</DBButton>
<db-button variant="brand">Brand</db-button>
<button class="db-button" data-variant="brand">
+</button>
<DBButton variant="ghost">Ghost - Adaptive</DBButton>
<DBButton variant="ghost">Ghost - Adaptive</DBButton>
<db-button variant="brand">Brand</db-button>
<button class="db-button" data-variant="brand">
Brand
-</button>
<DBButton variant="brand">Brand</DBButton>
<DBButton variant="brand">Brand</DBButton>
\ No newline at end of file
+</button>
<DBButton variant="brand">Brand</DBButton>
<DBButton variant="brand">Brand</DBButton>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-button variant="brand">Button</db-button>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/button/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -11,4 +11,4 @@sizesvariantsvariants anchor link
Before Status After Description primary
❌ ❌ not valid anymore, use outlined
buttons for those purposesbrand-primary
🔁 primary
secondary-outline
🔁 outlined
secondary-solid
🔁 solid
tertiary-plain
🔁 text
iconsicons anchor link
-
Before Status After Description iconAfter
❌ ❌ not valid anymore, for buttons only icons before text are allowed iconOnly
🔁 noText
Before | Status | After | Description |
---|---|---|---|
iconAfter | ❌ | ❌ | not valid anymore, for buttons only icons before text are allowed |
iconOnly | 🔁 | noText |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/button/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/button/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-card>(Default) Non interactive</db-card>
<div class="db-card">(Default) Non interactive</div>
<DBCard>(Default) Non interactive</DBCard>
<DBCard>(Default) Non interactive</DBCard>
<db-card behaviour="interactive">Interactive</db-card>
<div data-behaviour="interactive" role="button" tabindex="0" class="db-card">
+DB UI Mono
<db-card>(Default) Non interactive</db-card>
<div class="db-card">(Default) Non interactive</div>
<DBCard>(Default) Non interactive</DBCard>
<DBCard>(Default) Non interactive</DBCard>
<db-card behaviour="interactive">Interactive</db-card>
<div data-behaviour="interactive" role="button" tabindex="0" class="db-card">
Interactive
-</div>
<DBCard behaviour="interactive">Interactive</DBCard>
<DBCard behaviour="interactive">Interactive</DBCard>
\ No newline at end of file
+</div>
<DBCard behaviour="interactive">Interactive</DBCard>
<DBCard behaviour="interactive">Interactive</DBCard>
<db-card>regular (Default)</db-card>
<div class="db-card">regular (Default)</div>
<DBCard>regular (Default)</DBCard>
<DBCard>regular (Default)</DBCard>
<db-card>expressive</db-card>
<div class="db-card">expressive</div>
<DBCard>expressive</DBCard>
<DBCard>expressive</DBCard>
<db-card>functional</db-card>
<div class="db-card">functional</div>
<DBCard>functional</DBCard>
<DBCard>functional</DBCard>
<db-card>Functional</db-card>
<div class="db-card">Functional</div>
<DBCard>Functional</DBCard>
<DBCard>Functional</DBCard>
<db-card>(Default) Regular</db-card>
<div class="db-card">(Default) Regular</div>
<DBCard>(Default) Regular</DBCard>
<DBCard>(Default) Regular</DBCard>
<db-card>Expressive</db-card>
<div class="db-card">Expressive</div>
<DBCard>Expressive</DBCard>
<DBCard>Expressive</DBCard>
<db-card>functional</db-card>
<div class="db-card">functional</div>
<DBCard>functional</DBCard>
<DBCard>functional</DBCard>
<db-card elevationLevel="1">(Default) Level 1 - Adaptive</db-card>
undefined
<DBCard elevationLevel="1">(Default) Level 1 - Adaptive</DBCard>
<DBCard elevationLevel="1">(Default) Level 1 - Adaptive</DBCard>
<db-card elevationLevel="2">Level 2 - Adaptive</db-card>
undefined
<DBCard elevationLevel="2">Level 2 - Adaptive</DBCard>
<DBCard elevationLevel="2">Level 2 - Adaptive</DBCard>
<db-card elevationLevel="3">Level 3 - Adaptive</db-card>
undefined
<DBCard elevationLevel="3">Level 3 - Adaptive</DBCard>
<DBCard elevationLevel="3">Level 3 - Adaptive</DBCard>
<db-card elevationLevel="1">(Default) Level 1 - Adaptive</db-card>
undefined
<DBCard elevationLevel="1">(Default) Level 1 - Adaptive</DBCard>
<DBCard elevationLevel="1">(Default) Level 1 - Adaptive</DBCard>
<db-card elevationLevel="2">Level 2 - Adaptive</db-card>
undefined
<DBCard elevationLevel="2">Level 2 - Adaptive</DBCard>
<DBCard elevationLevel="2">Level 2 - Adaptive</DBCard>
<db-card elevationLevel="3">Level 3 - Adaptive</db-card>
undefined
<DBCard elevationLevel="3">Level 3 - Adaptive</DBCard>
<DBCard elevationLevel="3">Level 3 - Adaptive</DBCard>
<db-card elevationLevel="1" behaviour="interactive">
+DB UI Mono
<db-card elevationLevel="1" behaviour="interactive">
Level 1 - Interactive
</db-card>
<div
data-behaviour="interactive"
@@ -12,7 +12,7 @@
Level 1 - Interactive
</DBCard>
<DBCard elevationLevel="1" behaviour="interactive">
Level 1 - Interactive
-</DBCard>
<db-card elevationLevel="2" behaviour="interactive">
+</DBCard>
<db-card elevationLevel="2" behaviour="interactive">
Level 2 - Interactive
</db-card>
<div
data-behaviour="interactive"
@@ -26,7 +26,7 @@
Level 2 - Interactive
</DBCard>
<DBCard elevationLevel="2" behaviour="interactive">
Level 2 - Interactive
-</DBCard>
<db-card elevationLevel="3" behaviour="interactive">
+</DBCard>
<db-card elevationLevel="3" behaviour="interactive">
Level 3 - Interactive
</db-card>
<div
data-behaviour="interactive"
@@ -40,4 +40,4 @@
Level 3 - Interactive
</DBCard>
<DBCard elevationLevel="3" behaviour="interactive">
Level 3 - Interactive
-</DBCard>
\ No newline at end of file
+</DBCard>
<db-card spacing="small">(Default) Small</db-card>
<div data-spacing="small" class="db-card">
+DB UI Mono
<db-card spacing="small">(Default) Small</db-card>
<div data-spacing="small" class="db-card">
(Default) Small
-</div>
<DBCard spacing="small">(Default) Small</DBCard>
<DBCard spacing="small">(Default) Small</DBCard>
<db-card spacing="none">No Spacing</db-card>
<div data-spacing="none" class="db-card">
+</div>
<DBCard spacing="small">(Default) Small</DBCard>
<DBCard spacing="small">(Default) Small</DBCard>
<db-card spacing="none">No Spacing</db-card>
<div data-spacing="none" class="db-card">
No Spacing
-</div>
<DBCard spacing="none">No Spacing</DBCard>
<DBCard spacing="none">No Spacing</DBCard>
<db-card spacing="medium">Medium</db-card>
<div data-spacing="medium" class="db-card">
+</div>
<DBCard spacing="none">No Spacing</DBCard>
<DBCard spacing="none">No Spacing</DBCard>
<db-card spacing="medium">Medium</db-card>
<div data-spacing="medium" class="db-card">
Medium
-</div>
<DBCard spacing="medium">Medium</DBCard>
<DBCard spacing="medium">Medium</DBCard>
\ No newline at end of file
+</div>
<DBCard spacing="medium">Medium</DBCard>
<DBCard spacing="medium">Medium</DBCard>
For general installation and configuration take a look at the ngx-components package.
//app.component.ts
@@ -16,4 +16,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-card>Card content</db-card>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/card/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -9,4 +9,4 @@classvariantvariant anchor link
Before Status After Description variant
🔁 variant
There is no default header
/content
anymore. Now you can change the card withvariant="interactive"
to act like a button.header
❌ ❌ Add your own content via children/slot. content
❌ ❌ Add your own content via children/slot. imageimage anchor link
-
Before Status After Description alt
🔁 imgAlt
image
🔁 imgSrc
🆕 imgWidth
🆕 imgHeight
illustration
❌ ❌ uiCoreIllustrationPath
❌ ❌
Before | Status | After | Description |
---|---|---|---|
alt | 🔁 | imgAlt | |
image | 🔁 | imgSrc | |
🆕 | imgWidth | ||
🆕 | imgHeight | ||
illustration | ❌ | ❌ | |
uiCoreIllustrationPath | ❌ | ❌ |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/card/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/card/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-checkbox name="Content">(Default) Label</db-checkbox>
<div class="db-checkbox">
+ <label for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="checkbox"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Content"
+ aria-describedby=""
+ />
+ (Default) Label
+ </label>
+ <span
+ id="OVERWRITE_DEFAULT_ID-valid-message"
+ class="db-infotext"
+ data-semantic="successful"
+ data-size="small"
+ >
+ TODO: Add a validMessage
+ </span>
+ <span
+ id="OVERWRITE_DEFAULT_ID-invalid-message"
+ class="db-infotext"
+ data-semantic="critical"
+ data-size="small"
+ >
+ TODO: Add an invalidMessage
+ </span>
+</div>
<DBCheckbox name="Content">(Default) Label</DBCheckbox>
<DBCheckbox name="Content">(Default) Label</DBCheckbox>
<db-checkbox name="Content" variant="hidden">
+ No Label
+</db-checkbox>
<div data-variant="hidden" class="db-checkbox">
+ <label for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="checkbox"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Content"
+ aria-describedby=""
+ />
+ No Label
+ </label>
+ <span
+ id="OVERWRITE_DEFAULT_ID-valid-message"
+ class="db-infotext"
+ data-semantic="successful"
+ data-size="small"
+ >
+ TODO: Add a validMessage
+ </span>
+ <span
+ id="OVERWRITE_DEFAULT_ID-invalid-message"
+ class="db-infotext"
+ data-semantic="critical"
+ data-size="small"
+ >
+ TODO: Add an invalidMessage
+ </span>
+</div>
<DBCheckbox name="Content" variant="hidden">
+ No Label
+</DBCheckbox>
<DBCheckbox name="Content" variant="hidden">
+ No Label
+</DBCheckbox>
<db-checkbox name="Density">Functional</db-checkbox>
<div class="db-checkbox">
+DB UI Mono
<db-checkbox name="Density">Functional</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
aria-describedby=""
@@ -24,15 +25,16 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="Density">Functional</DBCheckbox>
<DBCheckbox name="Density">Functional</DBCheckbox>
<db-checkbox name="Density">Regular (Default)</db-checkbox>
<div class="db-checkbox">
+</div>
<DBCheckbox name="Density">Functional</DBCheckbox>
<DBCheckbox name="Density">Functional</DBCheckbox>
<db-checkbox name="Density">(Default) Regular</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
aria-describedby=""
/>
- Regular (Default)
+ (Default) Regular
</label>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
@@ -50,10 +52,11 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="Density">Regular (Default)</DBCheckbox>
<DBCheckbox name="Density">Regular (Default)</DBCheckbox>
<db-checkbox name="Density">Expressive</db-checkbox>
<div class="db-checkbox">
+</div>
<DBCheckbox name="Density">(Default) Regular</DBCheckbox>
<DBCheckbox name="Density">(Default) Regular</DBCheckbox>
<db-checkbox name="Density">Expressive</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
aria-describedby=""
@@ -76,4 +79,4 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="Density">Expressive</DBCheckbox>
<DBCheckbox name="Density">Expressive</DBCheckbox>
\ No newline at end of file
+</div>
<DBCheckbox name="Density">Expressive</DBCheckbox>
<DBCheckbox name="Density">Expressive</DBCheckbox>
<db-checkbox name="Interaction States">(Default) Enabled</db-checkbox>
undefined
<DBCheckbox name="Interaction States">(Default) Enabled</DBCheckbox>
<DBCheckbox name="Interaction States">(Default) Enabled</DBCheckbox>
<db-checkbox name="Interaction States" [disabled]="true">Disabled</db-checkbox>
undefined
<DBCheckbox name="Interaction States" disabled>
+ Disabled
+</DBCheckbox>
<DBCheckbox name="Interaction States" :disabled="true">Disabled</DBCheckbox>
<db-checkbox name="Requirement">(Default) Optional</db-checkbox>
<div class="db-checkbox">
+DB UI Mono
<db-checkbox name="Requirement">(Default) Optional</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Requirement"
aria-describedby=""
@@ -24,10 +25,11 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="Requirement">(Default) Optional</DBCheckbox>
<DBCheckbox name="Requirement">(Default) Optional</DBCheckbox>
<db-checkbox name="Requirement" [required]="true">Required</db-checkbox>
<div class="db-checkbox">
+</div>
<DBCheckbox name="Requirement">(Default) Optional</DBCheckbox>
<DBCheckbox name="Requirement">(Default) Optional</DBCheckbox>
<db-checkbox name="Requirement" [required]="true">Required</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Requirement"
required=""
@@ -53,10 +55,11 @@
</span>
</div>
<DBCheckbox name="Requirement" required>
Required
-</DBCheckbox>
<DBCheckbox name="Requirement" :required="true">Required</DBCheckbox>
<db-checkbox name="Requirement" [indeterminate]="true">Required - Indeterminate</db-checkbox>
<div class="db-checkbox">
+</DBCheckbox>
<DBCheckbox name="Requirement" :required="true">Required</DBCheckbox>
<db-checkbox name="Requirement" [indeterminate]="true">Required - Indeterminate</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Requirement"
aria-describedby=""
@@ -81,4 +84,4 @@
</span>
</div>
<DBCheckbox name="Requirement" indeterminate>
Required - Indeterminate
-</DBCheckbox>
<DBCheckbox name="Requirement" :indeterminate="true">Required - Indeterminate</DBCheckbox>
\ No newline at end of file
+</DBCheckbox>
<DBCheckbox name="Requirement" :indeterminate="true">Required - Indeterminate</DBCheckbox>
<db-checkbox name="Size">Default</db-checkbox>
<div class="db-checkbox">
+DB UI Mono
<db-checkbox name="Size">(Default) Medium</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Size"
aria-describedby=""
/>
- Default
+ (Default) Medium
</label>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
@@ -24,12 +25,13 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="Size">Default</DBCheckbox>
<DBCheckbox name="Size">Default</DBCheckbox>
<db-checkbox name="Size" size="small">
+</div>
<DBCheckbox name="Size">(Default) Medium</DBCheckbox>
<DBCheckbox name="Size">(Default) Medium</DBCheckbox>
<db-checkbox name="Size" size="small">
Small
</db-checkbox>
<div data-size="small" class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Size"
aria-describedby=""
@@ -56,4 +58,4 @@
Small
</DBCheckbox>
<DBCheckbox name="Size" size="small">
Small
-</DBCheckbox>
\ No newline at end of file
+</DBCheckbox>
<db-checkbox name="States">Default</db-checkbox>
<div class="db-checkbox">
+DB UI Mono
<db-checkbox name="States">(Default) Unchecked</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="States"
aria-describedby=""
/>
- Default
+ (Default) Unchecked
</label>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
@@ -24,10 +25,41 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="States">Default</DBCheckbox>
<DBCheckbox name="States">Default</DBCheckbox>
<db-checkbox name="States" [checked]="true">Checked</db-checkbox>
<div class="db-checkbox">
+</div>
<DBCheckbox name="States">(Default) Unchecked</DBCheckbox>
<DBCheckbox name="States">(Default) Unchecked</DBCheckbox>
<db-checkbox name="States" [required]="true">Unchecked - Invalid</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States"
+ required=""
+ aria-describedby=""
+ />
+ Unchecked - Invalid
+ </label>
+ <span
+ id="OVERWRITE_DEFAULT_ID-valid-message"
+ class="db-infotext"
+ data-semantic="successful"
+ data-size="small"
+ >
+ TODO: Add a validMessage
+ </span>
+ <span
+ id="OVERWRITE_DEFAULT_ID-invalid-message"
+ class="db-infotext"
+ data-semantic="critical"
+ data-size="small"
+ >
+ TODO: Add an invalidMessage
+ </span>
+</div>
<DBCheckbox name="States" required>
+ Unchecked - Invalid
+</DBCheckbox>
<DBCheckbox name="States" :required="true">Unchecked - Invalid</DBCheckbox>
<db-checkbox name="States" [checked]="true">Checked</db-checkbox>
<div class="db-checkbox">
+ <label for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="States"
aria-describedby=""
@@ -53,10 +85,42 @@
</span>
</div>
<DBCheckbox name="States" checked>
Checked
-</DBCheckbox>
<DBCheckbox name="States" :checked="true">Checked</DBCheckbox>
<db-checkbox name="States" [indeterminate]="true">Indeterminate</db-checkbox>
<div class="db-checkbox">
+</DBCheckbox>
<DBCheckbox name="States" :checked="true">Checked</DBCheckbox>
<db-checkbox name="States" [required]="true" [checked]="true">Checked - Valid</db-checkbox>
<div class="db-checkbox">
+ <label for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="checkbox"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States"
+ required=""
+ aria-describedby=""
+ checked=""
+ />
+ Checked - Valid
+ </label>
+ <span
+ id="OVERWRITE_DEFAULT_ID-valid-message"
+ class="db-infotext"
+ data-semantic="successful"
+ data-size="small"
+ >
+ TODO: Add a validMessage
+ </span>
+ <span
+ id="OVERWRITE_DEFAULT_ID-invalid-message"
+ class="db-infotext"
+ data-semantic="critical"
+ data-size="small"
+ >
+ TODO: Add an invalidMessage
+ </span>
+</div>
<DBCheckbox name="States" required checked>
+ Checked - Valid
+</DBCheckbox>
<DBCheckbox name="States" :required="true" :checked="true">Checked - Valid</DBCheckbox>
<db-checkbox name="States" [indeterminate]="true">Indeterminate</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="States"
aria-describedby=""
@@ -81,16 +145,48 @@
</span>
</div>
<DBCheckbox name="States" indeterminate>
Indeterminate
-</DBCheckbox>
<DBCheckbox name="States" :indeterminate="true">Indeterminate</DBCheckbox>
<db-checkbox name="States" [disabled]="true">Disabled</db-checkbox>
<div class="db-checkbox">
+</DBCheckbox>
<DBCheckbox name="States" :indeterminate="true">Indeterminate</DBCheckbox>
<db-checkbox name="States" [indeterminate]="true" [required]="true">Indeterminate - Invalid</db-checkbox>
<div class="db-checkbox">
<label for="OVERWRITE_DEFAULT_ID">
<input
type="checkbox"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="States"
- disabled=""
+ required=""
aria-describedby=""
/>
- Disabled
+ Indeterminate - Invalid
+ </label>
+ <span
+ id="OVERWRITE_DEFAULT_ID-valid-message"
+ class="db-infotext"
+ data-semantic="successful"
+ data-size="small"
+ >
+ TODO: Add a validMessage
+ </span>
+ <span
+ id="OVERWRITE_DEFAULT_ID-invalid-message"
+ class="db-infotext"
+ data-semantic="critical"
+ data-size="small"
+ >
+ TODO: Add an invalidMessage
+ </span>
+</div>
<DBCheckbox name="States" indeterminate required>
+ Indeterminate - Invalid
+</DBCheckbox>
<DBCheckbox name="States" :indeterminate="true" :required="true">Indeterminate - Invalid</DBCheckbox>
<db-checkbox name="States" [indeterminate]="true" [required]="true" [checked]="true">Indeterminate - Valid</db-checkbox>
<div class="db-checkbox">
+ <label for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="checkbox"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States"
+ required=""
+ aria-describedby=""
+ checked=""
+ />
+ Indeterminate - Valid
</label>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
@@ -108,6 +204,6 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBCheckbox name="States" disabled>
- Disabled
-</DBCheckbox>
<DBCheckbox name="States" :disabled="true">Disabled</DBCheckbox>
\ No newline at end of file
+</div>
<DBCheckbox name="States" indeterminate required checked>
+ Indeterminate - Valid
+</DBCheckbox>
<DBCheckbox name="States" :indeterminate="true" :required="true" :checked="true">Indeterminate - Valid</DBCheckbox>
<db-checkbox name="Content">(Default) Label</db-checkbox>
undefined
<DBCheckbox name="Content">(Default) Label</DBCheckbox>
<DBCheckbox name="Content">(Default) Label</DBCheckbox>
<db-checkbox name="Content" variant="hidden">
- Hidden Label
-</db-checkbox>
undefined
<DBCheckbox name="Content" variant="hidden">
- Hidden Label
-</DBCheckbox>
<DBCheckbox name="Content" variant="hidden">
- Hidden Label
-</DBCheckbox>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -80,4 +80,4 @@ How to use with Template Driven F
}
coming soon … if your interested in contributing, you're very welcome ;)
coming soon … if your interested in contributing, you're very welcome ;)
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/checkbox/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description elm-checkbox
🔁 db-checkbox
idid anchor link
-
Before Status After Description input_id
🔁 id
Before | Status | After | Description |
---|---|---|---|
input_id | 🔁 | id |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -22,4 +22,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/checkbox/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -13,4 +13,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/checkbox/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-divider>functional</db-divider>
<div class="db-divider"></div>
<DBDivider>functional</DBDivider>
<DBDivider>functional</DBDivider>
<db-divider>regular (Default)</db-divider>
<div class="db-divider"></div>
<DBDivider>regular (Default)</DBDivider>
<DBDivider>regular (Default)</DBDivider>
<db-divider>expressive</db-divider>
<div class="db-divider"></div>
<DBDivider>expressive</DBDivider>
<DBDivider>expressive</DBDivider>
<db-divider>Functional</db-divider>
<div class="db-divider"></div>
<DBDivider>Functional</DBDivider>
<DBDivider>Functional</DBDivider>
<db-divider>(Default) Regular</db-divider>
<div class="db-divider"></div>
<DBDivider>(Default) Regular</DBDivider>
<DBDivider>(Default) Regular</DBDivider>
<db-divider>Expressive</db-divider>
<div class="db-divider"></div>
<DBDivider>Expressive</DBDivider>
<DBDivider>Expressive</DBDivider>
<db-divider>Weak (Default)</db-divider>
<div class="db-divider"></div>
<DBDivider>Weak (Default)</DBDivider>
<DBDivider>Weak (Default)</DBDivider>
<db-divider emphasis="strong">Strong</db-divider>
<div data-emphasis="strong" class="db-divider"></div>
<DBDivider emphasis="strong">Strong</DBDivider>
<DBDivider emphasis="strong">Strong</DBDivider>
<db-divider>(Default) Weak</db-divider>
<div class="db-divider"></div>
<DBDivider>(Default) Weak</DBDivider>
<DBDivider>(Default) Weak</DBDivider>
<db-divider emphasis="strong">Strong</db-divider>
<div data-emphasis="strong" class="db-divider"></div>
<DBDivider emphasis="strong">Strong</DBDivider>
<DBDivider emphasis="strong">Strong</DBDivider>
<db-divider>Adaptive - Horizontal (Default)</db-divider>
<div class="db-divider"></div>
<DBDivider>Adaptive - Horizontal (Default)</DBDivider>
<DBDivider>Adaptive - Horizontal (Default)</DBDivider>
<db-divider variant="vertical">Adaptive - Vertical</db-divider>
<div data-variant="vertical" class="db-divider"></div>
<DBDivider variant="vertical">Adaptive - Vertical</DBDivider>
<DBDivider variant="vertical">Adaptive - Vertical</DBDivider>
<db-divider>(Default) Adaptive - Horizontal</db-divider>
<div class="db-divider"></div>
<DBDivider>(Default) Adaptive - Horizontal</DBDivider>
<DBDivider>(Default) Adaptive - Horizontal</DBDivider>
<db-divider variant="vertical">Adaptive - Vertical</db-divider>
<div data-variant="vertical" class="db-divider"></div>
<DBDivider variant="vertical">Adaptive - Vertical</DBDivider>
<DBDivider variant="vertical">Adaptive - Vertical</DBDivider>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-divider></db-divider>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/divider/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/divider/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/divider/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
With Backdrop (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -21,7 +21,7 @@
}}
>
With Backdrop (Default)
-</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">With Backdrop (Default)</DBDrawer>
<db-drawer backdrop="weak" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">With Backdrop (Default)</DBDrawer>
<db-drawer backdrop="weak" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Backdrop-weak
</db-drawer>
<dialog class="db-drawer" data-backdrop="weak" open>
<article class="db-drawer-container">
@@ -45,7 +45,7 @@
}}
>
Backdrop-weak
-</DBDrawer>
<DBDrawer backdrop="weak" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Backdrop-weak</DBDrawer>
<db-drawer backdrop="none" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer backdrop="weak" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Backdrop-weak</DBDrawer>
<db-drawer backdrop="none" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
No Backdrop
</db-drawer>
<dialog class="db-drawer" data-backdrop="none" open>
<article class="db-drawer-container">
@@ -69,4 +69,4 @@
}}
>
No Backdrop
-</DBDrawer>
<DBDrawer backdrop="none" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">No Backdrop</DBDrawer>
\ No newline at end of file
+</DBDrawer>
<DBDrawer backdrop="none" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">No Backdrop</DBDrawer>
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
functional
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -22,8 +22,8 @@
functional
</DBDrawer>
<DBDrawer :open="openDrawer" @close="toggleDrawer(false)">
functional
- </DBDrawer>
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
- regular (Default)
+ </DBDrawer>
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
+ Regular (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
<header class="db-drawer-header">
@@ -35,7 +35,7 @@
Close Button
</button>
</header>
- <div class="db-drawer-content">regular (Default)</div>
+ <div class="db-drawer-content">Regular (Default)</div>
</article>
</dialog>
<DBDrawer
open={open}
@@ -43,10 +43,10 @@
setOpen(false)
}}
>
- regular (Default)
+ Regular (Default)
</DBDrawer>
<DBDrawer :open="openDrawer" @close="toggleDrawer(false)">
- regular (Default)
- </DBDrawer>
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
+ Regular (Default)
+ </DBDrawer>
<db-drawer [open]="openDrawer" (onClose)="toggleDrawer(false)">
expressive
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -70,4 +70,4 @@
expressive
</DBDrawer>
<DBDrawer :open="openDrawer" @close="toggleDrawer(false)">
expressive
- </DBDrawer>
\ No newline at end of file
+ </DBDrawer>
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Right (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -21,7 +21,7 @@
}}
>
Right (Default)
-</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Right (Default)</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Right (Default)</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Left
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-direction="left">
@@ -45,7 +45,7 @@
}}
>
Left
-</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Left</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Left</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Up
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-direction="up">
@@ -69,7 +69,7 @@
}}
>
Up
-</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Up</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Up</DBDrawer>
<db-drawer direction="left" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Down
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-direction="down">
@@ -93,4 +93,4 @@
}}
>
Down
-</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Down</DBDrawer>
\ No newline at end of file
+</DBDrawer>
<DBDrawer direction="left" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Down</DBDrawer>
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
No rounding (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -21,7 +21,7 @@
}}
>
No rounding (Default)
-</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">No rounding (Default)</DBDrawer>
<db-drawer [rounded]="true" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">No rounding (Default)</DBDrawer>
<db-drawer [rounded]="true" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Rounded
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-rounded="true">
@@ -45,4 +45,4 @@
}}
>
Rounded
-</DBDrawer>
<DBDrawer :rounded="true" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Rounded</DBDrawer>
\ No newline at end of file
+</DBDrawer>
<DBDrawer :rounded="true" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Rounded</DBDrawer>
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
With padding (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -21,7 +21,7 @@
}}
>
With padding (Default)
-</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">With padding (Default)</DBDrawer>
<db-drawer [withCloseButton]="true" width="full" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">With padding (Default)</DBDrawer>
<db-drawer [withCloseButton]="true" width="full" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Full
</db-drawer>
<dialog class="db-drawer" width="full" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -47,4 +47,4 @@
Full
</DBDrawer>
<DBDrawer :withCloseButton="true" width="full" :open="openDrawer" @close="toggleDrawer(false)">
Full
- </DBDrawer>
\ No newline at end of file
+ </DBDrawer>
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+DB UI Mono
<db-drawer [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Medium (Default)
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container">
@@ -21,7 +21,7 @@
}}
>
Medium (Default)
-</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Medium (Default)</DBDrawer>
<db-drawer spacing="small" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Medium (Default)</DBDrawer>
<db-drawer spacing="small" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Small
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-spacing="small">
@@ -45,7 +45,7 @@
}}
>
Small
-</DBDrawer>
<DBDrawer spacing="small" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Small</DBDrawer>
<db-drawer spacing="large" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer spacing="small" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Small</DBDrawer>
<db-drawer spacing="large" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
Large
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-spacing="large">
@@ -69,7 +69,7 @@
}}
>
Large
-</DBDrawer>
<DBDrawer spacing="large" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Large</DBDrawer>
<db-drawer spacing="none" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
+</DBDrawer>
<DBDrawer spacing="large" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">Large</DBDrawer>
<db-drawer spacing="none" [withCloseButton]="true" [open]="openDrawer" (onClose)="toggleDrawer(false)">
None
</db-drawer>
<dialog class="db-drawer" data-backdrop="strong" open>
<article class="db-drawer-container" data-spacing="none">
@@ -93,4 +93,4 @@
}}
>
None
-</DBDrawer>
<DBDrawer spacing="none" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">None</DBDrawer>
\ No newline at end of file
+</DBDrawer>
<DBDrawer spacing="none" :withCloseButton="true" :open="openDrawer" @close="toggleDrawer(false)">None</DBDrawer>
For general installation and configuration take a look at the ngx-components package.
If you use width !== full
you are able to overwrite the max-width
with --db-drawer-max-width:
CSS variable.
For general installation and configuration take a look at the components package.
If you use width !== full
you are able to overwrite the max-width
with --db-drawer-max-width:
CSS variable.
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
If you use width !== full
you are able to overwrite the max-width
with --db-drawer-max-width:
CSS variable.
For general installation and configuration take a look at the v-components package.
If you use width !== full
you are able to overwrite the max-width
with --db-drawer-max-width:
CSS variable.
<db-header>
+DB UI Mono
<db-header>
<db-brand brand>DBHeader</db-brand>
<db-main-navigation *dbNavigation>
<db-navigation-item icon="account"><a>Desktop (full width)</a></db-navigation-item><db-navigation-item disabled><a>Desktop (full width) disabled</a></db-navigation-item>
@@ -21,7 +21,7 @@
</DBButton>
<DBButton icon="help" variant="text" [noText]="true"> Help </DBButton>
</ng-container>
-</db-header>
<header class="db-header" id="regular (Default)">
+</db-header>
<header class="db-header" id="Regular (Default)">
<dialog class="db-drawer" id="drawer-bffe6918-05e7-4baa-b532-66467e61905c">
<article
class="db-drawer-container db-header-drawer"
@@ -52,14 +52,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-3281f02e-bbc3-4b43-a0dd-b79813fd94f7"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -161,14 +161,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-9da396bf-2a41-402e-a9d8-cf54a219919b"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -224,7 +224,7 @@
</div>
</div>
</header>
<DBHeader
- slotBrand={
+ brand={
<DBBrand
title="DBHeader"
imgSrc="https://db-ui.github.io/images/db_logo.svg"
@@ -232,18 +232,18 @@
DBHeader
</DBBrand>
}
- slotMetaNavigation={
+ metaNavigation={
<>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
</>
}
- slotCallToAction={
+ callToAction={
<DBButton icon="search" variant="text" noText>
Search
</DBButton>
}
- slotActionBar={
+ actionBar={
<>
<DBButton icon="account" variant="text" noText>
Profile
@@ -298,7 +298,7 @@
<a href="#">Desktop (full width) disabled</a>
</DBNavigationItem>
</DBMainNavigation>
- </DBHeader>
<db-header [forceMobile]="true">
+ </DBHeader>
<db-header [forceMobile]="true">
<db-brand brand>DBHeader</db-brand>
<db-main-navigation *dbNavigation>
<db-navigation-item icon="account"><a>Mobile</a></db-navigation-item><db-navigation-item disabled><a>Mobile disabled</a></db-navigation-item>
@@ -321,7 +321,7 @@
</DBButton>
<DBButton icon="help" variant="text" [noText]="true"> Help </DBButton>
</ng-container>
-</db-header>
<header class="db-header" id="regular (Default)">
+</db-header>
<header class="db-header" id="Regular (Default)">
<dialog class="db-drawer" id="drawer-bffe6918-05e7-4baa-b532-66467e61905c">
<article
class="db-drawer-container db-header-drawer"
@@ -352,14 +352,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-3281f02e-bbc3-4b43-a0dd-b79813fd94f7"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -461,14 +461,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-9da396bf-2a41-402e-a9d8-cf54a219919b"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -525,7 +525,7 @@
</div>
</header>
<DBHeader
forceMobile
- slotBrand={
+ brand={
<DBBrand
title="DBHeader"
imgSrc="https://db-ui.github.io/images/db_logo.svg"
@@ -533,18 +533,18 @@
DBHeader
</DBBrand>
}
- slotMetaNavigation={
+ metaNavigation={
<>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
</>
}
- slotCallToAction={
+ callToAction={
<DBButton icon="search" variant="text" noText>
Search
</DBButton>
}
- slotActionBar={
+ actionBar={
<>
<DBButton icon="account" variant="text" noText>
Profile
@@ -599,4 +599,4 @@
<a href="#">Mobile disabled</a>
</DBNavigationItem>
</DBMainNavigation>
- </DBHeader>
\ No newline at end of file
+ </DBHeader>
<db-header>
+DB UI Mono
<db-header>
<db-brand brand>DBHeader</db-brand>
<db-main-navigation *dbNavigation>
<db-navigation-item icon="account"><a>functional</a></db-navigation-item><db-navigation-item disabled><a>functional disabled</a></db-navigation-item>
@@ -21,7 +21,7 @@
</DBButton>
<DBButton icon="help" variant="text" [noText]="true"> Help </DBButton>
</ng-container>
-</db-header>
<header class="db-header" id="regular (Default)">
+</db-header>
<header class="db-header" id="Regular (Default)">
<dialog class="db-drawer" id="drawer-bffe6918-05e7-4baa-b532-66467e61905c">
<article
class="db-drawer-container db-header-drawer"
@@ -52,14 +52,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-3281f02e-bbc3-4b43-a0dd-b79813fd94f7"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -161,14 +161,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-9da396bf-2a41-402e-a9d8-cf54a219919b"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -224,7 +224,7 @@
</div>
</div>
</header>
<DBHeader
- slotBrand={
+ brand={
<DBBrand
title="DBHeader"
imgSrc="https://db-ui.github.io/images/db_logo.svg"
@@ -232,18 +232,18 @@
DBHeader
</DBBrand>
}
- slotMetaNavigation={
+ metaNavigation={
<>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
</>
}
- slotCallToAction={
+ callToAction={
<DBButton icon="search" variant="text" noText>
Search
</DBButton>
}
- slotActionBar={
+ actionBar={
<>
<DBButton icon="account" variant="text" noText>
Profile
@@ -298,10 +298,10 @@
<a href="#">functional disabled</a>
</DBNavigationItem>
</DBMainNavigation>
- </DBHeader>
<db-header>
+ </DBHeader>
<db-header>
<db-brand brand>DBHeader</db-brand>
<db-main-navigation *dbNavigation>
- <db-navigation-item icon="account"><a>regular (Default)</a></db-navigation-item><db-navigation-item disabled><a>regular (Default) disabled</a></db-navigation-item>
+ <db-navigation-item icon="account"><a>Regular (Default)</a></db-navigation-item><db-navigation-item disabled><a>Regular (Default) disabled</a></db-navigation-item>
</db-main-navigation>
<ng-container *dbMetaNavigation>
<DBLink href="#">Imprint</DBLink>
@@ -321,7 +321,7 @@
</DBButton>
<DBButton icon="help" variant="text" [noText]="true"> Help </DBButton>
</ng-container>
-</db-header>
<header class="db-header" id="regular (Default)">
+</db-header>
<header class="db-header" id="Regular (Default)">
<dialog class="db-drawer" id="drawer-bffe6918-05e7-4baa-b532-66467e61905c">
<article
class="db-drawer-container db-header-drawer"
@@ -352,14 +352,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-3281f02e-bbc3-4b43-a0dd-b79813fd94f7"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -461,14 +461,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-9da396bf-2a41-402e-a9d8-cf54a219919b"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -524,7 +524,7 @@
</div>
</div>
</header>
<DBHeader
- slotBrand={
+ brand={
<DBBrand
title="DBHeader"
imgSrc="https://db-ui.github.io/images/db_logo.svg"
@@ -532,18 +532,18 @@
DBHeader
</DBBrand>
}
- slotMetaNavigation={
+ metaNavigation={
<>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
</>
}
- slotCallToAction={
+ callToAction={
<DBButton icon="search" variant="text" noText>
Search
</DBButton>
}
- slotActionBar={
+ actionBar={
<>
<DBButton icon="account" variant="text" noText>
Profile
@@ -559,10 +559,10 @@
>
<DBMainNavigation>
<DBNavigationItem icon="account">
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</DBNavigationItem>
<DBNavigationItem disabled>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</DBNavigationItem>
</DBMainNavigation>
</DBHeader>
<DBHeader>
@@ -592,13 +592,13 @@
<DBMainNavigation>
<DBNavigationItem icon="account">
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</DBNavigationItem>
<DBNavigationItem disabled>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</DBNavigationItem>
</DBMainNavigation>
- </DBHeader>
<db-header>
+ </DBHeader>
<db-header>
<db-brand brand>DBHeader</db-brand>
<db-main-navigation *dbNavigation>
<db-navigation-item icon="account"><a>expressive</a></db-navigation-item><db-navigation-item disabled><a>expressive disabled</a></db-navigation-item>
@@ -621,7 +621,7 @@
</DBButton>
<DBButton icon="help" variant="text" [noText]="true"> Help </DBButton>
</ng-container>
-</db-header>
<header class="db-header" id="regular (Default)">
+</db-header>
<header class="db-header" id="Regular (Default)">
<dialog class="db-drawer" id="drawer-bffe6918-05e7-4baa-b532-66467e61905c">
<article
class="db-drawer-container db-header-drawer"
@@ -652,14 +652,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-3281f02e-bbc3-4b43-a0dd-b79813fd94f7"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -761,14 +761,14 @@
class="db-navigation-item"
data-icon="account"
>
- <a href="#">regular (Default)</a>
+ <a href="#">Regular (Default)</a>
</li>
<li
id="navigation-item-9da396bf-2a41-402e-a9d8-cf54a219919b"
class="db-navigation-item"
aria-disabled="true"
>
- <a href="#">regular (Default) disabled</a>
+ <a href="#">Regular (Default) disabled</a>
</li>
</menu>
</nav>
@@ -824,7 +824,7 @@
</div>
</div>
</header>
<DBHeader
- slotBrand={
+ brand={
<DBBrand
title="DBHeader"
imgSrc="https://db-ui.github.io/images/db_logo.svg"
@@ -832,18 +832,18 @@
DBHeader
</DBBrand>
}
- slotMetaNavigation={
+ metaNavigation={
<>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
</>
}
- slotCallToAction={
+ callToAction={
<DBButton icon="search" variant="text" noText>
Search
</DBButton>
}
- slotActionBar={
+ actionBar={
<>
<DBButton icon="account" variant="text" noText>
Profile
@@ -898,4 +898,4 @@
<a href="#">expressive disabled</a>
</DBNavigationItem>
</DBMainNavigation>
- </DBHeader>
\ No newline at end of file
+ </DBHeader>
For general installation and configuration take a look at the ngx-components package.
//app.component.ts
@@ -13,7 +13,7 @@ Load componentFull<!-- app.component.html -->
<db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">
<db-brand brand>My Awesome App</db-brand>
- <db-main-navigation *dbNavigation>
- <!-- https://github.com/db-ui/mono/blob/main/packages/components/src/components/main-navigation/docs/Angular.md -->
- </db-main-navigation>
+ <db-navigation *dbNavigation>
+ <!-- https://github.com/db-ui/mono/blob/main/packages/components/src/components/navigation/docs/Angular.md -->
+ </db-navigation>
<ng-container *dbMetaNavigation>
<DBLink href="#">Imprint</DBLink>
<DBLink href="#">Help</DBLink>
@@ -70,4 +70,4 @@ Full{"props":{"pageProps":{}},"page":"/components/header/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -38,7 +38,7 @@ Use componentUse componentUse componentUse component{"props":{"pageProps":{}},"page":"/components/header/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description rea-header
🔁 db-header
mobilemobile anchor link
-
Before Status After Description mobile
🔁 forceMobile
forces the burger menu for desktop
Before | Status | After | Description |
---|---|---|---|
mobile | 🔁 | forceMobile | forces the burger menu for desktop |
For general installation and configuration take a look at the react-components package.
// App.tsx
import { DBHeader, DBBrand } from "@db-ui/react-components";
-const App = () => <DBHeader slotBrand={<DBBrand>Header</DBBrand>} />;
+const App = () => <DBHeader brand={<DBBrand>Header</DBBrand>} />;
export default App;
@@ -20,19 +20,19 @@ For general installation and configuration take a look at the v-components package.
<db-icon>functional</db-icon>
<span aria-hidden="true" class="db-icon">
- functional
-</span>
<DBIcon>functional</DBIcon>
<DBIcon>functional</DBIcon>
<db-icon>regular (Default)</db-icon>
<span aria-hidden="true" class="db-icon">
- regular (Default)
-</span>
<DBIcon>regular (Default)</DBIcon>
<DBIcon>regular (Default)</DBIcon>
<db-icon>expressive</db-icon>
<span aria-hidden="true" class="db-icon">
- expressive
-</span>
<DBIcon>expressive</DBIcon>
<DBIcon>expressive</DBIcon>
<db-icon>Functional</db-icon>
<span aria-hidden="true" class="db-icon">
+ Functional
+</span>
<DBIcon>Functional</DBIcon>
<DBIcon>Functional</DBIcon>
<db-icon>(Default) Regular</db-icon>
<span aria-hidden="true" class="db-icon">
+ (Default) Regular
+</span>
<DBIcon>(Default) Regular</DBIcon>
<DBIcon>(Default) Regular</DBIcon>
<db-icon>Expressive</db-icon>
<span aria-hidden="true" class="db-icon">
+ Expressive
+</span>
<DBIcon>Expressive</DBIcon>
<DBIcon>Expressive</DBIcon>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-icon icon="user">Icon</db-icon>
-
For general installation and configuration take a look at the components package.
You could use the data-icon
or data-icon-after
attributes on any HTML tag:
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description 🔁 db-icon
variantvariant anchor link
-
Before Status After Description variant
🔁 ❌ icon variants are controlled by font-family:var(--db-icon-font-family)
andfont-weight: var(--db-icon-font-weight);
Before | Status | After | Description |
---|---|---|---|
variant | 🔁 | ❌ | icon variants are controlled by font-family:var(--db-icon-font-family) and font-weight: var(--db-icon-font-weight); |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/icon/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/icon/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-infotext>Functional</db-infotext>
<span class="db-infotext">Functional</span>
<DBInfotext>Functional</DBInfotext>
<DBInfotext>Functional</DBInfotext>
<db-infotext>Regular (Default)</db-infotext>
<span class="db-infotext">Regular (Default)</span>
<DBInfotext>Regular (Default)</DBInfotext>
<DBInfotext>Regular (Default)</DBInfotext>
<db-infotext>Expressive</db-infotext>
<span class="db-infotext">Expressive</span>
<DBInfotext>Expressive</DBInfotext>
<DBInfotext>Expressive</DBInfotext>
<db-infotext>Functional</db-infotext>
<span class="db-infotext">Functional</span>
<DBInfotext>Functional</DBInfotext>
<DBInfotext>Functional</DBInfotext>
<db-infotext>(Default) Regular</db-infotext>
<span class="db-infotext">(Default) Regular</span>
<DBInfotext>(Default) Regular</DBInfotext>
<DBInfotext>(Default) Regular</DBInfotext>
<db-infotext>Expressive</db-infotext>
<span class="db-infotext">Expressive</span>
<DBInfotext>Expressive</DBInfotext>
<DBInfotext>Expressive</DBInfotext>
<db-infotext>Adaptive (Default)</db-infotext>
<span class="db-infotext">Adaptive (Default)</span>
<DBInfotext>Adaptive (Default)</DBInfotext>
<DBInfotext>Adaptive (Default)</DBInfotext>
<db-infotext semantic="neutral">Neutral</db-infotext>
<span class="db-infotext" data-semantic="neutral">
+DB UI Mono
<db-infotext>(Default) Adaptive</db-infotext>
<span class="db-infotext">(Default) Adaptive</span>
<DBInfotext>(Default) Adaptive</DBInfotext>
<DBInfotext>(Default) Adaptive</DBInfotext>
<db-infotext semantic="neutral">Neutral</db-infotext>
<span class="db-infotext" data-semantic="neutral">
Neutral
-</span>
<DBInfotext semantic="neutral">Neutral</DBInfotext>
<DBInfotext semantic="neutral">Neutral</DBInfotext>
<db-infotext semantic="critical">Critical</db-infotext>
<span class="db-infotext" data-semantic="critical">
+</span>
<DBInfotext semantic="neutral">Neutral</DBInfotext>
<DBInfotext semantic="neutral">Neutral</DBInfotext>
<db-infotext semantic="critical">Critical</db-infotext>
<span class="db-infotext" data-semantic="critical">
Critical
-</span>
<DBInfotext semantic="critical">Critical</DBInfotext>
<DBInfotext semantic="critical">Critical</DBInfotext>
<db-infotext semantic="informational">Informational</db-infotext>
<span class="db-infotext" data-semantic="informational">
+</span>
<DBInfotext semantic="critical">Critical</DBInfotext>
<DBInfotext semantic="critical">Critical</DBInfotext>
<db-infotext semantic="informational">Informational</db-infotext>
<span class="db-infotext" data-semantic="informational">
Informational
-</span>
<DBInfotext semantic="informational">Informational</DBInfotext>
<DBInfotext semantic="informational">Informational</DBInfotext>
<db-infotext semantic="successful">Successful</db-infotext>
<span class="db-infotext" data-semantic="successful">
+</span>
<DBInfotext semantic="informational">Informational</DBInfotext>
<DBInfotext semantic="informational">Informational</DBInfotext>
<db-infotext semantic="successful">Successful</db-infotext>
<span class="db-infotext" data-semantic="successful">
Successful
-</span>
<DBInfotext semantic="successful">Successful</DBInfotext>
<DBInfotext semantic="successful">Successful</DBInfotext>
<db-infotext semantic="warning">Warning</db-infotext>
<span class="db-infotext" data-semantic="warning">
+</span>
<DBInfotext semantic="successful">Successful</DBInfotext>
<DBInfotext semantic="successful">Successful</DBInfotext>
<db-infotext semantic="warning">Warning</db-infotext>
<span class="db-infotext" data-semantic="warning">
Warning
-</span>
<DBInfotext semantic="warning">Warning</DBInfotext>
<DBInfotext semantic="warning">Warning</DBInfotext>
\ No newline at end of file
+</span>
<DBInfotext semantic="warning">Warning</DBInfotext>
<DBInfotext semantic="warning">Warning</DBInfotext>
<db-infotext>Medium (Default)</db-infotext>
<span class="db-infotext">Medium (Default)</span>
<DBInfotext>Medium (Default)</DBInfotext>
<DBInfotext>Medium (Default)</DBInfotext>
<db-infotext size="small">Small</db-infotext>
<span class="db-infotext" data-size="small">
+DB UI Mono
<db-infotext>(Default) Medium</db-infotext>
<span class="db-infotext">(Default) Medium</span>
<DBInfotext>(Default) Medium</DBInfotext>
<DBInfotext>(Default) Medium</DBInfotext>
<db-infotext size="small">Small</db-infotext>
<span class="db-infotext" data-size="small">
Small
-</span>
<DBInfotext size="small">Small</DBInfotext>
<DBInfotext size="small">Small</DBInfotext>
\ No newline at end of file
+</span>
<DBInfotext size="small">Small</DBInfotext>
<DBInfotext size="small">Small</DBInfotext>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-infotext>Infotext</db-infotext>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/infotext/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/infotext/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/infotext/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-input label="Label" value="(Default) Text">
+DB UI Mono
<db-input label="Label" value="(Default) Text">
(Default) Text
</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -30,11 +31,12 @@
(Default) Text
</DBInput>
<DBInput label="Label" value="(Default) Text">
(Default) Text
-</DBInput>
<db-input label="Number" value="123456" type="number">
+</DBInput>
<db-input label="Number" value="123456" type="number">
Filled Number
</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Number</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="number"
placeholder=" "
@@ -62,11 +64,12 @@
Filled Number
</DBInput>
<DBInput label="Number" value="123456" type="number">
Filled Number
-</DBInput>
<db-input label="Label" icon="x_placeholder">
+</DBInput>
<db-input label="Label" icon="x_placeholder">
Text - Leading Icon
</db-input>
<div class="db-input" data-icon="x_placeholder">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -93,11 +96,12 @@
Text - Leading Icon
</DBInput>
<DBInput label="Label" icon="x_placeholder">
Text - Leading Icon
-</DBInput>
<db-input label="Label" icon="x_placeholder" iconAfter="x_placeholder">
+</DBInput>
<db-input label="Label" icon="x_placeholder" iconAfter="x_placeholder">
Text - Leading Icon - Trailing Icon
</db-input>
<div class="db-input" data-icon="x_placeholder" data-icon-after="x_placeholder">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -124,11 +128,12 @@
Text - Leading Icon - Trailing Icon
</DBInput>
<DBInput label="Label" icon="x_placeholder" iconAfter="x_placeholder">
Text - Leading Icon - Trailing Icon
-</DBInput>
<db-input label="Label" iconAfter="x_placeholder">
+</DBInput>
<db-input label="Label" iconAfter="x_placeholder">
Text - Trailing Icon
</db-input>
<div class="db-input" data-icon-after="x_placeholder">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -155,4 +160,4 @@
Text - Trailing Icon
</DBInput>
<DBInput label="Label" iconAfter="x_placeholder">
Text - Trailing Icon
-</DBInput>
\ No newline at end of file
+</DBInput>
<db-input label="Label">Functional</db-input>
<div class="db-input">
+DB UI Mono
<db-input label="Label">Functional</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -23,9 +24,10 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBInput label="Label">Functional</DBInput>
<DBInput label="Label">Functional</DBInput>
<db-input label="Label">(Default) Regular</db-input>
<div class="db-input">
+</div>
<DBInput label="Label">Functional</DBInput>
<DBInput label="Label">Functional</DBInput>
<db-input label="Label">(Default) Regular</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -48,9 +50,10 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBInput label="Label">(Default) Regular</DBInput>
<DBInput label="Label">(Default) Regular</DBInput>
<db-input label="Label">Expressive</db-input>
<div class="db-input">
+</div>
<DBInput label="Label">(Default) Regular</DBInput>
<DBInput label="Label">(Default) Regular</DBInput>
<db-input label="Label">Expressive</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -73,4 +76,4 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBInput label="Label">Expressive</DBInput>
<DBInput label="Label">Expressive</DBInput>
\ No newline at end of file
+</div>
<DBInput label="Label">Expressive</DBInput>
<DBInput label="Label">Expressive</DBInput>
<db-input label="Label">(Default) Text</db-input>
undefined
<DBInput label="Label">(Default) Text</DBInput>
<DBInput label="Label">(Default) Text</DBInput>
<db-input label="Label" type="password">
+DB UI Mono
<db-input label="Label">(Default) Text</db-input>
undefined
<DBInput label="Label">(Default) Text</DBInput>
<DBInput label="Label">(Default) Text</DBInput>
<db-input label="Label" type="password">
Password
</db-input>
undefined
<DBInput label="Label" type="password">
Password
</DBInput>
<DBInput label="Label" type="password">
Password
-</DBInput>
<db-input label="Label" type="search">
+</DBInput>
<db-input label="Label" type="search">
Search
</db-input>
undefined
<DBInput label="Label" type="search">
Search
</DBInput>
<DBInput label="Label" type="search">
Search
-</DBInput>
<db-input label="Label" type="email">
+</DBInput>
<db-input label="Label" type="email">
E-Mail
</db-input>
undefined
<DBInput label="Label" type="email">
E-Mail
</DBInput>
<DBInput label="Label" type="email">
E-Mail
-</DBInput>
<db-input label="Label" type="number">
+</DBInput>
<db-input label="Label" type="number">
Number
</db-input>
undefined
<DBInput label="Label" type="number">
Number
</DBInput>
<DBInput label="Label" type="number">
Number
-</DBInput>
<db-input label="Label" type="tel">
+</DBInput>
<db-input label="Label" type="tel">
Tel
</db-input>
undefined
<DBInput label="Label" type="tel">
Tel
</DBInput>
<DBInput label="Label" type="tel">
Tel
-</DBInput>
<db-input label="Label" type="url">
+</DBInput>
<db-input label="Label" type="url">
URL
</db-input>
undefined
<DBInput label="Label" type="url">
URL
</DBInput>
<DBInput label="Label" type="url">
URL
-</DBInput>
<db-input label="Label" type="date">
+</DBInput>
<db-input label="Label" type="date">
Date
</db-input>
undefined
<DBInput label="Label" type="date">
Date
</DBInput>
<DBInput label="Label" type="date">
Date
-</DBInput>
<db-input label="Label" type="datetime-local">
+</DBInput>
<db-input label="Label" type="datetime-local">
Datetime Local
</db-input>
undefined
<DBInput label="Label" type="datetime-local">
Datetime Local
</DBInput>
<DBInput label="Label" type="datetime-local">
Datetime Local
-</DBInput>
<db-input label="Label" type="month">
+</DBInput>
<db-input label="Label" type="month">
Month
</db-input>
undefined
<DBInput label="Label" type="month">
Month
</DBInput>
<DBInput label="Label" type="month">
Month
-</DBInput>
<db-input label="Label" type="time">
+</DBInput>
<db-input label="Label" type="time">
Time
</db-input>
undefined
<DBInput label="Label" type="time">
Time
</DBInput>
<DBInput label="Label" type="time">
Time
-</DBInput>
<db-input label="Label" type="week">
+</DBInput>
<db-input label="Label" type="week">
Week
</db-input>
undefined
<DBInput label="Label" type="week">
Week
</DBInput>
<DBInput label="Label" type="week">
Week
-</DBInput>
\ No newline at end of file
+</DBInput>
<db-input label="Label" variant="floating">
+DB UI Mono
<db-input label="Label" variant="floating">
(Default) Text
</db-input>
undefined
<DBInput label="Label" variant="floating">
(Default) Text
</DBInput>
<DBInput label="Label" variant="floating">
(Default) Text
-</DBInput>
<db-input label="Label" type="password" variant="floating">
+</DBInput>
<db-input label="Label" type="password" variant="floating">
Password
</db-input>
undefined
<DBInput label="Label" type="password" variant="floating">
Password
</DBInput>
<DBInput label="Label" type="password" variant="floating">
Password
-</DBInput>
<db-input label="Label" type="search" variant="floating">
+</DBInput>
<db-input label="Label" type="search" variant="floating">
Search
</db-input>
undefined
<DBInput label="Label" type="search" variant="floating">
Search
</DBInput>
<DBInput label="Label" type="search" variant="floating">
Search
-</DBInput>
<db-input label="Label" type="email" variant="floating">
+</DBInput>
<db-input label="Label" type="email" variant="floating">
E-Mail
</db-input>
undefined
<DBInput label="Label" type="email" variant="floating">
E-Mail
</DBInput>
<DBInput label="Label" type="email" variant="floating">
E-Mail
-</DBInput>
<db-input label="Label" type="number" variant="floating">
+</DBInput>
<db-input label="Label" type="number" variant="floating">
Number
</db-input>
undefined
<DBInput label="Label" type="number" variant="floating">
Number
</DBInput>
<DBInput label="Label" type="number" variant="floating">
Number
-</DBInput>
<db-input label="Label" type="tel" variant="floating">
+</DBInput>
<db-input label="Label" type="tel" variant="floating">
Tel
</db-input>
undefined
<DBInput label="Label" type="tel" variant="floating">
Tel
</DBInput>
<DBInput label="Label" type="tel" variant="floating">
Tel
-</DBInput>
<db-input label="Label" type="url" variant="floating">
+</DBInput>
<db-input label="Label" type="url" variant="floating">
URL
</db-input>
undefined
<DBInput label="Label" type="url" variant="floating">
URL
</DBInput>
<DBInput label="Label" type="url" variant="floating">
URL
-</DBInput>
<db-input label="Label" type="date" variant="floating">
+</DBInput>
<db-input label="Label" type="date" variant="floating">
Date
</db-input>
undefined
<DBInput label="Label" type="date" variant="floating">
Date
</DBInput>
<DBInput label="Label" type="date" variant="floating">
Date
-</DBInput>
<db-input label="Label" type="datetime-local" variant="floating">
+</DBInput>
<db-input label="Label" type="datetime-local" variant="floating">
Datetime Local
</db-input>
undefined
<DBInput label="Label" type="datetime-local" variant="floating">
Datetime Local
</DBInput>
<DBInput label="Label" type="datetime-local" variant="floating">
Datetime Local
-</DBInput>
<db-input label="Label" type="month" variant="floating">
+</DBInput>
<db-input label="Label" type="month" variant="floating">
Month
</db-input>
undefined
<DBInput label="Label" type="month" variant="floating">
Month
</DBInput>
<DBInput label="Label" type="month" variant="floating">
Month
-</DBInput>
<db-input label="Label" type="time" variant="floating">
+</DBInput>
<db-input label="Label" type="time" variant="floating">
Time
</db-input>
undefined
<DBInput label="Label" type="time" variant="floating">
Time
</DBInput>
<DBInput label="Label" type="time" variant="floating">
Time
-</DBInput>
<db-input label="Label" type="week" variant="floating">
+</DBInput>
<db-input label="Label" type="week" variant="floating">
Week
</db-input>
undefined
<DBInput label="Label" type="week" variant="floating">
Week
</DBInput>
<DBInput label="Label" type="week" variant="floating">
Week
-</DBInput>
\ No newline at end of file
+</DBInput>
<db-input label="Label">(Default) Optional</db-input>
<div class="db-input">
+DB UI Mono
<db-input label="Label">(Default) Optional</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -23,9 +24,10 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBInput label="Label">(Default) Optional</DBInput>
<DBInput label="Label">(Default) Optional</DBInput>
<db-input label="Label" [required]="true">Required</db-input>
<div class="db-input">
+</div>
<DBInput label="Label">(Default) Optional</DBInput>
<DBInput label="Label">(Default) Optional</DBInput>
<db-input label="Label" [required]="true">Required</db-input>
<div class="db-input">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<input
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
type="text"
placeholder=" "
@@ -51,4 +53,4 @@
</span>
</div>
<DBInput label="Label" required>
Required
-</DBInput>
<DBInput label="Label" :required="true">Required</DBInput>
\ No newline at end of file
+</DBInput>
<DBInput label="Label" :required="true">Required</DBInput>
<db-input label="Label" variant="floating">
+DB UI Mono
<db-input label="Label" variant="floating">
(Default) Empty
</db-input>
undefined
<DBInput label="Label" variant="floating">
(Default) Empty
</DBInput>
<DBInput label="Label" variant="floating">
(Default) Empty
-</DBInput>
<db-input label="Label" value="Filled" variant="floating">
+</DBInput>
<db-input label="Label" value="Filled" variant="floating">
Filled
</db-input>
undefined
<DBInput label="Label" value="Filled" variant="floating">
Filled
</DBInput>
<DBInput label="Label" value="Filled" variant="floating">
Filled
-</DBInput>
<db-input label="Label" [disabled]="true" variant="floating">Disabled</db-input>
undefined
<DBInput label="Label" disabled variant="floating">
+</DBInput>
<db-input label="Label" [disabled]="true" variant="floating">Disabled</db-input>
undefined
<DBInput label="Label" disabled variant="floating">
Disabled
-</DBInput>
<DBInput label="Label" :disabled="true" variant="floating">Disabled</DBInput>
<db-input label="Label" value="Readonly - Filled" [readOnly]="true" variant="floating">Readonly - Filled</db-input>
undefined
<DBInput label="Label" value="Readonly - Filled" readOnly variant="floating">
+</DBInput>
<DBInput label="Label" :disabled="true" variant="floating">Disabled</DBInput>
<db-input label="Label" value="Readonly - Filled" [readOnly]="true" variant="floating">Readonly - Filled</db-input>
undefined
<DBInput label="Label" value="Readonly - Filled" readOnly variant="floating">
Readonly - Filled
-</DBInput>
<DBInput label="Label" value="Readonly - Filled" :readOnly="true" variant="floating">Readonly - Filled</DBInput>
\ No newline at end of file
+</DBInput>
<DBInput label="Label" value="Readonly - Filled" :readOnly="true" variant="floating">Readonly - Filled</DBInput>
<db-input label="Label">(Default) Empty</db-input>
undefined
<DBInput label="Label">(Default) Empty</DBInput>
<DBInput label="Label">(Default) Empty</DBInput>
<db-input label="Label" value="Filled">
+DB UI Mono
<db-input label="Label">(Default) Empty</db-input>
undefined
<DBInput label="Label">(Default) Empty</DBInput>
<DBInput label="Label">(Default) Empty</DBInput>
<db-input label="Label" value="Filled">
Filled
</db-input>
undefined
<DBInput label="Label" value="Filled">
Filled
</DBInput>
<DBInput label="Label" value="Filled">
Filled
-</DBInput>
<db-input label="Label" [disabled]="true">Disabled</db-input>
undefined
<DBInput label="Label" disabled>
+</DBInput>
<db-input label="Label" [disabled]="true">Disabled</db-input>
undefined
<DBInput label="Label" disabled>
Disabled
-</DBInput>
<DBInput label="Label" :disabled="true">Disabled</DBInput>
<db-input label="Label" value="Readonly - Filled" [readOnly]="true">Readonly - Filled</db-input>
undefined
<DBInput label="Label" value="Readonly - Filled" readOnly>
+</DBInput>
<DBInput label="Label" :disabled="true">Disabled</DBInput>
<db-input label="Label" value="Readonly - Filled" [readOnly]="true">Readonly - Filled</db-input>
undefined
<DBInput label="Label" value="Readonly - Filled" readOnly>
Readonly - Filled
-</DBInput>
<DBInput label="Label" value="Readonly - Filled" :readOnly="true">Readonly - Filled</DBInput>
\ No newline at end of file
+</DBInput>
<DBInput label="Label" value="Readonly - Filled" :readOnly="true">Readonly - Filled</DBInput>
<db-input label="Label">(Default) Basic</db-input>
undefined
<DBInput label="Label">(Default) Basic</DBInput>
<DBInput label="Label">(Default) Basic</DBInput>
<db-input label="Label" message="Helper Message">
+DB UI Mono
<db-input label="Label">(Default) Basic</db-input>
undefined
<DBInput label="Label">(Default) Basic</DBInput>
<DBInput label="Label">(Default) Basic</DBInput>
<db-input label="Label" message="Helper Message">
Helper Message
</db-input>
undefined
<DBInput label="Label" message="Helper Message">
Helper Message
</DBInput>
<DBInput label="Label" message="Helper Message">
Helper Message
-</DBInput>
\ No newline at end of file
+</DBInput>
<db-input label="Label">(Default) Label Above</db-input>
undefined
<DBInput label="Label">(Default) Label Above</DBInput>
<DBInput label="Label">(Default) Label Above</DBInput>
<db-input label="Label" variant="floating" value="Floating Label">
+DB UI Mono
<db-input label="Label">(Default) Label Above</db-input>
undefined
<DBInput label="Label">(Default) Label Above</DBInput>
<DBInput label="Label">(Default) Label Above</DBInput>
<db-input label="Label" variant="floating" value="Floating Label">
Floating Label
</db-input>
undefined
<DBInput label="Label" variant="floating" value="Floating Label">
Floating Label
</DBInput>
<DBInput label="Label" variant="floating" value="Floating Label">
Floating Label
-</DBInput>
<db-input label="Label" variant="hidden">
+</DBInput>
<db-input label="Label" variant="hidden">
Hidden Label
</db-input>
undefined
<DBInput label="Label" variant="hidden">
Hidden Label
</DBInput>
<DBInput label="Label" variant="hidden">
Hidden Label
-</DBInput>
\ No newline at end of file
+</DBInput>
Load SCSS globally within styles.scss
in your app:
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
@@ -109,4 +109,4 @@ Load SCSS globally somewhere in your app:
@forward "@db-ui/components/build/styles/db-ui-42";
@@ -7,4 +7,4 @@
<label for="username">Label</label>
<input type="text" name="username" id="username" />
</div>
-Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description elm-input
🔁 db-input
variantsvariants anchor link
-
Before Status After Description semitransparent
❌ ❌ old variants are removed a semi-transparent look is the default, new variants are chaniging the color white
❌ ❌ solid
❌ ❌ outline
❌ ❌ 🆕 adaptive
🆕 neutral
🆕 critical
🆕 informational
🆕 warning
🆕 successful
Before | Status | After | Description |
---|---|---|---|
semitransparent | ❌ | ❌ | old variants are removed a semi-transparent look is the default, new variants are chaniging the color |
white | ❌ | ❌ | |
solid | ❌ | ❌ | |
outline | ❌ | ❌ | |
🆕 | adaptive | ||
🆕 | neutral | ||
🆕 | critical | ||
🆕 | informational | ||
🆕 | warning | ||
🆕 | successful |
Load SCSS globally in a index.scss
file inside main.tsx
/main.jsx
within your app:
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
@@ -11,4 +11,4 @@
description={description}
onChange={handleChange}
></DBInput>;
-Load SCSS globally in a index.scss
file and import it in your main.ts
/main.js
file in your app:
@forward "@db-ui/components/build/styles/db-ui-42-rollup";
@@ -25,4 +25,4 @@
or using on-change listener:
<DBInput label="Textlabel" placeholder="Start" :value="modelAndChange" @change="($event) => { modelAndChange = $event.target.value;
}"/> {{ modelAndChange }}
-
<db-link href="#">Internal (Default)</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
- Internal (Default)
-</a>
<DBLink href="#">Internal (Default)</DBLink>
<DBLink href="#">Internal (Default)</DBLink>
<db-link href="#" content="external">
+DB UI Mono
<db-link href="#">(Default) Internal</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+ (Default) Internal
+</a>
<DBLink href="#">(Default) Internal</DBLink>
<DBLink href="#">(Default) Internal</DBLink>
<db-link href="#" content="external">
External
-</db-link>
<a class="db-link" href="#" tabindex="0" data-content="external">
+</db-link>
<a
+ content="external"
+ class="db-link"
+ href="#"
+ tabindex="0"
+ data-content="external"
+>
External
</a>
<DBLink href="#" content="external">
External
</DBLink>
<DBLink href="#" content="external">
External
-</DBLink>
\ No newline at end of file
+</DBLink>
<db-link href="#">Functional</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+DB UI Mono
<db-link href="#">Functional</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
Functional
-</a>
<DBLink href="#">Functional</DBLink>
<DBLink href="#">Functional</DBLink>
<db-link href="#">Regular (Default)</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
- Regular (Default)
-</a>
<DBLink href="#">Regular (Default)</DBLink>
<DBLink href="#">Regular (Default)</DBLink>
<db-link href="#">Expressive</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+</a>
<DBLink href="#">Functional</DBLink>
<DBLink href="#">Functional</DBLink>
<db-link href="#">(Default) Regular</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+ (Default) Regular
+</a>
<DBLink href="#">(Default) Regular</DBLink>
<DBLink href="#">(Default) Regular</DBLink>
<db-link href="#">Expressive</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
Expressive
-</a>
<DBLink href="#">Expressive</DBLink>
<DBLink href="#">Expressive</DBLink>
\ No newline at end of file
+</a>
<DBLink href="#">Expressive</DBLink>
<DBLink href="#">Expressive</DBLink>
<db-link href="#">Enabled (Default)/Hover/Pressed</db-link>
undefined
<DBLink href="#">Enabled (Default)/Hover/Pressed</DBLink>
<DBLink href="#">Enabled (Default)/Hover/Pressed</DBLink>
<db-link href="#" [disabled]="true">Disabled</db-link>
undefined
<DBLink href="#" disabled>
+DB UI Mono
<db-link href="#">Enabled (Default)/Hover/Pressed</db-link>
undefined
<DBLink href="#">Enabled (Default)/Hover/Pressed</DBLink>
<DBLink href="#">Enabled (Default)/Hover/Pressed</DBLink>
<db-link href="#" [disabled]="true">Disabled</db-link>
undefined
<DBLink href="#" disabled>
Disabled
-</DBLink>
<DBLink href="#" :disabled="true">Disabled</DBLink>
\ No newline at end of file
+</DBLink>
<DBLink href="#" :disabled="true">Disabled</DBLink>
<db-link href="#">Adaptive (Default)</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
- Adaptive (Default)
-</a>
<DBLink href="#">Adaptive (Default)</DBLink>
<DBLink href="#">Adaptive (Default)</DBLink>
<db-link href="#" variant="brand">
+DB UI Mono
<db-link href="#">(Default) Adaptive</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+ (Default) Adaptive
+</a>
<DBLink href="#">(Default) Adaptive</DBLink>
<DBLink href="#">(Default) Adaptive</DBLink>
<db-link href="#" variant="brand">
Brand
</db-link>
<a
class="db-link"
@@ -14,4 +14,4 @@
Brand
</DBLink>
<DBLink href="#" variant="brand">
Brand
-</DBLink>
\ No newline at end of file
+</DBLink>
<db-link href="#">Medium (Default)</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
- Medium (Default)
-</a>
<DBLink href="#">Medium (Default)</DBLink>
<DBLink href="#">Medium (Default)</DBLink>
<db-link href="#" size="small">
+DB UI Mono
<db-link href="#">(Default) Medium</db-link>
<a class="db-link" href="#" tabindex="0" data-content="internal">
+ (Default) Medium
+</a>
<DBLink href="#">(Default) Medium</DBLink>
<DBLink href="#">(Default) Medium</DBLink>
<db-link href="#" size="small">
Small
</db-link>
<a
class="db-link"
@@ -14,4 +14,4 @@
Small
</DBLink>
<DBLink href="#" size="small">
Small
-</DBLink>
\ No newline at end of file
+</DBLink>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-link href="#" variant="brand">Link</db-link>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -6,4 +6,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/link/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description elm-link
🔁 db-link
iconsicons anchor link
-
Before Status After Description icon
❌ ❌ not valid anymore use content
to show interal or external arrow iconicononly
❌ ❌ iconVariant
❌ ❌
Before | Status | After | Description |
---|---|---|---|
icon | ❌ | ❌ | not valid anymore use content to show interal or external arrow icon |
icononly | ❌ | ❌ | |
iconVariant | ❌ | ❌ |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -11,4 +11,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/link/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/link/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration look at the ngx-components package.
-// app.component.ts
-import { DBMainNavigation } from '@db-ui/ngx-components';
-
-@Component({
- // ...
- standalone: true,
- imports: [
- // ...,
- DBMainNavigation
- ],
- // ...
-})
-
-<!-- app.component.html -->
-
-<db-main-navigation>
- <db-navigation-item [active]="true">
- <ng-container sub-navigation>
- <db-navigation-item [active]="true">
- <ng-container *dbNavigationContent>
- Sub-Navi-Item 1
- </ng-container>
- <ng-container sub-navigation>
- <db-navigation-item [active]="true">
- <ng-container *dbNavigationContent>
- <a href="#">Sub-Sub-Navi-Item 1</a>
- </ng-container>
- </db-navigation-item>
- <db-navigation-item>
- <ng-container *dbNavigationContent>
- <a href="#">Sub-Sub-Navi-Item 2</a>
- </ng-container>
- </db-navigation-item>
- </ng-container>
- </db-navigation-item>
- <db-navigation-item>
- <ng-container *dbNavigationContent>
- <a href="#">Sub-Navi-Item 2</a>
- </ng-container>
- </db-navigation-item>
- </ng-container>
- <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>
- </db-navigation-item>
- <db-navigation-item icon="user">
- <ng-container *dbNavigationContent>
- <a href="#">Navi-Item 2</a>
- </ng-container>
- </db-navigation-item>
- <db-navigation-item [disabled]="true">
- <ng-container *dbNavigationContent>
- <a href="#">Navi-Item 3</a>
- </ng-container>
- </db-navigation-item>
-</db-main-navigation>
-
-You can set the property active
to a boolean value as in the example above.
-It will cause the navigation item to render in active style and implicitly
-set aria-current="page"
to the list element.
The component will also check for child element set to aria-current="page"
.
-Such elements are also displayed in active state.
-This makes the component integration with the Angular Router way more elegant
-compared to the first variant.
The component first needs to import the RouterLink
and RouterLinkActive
directives.
// app.component.ts
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { DBMainNavigation } from '@db-ui/ngx-components';
-
-@Component({
- // ...
- standalone: true,
- imports: [
- // ...
- RouterLink,
- RouterLinkActive,
- DBMainNavigation
- ],
- // ...
-})
-
-Now you can use the Angular Routers routerLink
directive to define your targets.
-The active style is automatically set once an item receives the aria-current="page"
attribute.
<!-- app.component.html -->
-
-<db-main-navigation>
- <db-navigation-item>
- <ng-container *dbNavigationContent>
- <a
- routerLink="/"
- ariaCurrentWhenActive="page"
- [routerLinkActiveOptions]="{ exact: true }"
- >
- Home
- </a>
- </ng-container>
- </db-navigation-item>
- <db-navigation-item>
- <ng-container *dbNavigationContent> Demo Pages </ng-container>
- <ng-container sub-navigation>
- <db-navigation-item>
- <ng-container *dbNavigationContent>
- <a routerLink="/demo/1" ariaCurrentWhenActive="page">
- Demo Page 1
- </a>
- </ng-container>
- <ng-container *dbNavigationContent>
- <a routerLink="/demo/2" ariaCurrentWhenActive="page">
- Demo Page 2
- </a>
- </ng-container>
- </db-navigation-item>
- </ng-container>
- </db-navigation-item>
-</db-main-navigation>
-
For general installation and configuration look at the components package.
-<!-- index.html -->
-...
-<body>
- <nav class="db-main-navigation">
- <menu>
- <li class="db-navigation-item" aria-current="page">
- <button
- class="db-navigation-item-expand-button"
- aria-haspopup="true"
- >
- Navi-Item 1
- </button>
- <menu class="db-sub-navigation">
- <li class="db-navigation-item" aria-current="page">
- <button
- class="db-navigation-item-expand-button"
- aria-haspopup="true"
- >
- Sub-Navi-Item 1
- </button>
- <menu class="db-sub-navigation">
- <li class="db-navigation-item" aria-current="page">
- <a href="#">Sub-Sub-Navi-Item 1</a>
- </li>
-
- <li class="db-navigation-item">
- <a href="#">Sub-Sub-Navi-Item 2</a>
- </li>
- </menu>
- </li>
-
- <li class="db-navigation-item">
- <a href="#">Sub-Navi-Item 2</a>
- </li>
- </menu>
- </li>
-
- <li class="db-navigation-item" data-icon="user">
- <a href="#">Navi-Item 2</a>
- </li>
-
- <li class="db-navigation-item" aria-disabled="true">
- <a href="#">Navi-Item 3</a>
- </li>
- </menu>
- </nav>
-</body>
-
--Note -For a general installation or migration process check out this documentation.
-
Before | Status | After | Description |
---|---|---|---|
cmp-mainnavigation | 🔁 | db-main-navigation |
Before | Status | After | Description |
---|---|---|---|
data | ❌ | ❌ | pass data via children / slot , moved a lot of the features to db-header |
siteName | ❌ | ❌ |
For general installation and configuration look at the react-components package.
-// App.tsx
-import { DBMainNavigation } from "@db-ui/react-components";
-
-const App = () => (
- <DBMainNavigation>
- <DBNavigationItem
- active
- slotSubNavigation={
- <>
- <DBNavigationItem
- active
- slotSubNavigation={
- <>
- <DBNavigationItem active>
- <a href="#">Sub-Sub-Navi-Item 1</a>
- </DBNavigationItem>
- <DBNavigationItem>
- <a href="#">Sub-Sub-Navi-Item 2</a>
- </DBNavigationItem>
- </>
- }
- >
- Sub-Navi-Item 1
- </DBNavigationItem>
- <DBNavigationItem>
- <a href="#">Sub-Navi-Item 2</a>
- </DBNavigationItem>
- </>
- }
- >
- Navi-Item 1
- </DBNavigationItem>
- <DBNavigationItem icon="user">
- <a href="#">Navi-Item 2</a>
- </DBNavigationItem>
- <DBNavigationItem disabled>
- <a href="#">Navi-Item 3</a>
- </DBNavigationItem>
- </DBMainNavigation>
-);
-
-export default App;
-
For general installation and configuration look at the v-components package.
-<!-- App.vue -->
-<script>
-import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
-</script>
-
-<template>
- <DBMainNavigation>
- <DBNavigationItem :active="true">
- Navi-Item 1
- <template v-slot:sub-navigation>
- <DBNavigationItem :active="true">
- Sub-Navi-Item 1
-
- <template v-slot:sub-navigation>
- <DBNavigationItem :active="true">
- <a href="#">Sub-Sub-Navi-Item 1</a>
- </DBNavigationItem>
- <DBNavigationItem>
- <a href="#">Sub-Sub-Navi-Item 2</a>
- </DBNavigationItem>
- </template>
- </DBNavigationItem>
- <DBNavigationItem>
- <a href="#">Sub-Navi-Item 2</a>
- </DBNavigationItem>
- </template>
- </DBNavigationItem>
- <DBNavigationItem icon="user">
- <a href="#">Navi-Item 2</a>
- </DBNavigationItem>
- <DBNavigationItem :disabled="true">
- <a href="#">Navi-Item 3</a>
- </DBNavigationItem>
- </DBMainNavigation>
-</template>
-
-You can set the property active
to a boolean value as in the example above.
-It will cause the navigation item to render in active style and implicitly
-set aria-current="page"
to the list element.
The component will also check for child element set to aria-current="page"
.
-Such elements are also displayed in active state.
-This makes the component integration with the Vue Router way more elegant
-compared to the first variant.
Now you can use Vue Routers RouterLink
component to define your targets.
-The active style is automatically set once an item receives the aria-current="page"
attribute.
<!-- App.vue -->
-<script>
-import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
-</script>
-
-<template>
- <DBMainNavigation>
- <DBNavigationItem>
- <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>
- </DBNavigationItem>
- <DBNavigationItem>
- <template> Demo Pages </template>
- <template #sub-navigation>
- <DBNavigationItem>
- <RouterLink to="/demo/1" ariaCurrentValue="page">
- Demo Page 1
- </RouterLink>
-
- <RouterLink to="/demo/2" ariaCurrentValue="page">
- Demo Page 2
- </RouterLink>
- </DBNavigationItem>
- </template>
- </DBNavigationItem>
- </DBMainNavigation>
-</template>
-
<db-navigation-item [areaPopup]="false">Text (Default)</db-navigation-item>
<li class="db-navigation-item">
+DB UI Mono
<db-navigation-item [areaPopup]="false">(Default) Text</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
aria-expanded="false"
>
- Text (Default)
+ (Default) Text
</button>
- <menu class="db-sub-navigation" id="sub-navigation-8108028061699986"></menu>
-</li>
<DBNavigationItem areaPopup>Text (Default)</DBNavigationItem>
<DBNavigationItem :areaPopup="false">Text (Default)</DBNavigationItem>
<db-navigation-item icon="user">Text - Icon (Leading)</db-navigation-item>
<li class="db-navigation-item" data-icon="user">
+ <menu class="db-sub-navigation" id="sub-navigation-8391344594406014"></menu>
+</li>
<DBNavigationItem areaPopup>(Default) Text</DBNavigationItem>
<DBNavigationItem :areaPopup="false">(Default) Text</DBNavigationItem>
<db-navigation-item icon="user">Text - Icon (Leading)</db-navigation-item>
<li class="db-navigation-item" data-icon="user">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -15,10 +15,8 @@
>
Text - Icon (Leading)
</button>
- <menu class="db-sub-navigation" id="sub-navigation-6902002477017508"></menu>
-</li>
<DBNavigationItem icon="user">Text - Icon (Leading)</DBNavigationItem>
<DBNavigationItem icon="user">Text - Icon (Leading)</DBNavigationItem>
<db-navigation-item icon="user">
- Text - Icons (Leading, Chevron)
-</db-navigation-item>
<li class="db-navigation-item" data-icon="user">
+ <menu class="db-sub-navigation" id="sub-navigation-033132043161655744"></menu>
+</li>
<DBNavigationItem icon="user">Text - Icon (Leading)</DBNavigationItem>
<DBNavigationItem icon="user">Text - Icon (Leading)</DBNavigationItem>
<db-navigation-item icon="user" [areaPopup]="true">Text - Icons (Leading, Chevron)</db-navigation-item>
<li class="db-navigation-item" data-icon="user">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -26,12 +24,10 @@
>
Text - Icons (Leading, Chevron)
</button>
- <menu class="db-sub-navigation" id="sub-navigation-9181700442809264"></menu>
-</li>
<DBNavigationItem icon="user">
- Text - Icons (Leading, Chevron)
-</DBNavigationItem>
<DBNavigationItem icon="user">
+ <menu class="db-sub-navigation" id="sub-navigation-03332505662775698"></menu>
+</li>
<DBNavigationItem icon="user" areaPopup>
Text - Icons (Leading, Chevron)
-</DBNavigationItem>
<db-navigation-item [areaPopup]="true">Text - Icon (Chevron)</db-navigation-item>
<li class="db-navigation-item">
+</DBNavigationItem>
<DBNavigationItem icon="user" :areaPopup="true">Text - Icons (Leading, Chevron)</DBNavigationItem>
<db-navigation-item [areaPopup]="true">Text - Icon (Chevron)</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -39,5 +35,5 @@
>
Text - Icon (Chevron)
</button>
- <menu class="db-sub-navigation" id="sub-navigation-6420376300256518"></menu>
-</li>
<DBNavigationItem areaPopup>Text - Icon (Chevron)</DBNavigationItem>
<DBNavigationItem :areaPopup="true">Text - Icon (Chevron)</DBNavigationItem>
\ No newline at end of file
+ <menu class="db-sub-navigation" id="sub-navigation-6067070493837545"></menu>
+</li>
<DBNavigationItem areaPopup>Text - Icon (Chevron)</DBNavigationItem>
<DBNavigationItem :areaPopup="true">Text - Icon (Chevron)</DBNavigationItem>
<db-navigation-item>Functional</db-navigation-item>
<li class="db-navigation-item">
+DB UI Mono
<db-navigation-item>Functional</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -6,17 +6,17 @@
>
Functional
</button>
- <menu class="db-sub-navigation" id="sub-navigation-4172457754504135"></menu>
-</li>
<DBNavigationItem>Functional</DBNavigationItem>
<DBNavigationItem>Functional</DBNavigationItem>
<db-navigation-item>Regular (Default)</db-navigation-item>
<li class="db-navigation-item">
+ <menu class="db-sub-navigation" id="sub-navigation-006912260536903192"></menu>
+</li>
<DBNavigationItem>Functional</DBNavigationItem>
<DBNavigationItem>Functional</DBNavigationItem>
<db-navigation-item>(Default) Regular</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
aria-expanded="false"
>
- Regular (Default)
+ (Default) Regular
</button>
- <menu class="db-sub-navigation" id="sub-navigation-33347066747838383"></menu>
-</li>
<DBNavigationItem>Regular (Default)</DBNavigationItem>
<DBNavigationItem>Regular (Default)</DBNavigationItem>
<db-navigation-item>Expressive</db-navigation-item>
<li class="db-navigation-item">
+ <menu class="db-sub-navigation" id="sub-navigation-8509374561153766"></menu>
+</li>
<DBNavigationItem>(Default) Regular</DBNavigationItem>
<DBNavigationItem>(Default) Regular</DBNavigationItem>
<db-navigation-item>Expressive</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -24,5 +24,5 @@
>
Expressive
</button>
- <menu class="db-sub-navigation" id="sub-navigation-6227478538106901"></menu>
-</li>
<DBNavigationItem>Expressive</DBNavigationItem>
<DBNavigationItem>Expressive</DBNavigationItem>
\ No newline at end of file
+ <menu class="db-sub-navigation" id="sub-navigation-37357420087376725"></menu>
+</li>
<DBNavigationItem>Expressive</DBNavigationItem>
<DBNavigationItem>Expressive</DBNavigationItem>
<db-navigation-item>Enabled (Default)/Hover/Pressed</db-navigation-item>
undefined
<DBNavigationItem>Enabled (Default)/Hover/Pressed</DBNavigationItem>
<DBNavigationItem>Enabled (Default)/Hover/Pressed</DBNavigationItem>
<db-navigation-item [active]="true">Active</db-navigation-item>
undefined
<DBNavigationItem active>Active</DBNavigationItem>
<DBNavigationItem :active="true">Active</DBNavigationItem>
<db-navigation-item [disabled]="true">Disabled</db-navigation-item>
undefined
<DBNavigationItem disabled>Disabled</DBNavigationItem>
<DBNavigationItem :disabled="true">Disabled</DBNavigationItem>
<db-navigation-item>Enabled (Default)/Hover/Pressed</db-navigation-item>
undefined
<DBNavigationItem>Enabled (Default)/Hover/Pressed</DBNavigationItem>
<DBNavigationItem>Enabled (Default)/Hover/Pressed</DBNavigationItem>
<db-navigation-item [active]="true">Active</db-navigation-item>
undefined
<DBNavigationItem active>Active</DBNavigationItem>
<DBNavigationItem :active="true">Active</DBNavigationItem>
<db-navigation-item [disabled]="true">Disabled</db-navigation-item>
undefined
<DBNavigationItem disabled>Disabled</DBNavigationItem>
<DBNavigationItem :disabled="true">Disabled</DBNavigationItem>
<db-navigation-item>Auto (Default)</db-navigation-item>
<li class="db-navigation-item">
+DB UI Mono
<db-navigation-item>(Default) Auto</db-navigation-item>
<li class="db-navigation-item">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
aria-expanded="false"
>
- Auto (Default)
+ (Default) Auto
</button>
- <menu class="db-sub-navigation" id="sub-navigation-1631473780535344"></menu>
-</li>
<DBNavigationItem>Auto (Default)</DBNavigationItem>
<DBNavigationItem>Auto (Default)</DBNavigationItem>
<db-navigation-item width="full">Full</db-navigation-item>
<li class="db-navigation-item" data-width="full">
+ <menu class="db-sub-navigation" id="sub-navigation-6105183435656534"></menu>
+</li>
<DBNavigationItem>(Default) Auto</DBNavigationItem>
<DBNavigationItem>(Default) Auto</DBNavigationItem>
<db-navigation-item width="full">Full</db-navigation-item>
<li class="db-navigation-item" data-width="full">
<button
class="db-navigation-item-expand-button"
aria-haspopup="false"
@@ -15,5 +15,5 @@
>
Full
</button>
- <menu class="db-sub-navigation" id="sub-navigation-5029232563234125"></menu>
-</li>
<DBNavigationItem width="full">Full</DBNavigationItem>
<DBNavigationItem width="full">Full</DBNavigationItem>
\ No newline at end of file
+ <menu class="db-sub-navigation" id="sub-navigation-6040615577804667"></menu>
+</li>
<DBNavigationItem width="full">Full</DBNavigationItem>
<DBNavigationItem width="full">Full</DBNavigationItem>
For general installation and configuration take a look at the ngx-components package.
//app.component.ts
@@ -40,4 +40,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/navigation-item/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
If you want to use sub-navigations for mobile you need to add a eventListner:click
on the db-navigation-item-expand-button
. This eventListener should set aria-expanded
to true
for the button
. This will open a static overlay for mobile/tablet devices with your db-sub-navigation
. For desktop devices it works by default with :hover
.
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
We try to set areaPopup
(has/hasn't sub-navigation) inside the component, but this doesn't work in all frameworks. If you encounter some problems you have the set areaPopup
with true/false
for sub-navigation or link
For general installation and configuration take a look at the v-components package.
We try to set areaPopup
(has/hasn't sub-navigation) inside the component, but this doesn't work in all frameworks. If you encounter some problems you have the set areaPopup
with true/false
for sub-navigation or link
<db-main-navigation>
+DB UI Mono
<db-main-navigation>
<db-navigation-item [active]="true">
<ng-container sub-navigation>
<db-navigation-item [active]="true">
@@ -109,11 +109,11 @@
</DBMainNavigation>
<DBMainNavigation>
<DBNavigationItem :active="true">
Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
Sub-Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
<a href="#">Sub-Sub-Navi-Item 1</a>
</DBNavigationItem>
@@ -133,7 +133,7 @@
<DBNavigationItem :disabled="true">
<a href="#">Navi-Item 3</a>
</DBNavigationItem>
- </DBMainNavigation>
<db-main-navigation>
+ </DBMainNavigation>
<db-main-navigation>
<db-navigation-item [active]="true">
<ng-container sub-navigation>
<db-navigation-item [active]="true">
@@ -244,11 +244,11 @@
</DBMainNavigation>
<DBMainNavigation>
<DBNavigationItem :active="true">
Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
Sub-Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
<a href="#">Sub-Sub-Navi-Item 1</a>
</DBNavigationItem>
@@ -268,7 +268,7 @@
<DBNavigationItem :disabled="true">
<a href="#">Navi-Item 3</a>
</DBNavigationItem>
- </DBMainNavigation>
<db-main-navigation>
+ </DBMainNavigation>
<db-main-navigation>
<db-navigation-item [active]="true">
<ng-container sub-navigation>
<db-navigation-item [active]="true">
@@ -379,11 +379,11 @@
</DBMainNavigation>
<DBMainNavigation>
<DBNavigationItem :active="true">
Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
Sub-Navi-Item 1
- <template v-slot:sub-navigation>
+ <template v-slot:subnavigation>
<DBNavigationItem :active="true">
<a href="#">Sub-Sub-Navi-Item 1</a>
</DBNavigationItem>
@@ -403,4 +403,4 @@
<DBNavigationItem :disabled="true">
<a href="#">Navi-Item 3</a>
</DBNavigationItem>
- </DBMainNavigation>
\ No newline at end of file
+ </DBMainNavigation>
For general installation and configuration look at the ngx-components package.
+// app.component.ts
+import { DBNavigation } from '@db-ui/ngx-components';
+
+@Component({
+ // ...
+ standalone: true,
+ imports: [..., DBNavigation, DBNavigationItem, NavigationContentDirective],
+ // ...
+})
+
+<!-- app.component.html -->
+
+<db-navigation>
+ <db-navigation-item [active]="true">
+ <ng-container sub-navigation>
+ <db-navigation-item [active]="true">
+ <ng-container *dbNavigationContent>
+ Sub-Navi-Item 1
+ </ng-container>
+ <ng-container sub-navigation>
+ <db-navigation-item [active]="true">
+ <ng-container *dbNavigationContent>
+ <a href="#">Sub-Sub-Navi-Item 1</a>
+ </ng-container>
+ </db-navigation-item>
+ <db-navigation-item>
+ <ng-container *dbNavigationContent>
+ <a href="#">Sub-Sub-Navi-Item 2</a>
+ </ng-container>
+ </db-navigation-item>
+ </ng-container>
+ </db-navigation-item>
+ <db-navigation-item>
+ <ng-container *dbNavigationContent>
+ <a href="#">Sub-Navi-Item 2</a>
+ </ng-container>
+ </db-navigation-item>
+ </ng-container>
+ <ng-container *dbNavigationContent> Navi-Item 1 </ng-container>
+ </db-navigation-item>
+ <db-navigation-item icon="user">
+ <ng-container *dbNavigationContent>
+ <a href="#">Navi-Item 2</a>
+ </ng-container>
+ </db-navigation-item>
+ <db-navigation-item [disabled]="true">
+ <ng-container *dbNavigationContent>
+ <a href="#">Navi-Item 3</a>
+ </ng-container>
+ </db-navigation-item>
+</db-navigation>
+
+You can set the property active
to a boolean value as in the example above.
+It will cause the navigation item to render in active style and implicitly
+set aria-current="page"
to the list element.
The component will also check for child element set to aria-current="page"
.
+Such elements are also displayed in active state.
+This makes the component integration with the Angular Router way more elegant
+compared to the first variant.
The component first needs to import the RouterLink
and RouterLinkActive
directives.
// app.component.ts
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { DBMainNavigation } from '@db-ui/ngx-components';
+
+@Component({
+ // ...
+ standalone: true,
+ imports: [
+ // ...
+ RouterLink,
+ RouterLinkActive,
+ DBMainNavigation
+ ],
+ // ...
+})
+
+Now you can use the Angular Routers routerLink
directive to define your targets.
+The active style is automatically set once an item receives the aria-current="page"
attribute.
<!-- app.component.html -->
+
+<db-main-navigation>
+ <db-navigation-item>
+ <ng-container *dbNavigationContent>
+ <a
+ routerLink="/"
+ ariaCurrentWhenActive="page"
+ [routerLinkActiveOptions]="{ exact: true }"
+ >
+ Home
+ </a>
+ </ng-container>
+ </db-navigation-item>
+ <db-navigation-item>
+ <ng-container *dbNavigationContent> Demo Pages </ng-container>
+ <ng-container sub-navigation>
+ <db-navigation-item>
+ <ng-container *dbNavigationContent>
+ <a routerLink="/demo/1" ariaCurrentWhenActive="page">
+ Demo Page 1
+ </a>
+ </ng-container>
+ <ng-container *dbNavigationContent>
+ <a routerLink="/demo/2" ariaCurrentWhenActive="page">
+ Demo Page 2
+ </a>
+ </ng-container>
+ </db-navigation-item>
+ </ng-container>
+ </db-navigation-item>
+</db-main-navigation>
+
For general installation and configuration look at the components package.
+<!-- index.html -->
+...
+<body>
+ <nav class="db-navigation">
+ <menu>
+ <li class="db-navigation-item" aria-current="page">
+ <button
+ class="db-navigation-item-expand-button"
+ aria-haspopup="true"
+ >
+ Navi-Item 1
+ </button>
+ <menu class="db-sub-navigation">
+ <li class="db-navigation-item" aria-current="page">
+ <button
+ class="db-navigation-item-expand-button"
+ aria-haspopup="true"
+ >
+ Sub-Navi-Item 1
+ </button>
+ <menu class="db-sub-navigation">
+ <li class="db-navigation-item" aria-current="page">
+ <a href="#">Sub-Sub-Navi-Item 1</a>
+ </li>
+
+ <li class="db-navigation-item">
+ <a href="#">Sub-Sub-Navi-Item 2</a>
+ </li>
+ </menu>
+ </li>
+
+ <li class="db-navigation-item">
+ <a href="#">Sub-Navi-Item 2</a>
+ </li>
+ </menu>
+ </li>
+
+ <li class="db-navigation-item" data-icon="user">
+ <a href="#">Navi-Item 2</a>
+ </li>
+
+ <li class="db-navigation-item" aria-disabled="true">
+ <a href="#">Navi-Item 3</a>
+ </li>
+ </menu>
+ </nav>
+</body>
+
++Note +For a general installation or migration process check out this documentation.
+
Before | Status | After | Description |
---|---|---|---|
cmp-mainnavigation | 🔁 | db-navigation |
Before | Status | After | Description |
---|---|---|---|
data | ❌ | ❌ | pass data via children / slot , moved a lot of the features to db-header |
siteName | ❌ | ❌ |
For general installation and configuration look at the react-components package.
+// App.tsx
+import { DBNavigation, DBNavigationItem } from "@db-ui/react-components";
+
+const App = () => (
+ <DBNavigation>
+ <DBNavigationItem
+ active
+ slotSubNavigation={
+ <>
+ <DBNavigationItem
+ active
+ slotSubNavigation={
+ <>
+ <DBNavigationItem active>
+ <a href="#">Sub-Sub-Navi-Item 1</a>
+ </DBNavigationItem>
+ <DBNavigationItem>
+ <a href="#">Sub-Sub-Navi-Item 2</a>
+ </DBNavigationItem>
+ </>
+ }
+ >
+ Sub-Navi-Item 1
+ </DBNavigationItem>
+ <DBNavigationItem>
+ <a href="#">Sub-Navi-Item 2</a>
+ </DBNavigationItem>
+ </>
+ }
+ >
+ Navi-Item 1
+ </DBNavigationItem>
+ <DBNavigationItem icon="user">
+ <a href="#">Navi-Item 2</a>
+ </DBNavigationItem>
+ <DBNavigationItem disabled>
+ <a href="#">Navi-Item 3</a>
+ </DBNavigationItem>
+ </DBNavigation>
+);
+
+export default App;
+
For general installation and configuration look at the v-components package.
+<!-- App.vue -->
+<script>
+import { DBNavigation, DBNavigationItem } from "@db-ui/v-components";
+</script>
+
+<template>
+ <DBNavigation>
+ <DBNavigationItem :active="true">
+ Navi-Item 1
+ <template v-slot:subnavigation>
+ <DBNavigationItem :active="true">
+ Sub-Navi-Item 1
+
+ <template v-slot:subnavigation>
+ <DBNavigationItem :active="true">
+ <a href="#">Sub-Sub-Navi-Item 1</a>
+ </DBNavigationItem>
+ <DBNavigationItem>
+ <a href="#">Sub-Sub-Navi-Item 2</a>
+ </DBNavigationItem>
+ </template>
+ </DBNavigationItem>
+ <DBNavigationItem>
+ <a href="#">Sub-Navi-Item 2</a>
+ </DBNavigationItem>
+ </template>
+ </DBNavigationItem>
+ <DBNavigationItem icon="user">
+ <a href="#">Navi-Item 2</a>
+ </DBNavigationItem>
+ <DBNavigationItem :disabled="true">
+ <a href="#">Navi-Item 3</a>
+ </DBNavigationItem>
+ </DBNavigation>
+</template>
+
+You can set the property active
to a boolean value as in the example above.
+It will cause the navigation item to render in active style and implicitly
+set aria-current="page"
to the list element.
The component will also check for child element set to aria-current="page"
.
+Such elements are also displayed in active state.
+This makes the component integration with the Vue Router way more elegant
+compared to the first variant.
Now you can use Vue Routers RouterLink
component to define your targets.
+The active style is automatically set once an item receives the aria-current="page"
attribute.
<!-- App.vue -->
+<script>
+import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
+</script>
+
+<template>
+ <DBMainNavigation>
+ <DBNavigationItem>
+ <RouterLink to="/" ariaCurrentValue="page">Home</RouterLink>
+ </DBNavigationItem>
+ <DBNavigationItem>
+ <template> Demo Pages </template>
+ <template #subnavigation>
+ <DBNavigationItem>
+ <RouterLink to="/demo/1" ariaCurrentValue="page">
+ Demo Page 1
+ </RouterLink>
+
+ <RouterLink to="/demo/2" ariaCurrentValue="page">
+ Demo Page 2
+ </RouterLink>
+ </DBNavigationItem>
+ </template>
+ </DBNavigationItem>
+ </DBMainNavigation>
+</template>
+
<db-notification behaviour="permanent">(Default) Permanent</db-notification>
<div class="db-notification">
+DB UI Mono
<db-notification behaviour="permanent">(Default) Permanent</db-notification>
<div class="db-notification">
<p>(Default) Permanent</p>
-</div>
<DBNotification behaviour="permanent">(Default) Permanent</DBNotification>
<DBNotification behaviour="permanent">(Default) Permanent</DBNotification>
<db-notification behaviour="closable">Closeable</db-notification>
<div class="db-notification">
+</div>
<DBNotification behaviour="permanent">(Default) Permanent</DBNotification>
<DBNotification behaviour="permanent">(Default) Permanent</DBNotification>
<db-notification behaviour="closable">Closeable</db-notification>
<div class="db-notification">
<p>Closeable</p>
<button
class="db-button"
@@ -11,4 +11,4 @@
>
Close Button
</button>
-</div>
<DBNotification behaviour="closable">Closeable</DBNotification>
<DBNotification behaviour="closable">Closeable</DBNotification>
\ No newline at end of file
+</div>
<DBNotification behaviour="closable">Closeable</DBNotification>
<DBNotification behaviour="closable">Closeable</DBNotification>
<db-notification behaviour="permanent">Text</db-notification>
undefined
<DBNotification behaviour="permanent">Text</DBNotification>
<DBNotification behaviour="permanent">Text</DBNotification>
<db-notification icon="information" behaviour="permanent">
+DB UI Mono
<db-notification behaviour="permanent">Text</db-notification>
undefined
<DBNotification behaviour="permanent">Text</DBNotification>
<DBNotification behaviour="permanent">Text</DBNotification>
<db-notification icon="information_circle" behaviour="permanent">
Text & Icon
-</db-notification>
undefined
<DBNotification icon="information" behaviour="permanent">
+</db-notification>
undefined
<DBNotification icon="information_circle" behaviour="permanent">
Text & Icon
-</DBNotification>
<DBNotification icon="information" behaviour="permanent">
+</DBNotification>
<DBNotification icon="information_circle" behaviour="permanent">
Text & Icon
-</DBNotification>
<db-notification [img]="true" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img behaviour="permanent">
+</DBNotification>
<db-notification [img]="true" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img behaviour="permanent">
Text & Preview Image
-</DBNotification>
<DBNotification :img="true" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" behaviour="permanent">
+</DBNotification>
<DBNotification :img="true" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" behaviour="permanent">
Text & Headline
</db-notification>
undefined
<DBNotification headline="Headline" behaviour="permanent">
Text & Headline
</DBNotification>
<DBNotification headline="Headline" behaviour="permanent">
Text & Headline
-</DBNotification>
<db-notification [link]="true" behaviour="permanent">Text & Textlink Block</db-notification>
undefined
<DBNotification link behaviour="permanent">
+</DBNotification>
<db-notification [link]="true" behaviour="permanent">Text & Textlink Block</db-notification>
undefined
<DBNotification link behaviour="permanent">
Text & Textlink Block
-</DBNotification>
<DBNotification :link="true" behaviour="permanent">Text & Textlink Block</DBNotification>
<db-notification [link]="true" linkVariant="inline" behaviour="permanent">Text & Textlink Inline</db-notification>
undefined
<DBNotification link linkVariant="inline" behaviour="permanent">
+</DBNotification>
<DBNotification :link="true" behaviour="permanent">Text & Textlink Block</DBNotification>
<db-notification [link]="true" linkVariant="inline" behaviour="permanent">Text & Textlink Inline</db-notification>
undefined
<DBNotification link linkVariant="inline" behaviour="permanent">
Text & Textlink Inline
-</DBNotification>
<DBNotification :link="true" linkVariant="inline" behaviour="permanent">Text & Textlink Inline</DBNotification>
<db-notification headline="Headline" [link]="true" linkVariant="inline">Text & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification headline="Headline" link linkVariant="inline">
+</DBNotification>
<DBNotification :link="true" linkVariant="inline" behaviour="permanent">Text & Textlink Inline</DBNotification>
<db-notification headline="Headline" [link]="true" linkVariant="inline">Text & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification headline="Headline" link linkVariant="inline">
Text & Headline & Textlink Inline & Cloaseable
-</DBNotification>
<DBNotification headline="Headline" :link="true" linkVariant="inline">Text & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification icon="information" headline="Headline" [link]="true" linkVariant="inline">Text & Icon & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
- icon="information"
+</DBNotification>
<DBNotification headline="Headline" :link="true" linkVariant="inline">Text & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification icon="information_circle" headline="Headline" [link]="true" linkVariant="inline">Text & Icon & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
+ icon="information_circle"
headline="Headline"
link
linkVariant="inline"
>
Text & Icon & Headline & Textlink Inline & Cloaseable
-</DBNotification>
<DBNotification icon="information" headline="Headline" :link="true" linkVariant="inline">Text & Icon & Headline & Textlink Inline & Cloaseable</DBNotification>
\ No newline at end of file
+</DBNotification>
<DBNotification icon="information_circle" headline="Headline" :link="true" linkVariant="inline">Text & Icon & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification variant="overlay" behaviour="permanent">
+DB UI Mono
<db-notification variant="overlay" behaviour="permanent">
Text
</db-notification>
undefined
<DBNotification variant="overlay" behaviour="permanent">
Text
</DBNotification>
<DBNotification variant="overlay" behaviour="permanent">
Text
-</DBNotification>
<db-notification icon="information" variant="overlay" behaviour="permanent">
+</DBNotification>
<db-notification
+ icon="information_circle"
+ variant="overlay"
+ behaviour="permanent"
+>
Text & Icon
-</db-notification>
undefined
<DBNotification icon="information" variant="overlay" behaviour="permanent">
+</db-notification>
undefined
<DBNotification
+ icon="information_circle"
+ variant="overlay"
+ behaviour="permanent"
+>
Text & Icon
-</DBNotification>
<DBNotification icon="information" variant="overlay" behaviour="permanent">
+</DBNotification>
<DBNotification
+ icon="information_circle"
+ variant="overlay"
+ behaviour="permanent"
+>
Text & Icon
-</DBNotification>
<db-notification [img]="true" variant="overlay" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img variant="overlay" behaviour="permanent">
+</DBNotification>
<db-notification [img]="true" variant="overlay" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img variant="overlay" behaviour="permanent">
Text & Preview Image
-</DBNotification>
<DBNotification :img="true" variant="overlay" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" variant="overlay" behaviour="permanent">
+</DBNotification>
<DBNotification :img="true" variant="overlay" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" variant="overlay" behaviour="permanent">
Text & Headline
</db-notification>
undefined
<DBNotification headline="Headline" variant="overlay" behaviour="permanent">
Text & Headline
</DBNotification>
<DBNotification headline="Headline" variant="overlay" behaviour="permanent">
Text & Headline
-</DBNotification>
<db-notification timestamp="10 min ago" variant="overlay" behaviour="permanent">
+</DBNotification>
<db-notification timestamp="10 min ago" variant="overlay" behaviour="permanent">
Text & Timed
</db-notification>
undefined
<DBNotification timestamp="10 min ago" variant="overlay" behaviour="permanent">
Text & Timed
</DBNotification>
<DBNotification timestamp="10 min ago" variant="overlay" behaviour="permanent">
Text & Timed
-</DBNotification>
<db-notification timestamp="10 min ago" variant="overlay">
+</DBNotification>
<db-notification timestamp="10 min ago" variant="overlay">
Text & Timed & Cloaseable
</db-notification>
undefined
<DBNotification timestamp="10 min ago" variant="overlay">
Text & Timed & Cloaseable
</DBNotification>
<DBNotification timestamp="10 min ago" variant="overlay">
Text & Timed & Cloaseable
-</DBNotification>
<db-notification headline="Headline" timestamp="10 min ago" variant="overlay">
+</DBNotification>
<db-notification headline="Headline" timestamp="10 min ago" variant="overlay">
Text & Headline & Timed & Cloaseable
</db-notification>
undefined
<DBNotification headline="Headline" timestamp="10 min ago" variant="overlay">
Text & Headline & Timed & Cloaseable
</DBNotification>
<DBNotification headline="Headline" timestamp="10 min ago" variant="overlay">
Text & Headline & Timed & Cloaseable
-</DBNotification>
<db-notification
- icon="information"
+</DBNotification>
<db-notification
+ icon="information_circle"
headline="Headline"
timestamp="10 min ago"
variant="overlay"
>
Text & Icon & Headline & Timed & Cloaseable
</db-notification>
undefined
<DBNotification
- icon="information"
+ icon="information_circle"
headline="Headline"
timestamp="10 min ago"
variant="overlay"
>
Text & Icon & Headline & Timed & Cloaseable
</DBNotification>
<DBNotification
- icon="information"
+ icon="information_circle"
headline="Headline"
timestamp="10 min ago"
variant="overlay"
>
Text & Icon & Headline & Timed & Cloaseable
-</DBNotification>
\ No newline at end of file
+</DBNotification>
<db-notification variant="standalone" behaviour="permanent">
+DB UI Mono
<db-notification variant="standalone" behaviour="permanent">
Text
</db-notification>
undefined
<DBNotification variant="standalone" behaviour="permanent">
Text
</DBNotification>
<DBNotification variant="standalone" behaviour="permanent">
Text
-</DBNotification>
<db-notification icon="information" variant="standalone" behaviour="permanent">
+</DBNotification>
<db-notification
+ icon="information_circle"
+ variant="standalone"
+ behaviour="permanent"
+>
Text & Icon
-</db-notification>
undefined
<DBNotification icon="information" variant="standalone" behaviour="permanent">
+</db-notification>
undefined
<DBNotification
+ icon="information_circle"
+ variant="standalone"
+ behaviour="permanent"
+>
Text & Icon
-</DBNotification>
<DBNotification icon="information" variant="standalone" behaviour="permanent">
+</DBNotification>
<DBNotification
+ icon="information_circle"
+ variant="standalone"
+ behaviour="permanent"
+>
Text & Icon
-</DBNotification>
<db-notification [img]="true" variant="standalone" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img variant="standalone" behaviour="permanent">
+</DBNotification>
<db-notification [img]="true" variant="standalone" behaviour="permanent">Text & Preview Image</db-notification>
undefined
<DBNotification img variant="standalone" behaviour="permanent">
Text & Preview Image
-</DBNotification>
<DBNotification :img="true" variant="standalone" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" variant="standalone" behaviour="permanent">
+</DBNotification>
<DBNotification :img="true" variant="standalone" behaviour="permanent">Text & Preview Image</DBNotification>
<db-notification headline="Headline" variant="standalone" behaviour="permanent">
Text & Headline
</db-notification>
undefined
<DBNotification headline="Headline" variant="standalone" behaviour="permanent">
Text & Headline
</DBNotification>
<DBNotification headline="Headline" variant="standalone" behaviour="permanent">
Text & Headline
-</DBNotification>
<db-notification [link]="true" variant="standalone" behaviour="permanent">Text & Textlink Block</db-notification>
undefined
<DBNotification link variant="standalone" behaviour="permanent">
+</DBNotification>
<db-notification [link]="true" variant="standalone" behaviour="permanent">Text & Textlink Block</db-notification>
undefined
<DBNotification link variant="standalone" behaviour="permanent">
Text & Textlink Block
-</DBNotification>
<DBNotification :link="true" variant="standalone" behaviour="permanent">Text & Textlink Block</DBNotification>
<db-notification [link]="true" linkVariant="inline" variant="standalone" behaviour="permanent">Text & Textlink Inline</db-notification>
undefined
<DBNotification
+</DBNotification>
<DBNotification :link="true" variant="standalone" behaviour="permanent">Text & Textlink Block</DBNotification>
<db-notification [link]="true" linkVariant="inline" variant="standalone" behaviour="permanent">Text & Textlink Inline</db-notification>
undefined
<DBNotification
link
linkVariant="inline"
variant="standalone"
behaviour="permanent"
>
Text & Textlink Inline
-</DBNotification>
<DBNotification :link="true" linkVariant="inline" variant="standalone" behaviour="permanent">Text & Textlink Inline</DBNotification>
<db-notification headline="Headline" [link]="true" linkVariant="inline" variant="standalone">Text & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
+</DBNotification>
<DBNotification :link="true" linkVariant="inline" variant="standalone" behaviour="permanent">Text & Textlink Inline</DBNotification>
<db-notification headline="Headline" [link]="true" linkVariant="inline" variant="standalone">Text & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
headline="Headline"
link
linkVariant="inline"
variant="standalone"
>
Text & Headline & Textlink Inline & Cloaseable
-</DBNotification>
<DBNotification headline="Headline" :link="true" linkVariant="inline" variant="standalone">Text & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification icon="information" headline="Headline" [link]="true" linkVariant="inline" variant="standalone">Text & Icon & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
- icon="information"
+</DBNotification>
<DBNotification headline="Headline" :link="true" linkVariant="inline" variant="standalone">Text & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification icon="information_circle" headline="Headline" [link]="true" linkVariant="inline" variant="standalone">Text & Icon & Headline & Textlink Inline & Cloaseable</db-notification>
undefined
<DBNotification
+ icon="information_circle"
headline="Headline"
link
linkVariant="inline"
variant="standalone"
>
Text & Icon & Headline & Textlink Inline & Cloaseable
-</DBNotification>
<DBNotification icon="information" headline="Headline" :link="true" linkVariant="inline" variant="standalone">Text & Icon & Headline & Textlink Inline & Cloaseable</DBNotification>
\ No newline at end of file
+</DBNotification>
<DBNotification icon="information_circle" headline="Headline" :link="true" linkVariant="inline" variant="standalone">Text & Icon & Headline & Textlink Inline & Cloaseable</DBNotification>
<db-notification headline="Headline" icon="information" behaviour="closable">
+DB UI Mono
<db-notification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
functional
-</db-notification>
<div class="db-notification" data-icon="information">
+</db-notification>
<div class="db-notification" data-icon="information_circle">
<h6>Headline</h6>
<p>functional</p>
<button
@@ -12,13 +16,25 @@
>
Close Button
</button>
-</div>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</div>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
functional
-</DBNotification>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</DBNotification>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
functional
-</DBNotification>
<db-notification headline="Headline" icon="information" behaviour="closable">
+</DBNotification>
<db-notification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
regular (Default)
-</db-notification>
<div class="db-notification" data-icon="information">
+</db-notification>
<div class="db-notification" data-icon="information_circle">
<h6>Headline</h6>
<p>regular (Default)</p>
<button
@@ -30,13 +46,25 @@
>
Close Button
</button>
-</div>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</div>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
regular (Default)
-</DBNotification>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</DBNotification>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
regular (Default)
-</DBNotification>
<db-notification headline="Headline" icon="information" behaviour="closable">
+</DBNotification>
<db-notification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
expressive
-</db-notification>
<div class="db-notification" data-icon="information">
+</db-notification>
<div class="db-notification" data-icon="information_circle">
<h6>Headline</h6>
<p>expressive</p>
<button
@@ -48,8 +76,16 @@
>
Close Button
</button>
-</div>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</div>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
expressive
-</DBNotification>
<DBNotification headline="Headline" icon="information" behaviour="closable">
+</DBNotification>
<DBNotification
+ headline="Headline"
+ icon="information_circle"
+ behaviour="closable"
+>
expressive
-</DBNotification>
\ No newline at end of file
+</DBNotification>
<db-notification type="alert" headline="Headline" behaviour="closable">
+DB UI Mono
<db-notification type="alert" headline="Headline" behaviour="closable">
(Default) Adaptive
</db-notification>
<div class="db-notification">
<h6>Headline</h6>
@@ -16,7 +16,7 @@
(Default) Adaptive
</DBNotification>
<DBNotification type="alert" headline="Headline" behaviour="closable">
(Default) Adaptive
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
type="alert"
semantic="neutral"
headline="Headline"
@@ -49,7 +49,7 @@
behaviour="closable"
>
Neutral
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
type="alert"
semantic="critical"
headline="Headline"
@@ -82,14 +82,14 @@
behaviour="closable"
>
Critical
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
type="alert"
- semantic="informational"
+ semantic="information_circleal"
headline="Headline"
behaviour="closable"
>
Informational
-</db-notification>
<div class="db-notification" data-semantic="informational">
+</db-notification>
<div class="db-notification" data-semantic="information_circleal">
<h6>Headline</h6>
<p>Informational</p>
<button
@@ -103,19 +103,19 @@
</button>
</div>
<DBNotification
type="alert"
- semantic="informational"
+ semantic="information_circleal"
headline="Headline"
behaviour="closable"
>
Informational
</DBNotification>
<DBNotification
type="alert"
- semantic="informational"
+ semantic="information_circleal"
headline="Headline"
behaviour="closable"
>
Informational
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
type="alert"
semantic="successful"
headline="Headline"
@@ -148,7 +148,7 @@
behaviour="closable"
>
Successful
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
type="alert"
semantic="warning"
headline="Headline"
@@ -181,4 +181,4 @@
behaviour="closable"
>
Warning
-</DBNotification>
\ No newline at end of file
+</DBNotification>
<db-notification
+DB UI Mono
<db-notification
variant="docked"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
(Default) Docked
-</db-notification>
<div class="db-notification" data-variant="docked" data-icon="information">
+</db-notification>
<div
+ class="db-notification"
+ data-variant="docked"
+ data-icon="information_circle"
+>
<h6>Headline</h6>
<p>(Default) Docked</p>
<button
@@ -20,25 +24,29 @@
</div>
<DBNotification
variant="docked"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
(Default) Docked
</DBNotification>
<DBNotification
variant="docked"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
(Default) Docked
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
variant="standalone"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
Standalone
-</db-notification>
<div class="db-notification" data-variant="standalone" data-icon="information">
+</db-notification>
<div
+ class="db-notification"
+ data-variant="standalone"
+ data-icon="information_circle"
+>
<h6>Headline</h6>
<p>Standalone</p>
<button
@@ -53,26 +61,30 @@
</div>
<DBNotification
variant="standalone"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
Standalone
</DBNotification>
<DBNotification
variant="standalone"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
>
Standalone
-</DBNotification>
<db-notification
+</DBNotification>
<db-notification
variant="overlay"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
timestamp="10 min ago"
>
Overlay
-</db-notification>
<div class="db-notification" data-variant="overlay" data-icon="information">
+</db-notification>
<div
+ class="db-notification"
+ data-variant="overlay"
+ data-icon="information_circle"
+>
<h6>Headline</h6>
<p>Overlay</p>
<span>10 min ago</span>
@@ -88,7 +100,7 @@
</div>
<DBNotification
variant="overlay"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
timestamp="10 min ago"
>
@@ -96,9 +108,9 @@
</DBNotification>
<DBNotification
variant="overlay"
headline="Headline"
- icon="information"
+ icon="information_circle"
behaviour="closable"
timestamp="10 min ago"
>
Overlay
-</DBNotification>
\ No newline at end of file
+</DBNotification>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-notification headline="Headline">Notification</db-notification>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -17,4 +17,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/notification/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -9,4 +9,4 @@classvariant ➡ typevariant--type anchor link
Before Status After Description notification
🔁 notification
Default notification with different look status
❌ ❌ Status can be changed by variants
🆕 inline
New styling with shadow and rounded corners (like card) type ➡ variantstype--variants anchor link
-
Before Status After Description 🆕 adaptive
Default: change colors based on background error
🔁 critical
'Red' colored notification to show error messages informative
🔁 informational
'Blue' colored notification to show information messages warning
🔁 warning
'Yellow' colored notification to show warning messages success
🔁 successful
'Green' colored notification to show success messages
Before | Status | After | Description |
---|---|---|---|
🆕 | adaptive | Default: change colors based on background | |
error | 🔁 | critical | 'Red' colored notification to show error messages |
informative | 🔁 | informational | 'Blue' colored notification to show information messages |
warning | 🔁 | warning | 'Yellow' colored notification to show warning messages |
success | 🔁 | successful | 'Green' colored notification to show success messages |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/notification/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/notification/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-page>functional</db-page>
<div class="db-page" data-fonts-loaded="false">
- <main class="db-main">functional</main>
-</div>
<DBPage>functional</DBPage>
<DBPage>functional</DBPage>
<db-page>regular (Default)</db-page>
<div class="db-page" data-fonts-loaded="false">
- <main class="db-main">regular (Default)</main>
-</div>
<DBPage>regular (Default)</DBPage>
<DBPage>regular (Default)</DBPage>
<db-page>expressive</db-page>
<div class="db-page" data-fonts-loaded="false">
- <main class="db-main">expressive</main>
-</div>
<DBPage>expressive</DBPage>
<DBPage>expressive</DBPage>
<db-page>Functional</db-page>
<div class="db-page" data-fonts-loaded="false">
+ <main class="db-main">Functional</main>
+</div>
<DBPage>Functional</DBPage>
<DBPage>Functional</DBPage>
<db-page>(Default) Regular</db-page>
<div class="db-page" data-fonts-loaded="false">
+ <main class="db-main">(Default) Regular</main>
+</div>
<DBPage>(Default) Regular</DBPage>
<DBPage>(Default) Regular</DBPage>
<db-page>Expressive</db-page>
<div class="db-page" data-fonts-loaded="false">
+ <main class="db-main">Expressive</main>
+</div>
<DBPage>Expressive</DBPage>
<DBPage>Expressive</DBPage>
For general installation and configuration take a look at the ngx-components package.
//app.component.ts
@@ -19,4 +19,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/page/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/page/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
Before | Status | After | Description |
---|---|---|---|
rea-page | 🔁 | db-page |
Before | Status | After | Description |
---|---|---|---|
rea-page | 🔁 | db-page |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -11,4 +11,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/page/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/page/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-popover content="Popover" id="popover-13">
- Animation no delay (Default)
-</db-popover>
<i id="popover-13" class="db-popover">
- Animation no delay (Default)
-</i>
<DBPopover content="Popover" id="popover-13">
- Animation no delay (Default)
-</DBPopover>
<DBPopover content="Popover" id="popover-13">
- Animation no delay (Default)
-</DBPopover>
<db-popover content="Popover" delay="slow" id="popover-14">
+DB UI Mono
<db-popover id="popover-13">(Default) Animation no delay</db-popover>
<div id="popover-13" class="db-popover">
+ <article class="db-popover-content">(Default) Animation no delay</article>
+</div>
<DBPopover id="popover-13">(Default) Animation no delay</DBPopover>
<DBPopover id="popover-13">(Default) Animation no delay</DBPopover>
<db-popover delay="slow" id="popover-14">
Delay slow
-</db-popover>
<i id="popover-14" class="db-popover" data-delay="slow">
+</db-popover>
<div id="popover-14" class="db-popover">
+ <article class="db-popover-content" data-delay="slow">
+ Delay slow
+ </article>
+</div>
<DBPopover delay="slow" id="popover-14">
Delay slow
-</i>
<DBPopover content="Popover" delay="slow" id="popover-14">
+</DBPopover>
<DBPopover delay="slow" id="popover-14">
Delay slow
-</DBPopover>
<DBPopover content="Popover" delay="slow" id="popover-14">
- Delay slow
-</DBPopover>
<db-popover content="Popover" delay="fast" id="popover-15">
- Delay fast
-</db-popover>
<i id="popover-15" class="db-popover" data-delay="fast">
+</DBPopover>
<db-popover delay="fast" id="popover-15">
Delay fast
-</i>
<DBPopover content="Popover" delay="fast" id="popover-15">
+</db-popover>
<div id="popover-15" class="db-popover">
+ <article class="db-popover-content" data-delay="fast">
+ Delay fast
+ </article>
+</div>
<DBPopover delay="fast" id="popover-15">
Delay fast
-</DBPopover>
<DBPopover content="Popover" delay="fast" id="popover-15">
+</DBPopover>
<DBPopover delay="fast" id="popover-15">
Delay fast
-</DBPopover>
<db-popover content="Popover" animation="disabled" id="popover-16">
- No animation
-</db-popover>
<i id="popover-16" class="db-popover" data-animation="disabled">
+</DBPopover>
<db-popover animation="disabled" id="popover-16">
No animation
-</i>
<DBPopover content="Popover" animation="disabled" id="popover-16">
+</db-popover>
<div id="popover-16" class="db-popover">
+ <article class="db-popover-content" data-animation="disabled">
+ No animation
+ </article>
+</div>
<DBPopover animation="disabled" id="popover-16">
No animation
-</DBPopover>
<DBPopover content="Popover" animation="disabled" id="popover-16">
+</DBPopover>
<DBPopover animation="disabled" id="popover-16">
No animation
-</DBPopover>
\ No newline at end of file
+</DBPopover>
<db-popover content="Popover" id="popover-01">
- functional
-</db-popover>
<i id="popover-01" class="db-popover">
- functional
-</i>
<DBPopover content="Popover" id="popover-01">
- functional
-</DBPopover>
<DBPopover content="Popover" id="popover-01">
- functional
-</DBPopover>
<db-popover content="Popover" id="popover-02">
- regular (Default)
-</db-popover>
<i id="popover-02" class="db-popover">
- regular (Default)
-</i>
<DBPopover content="Popover" id="popover-02">
- regular (Default)
-</DBPopover>
<DBPopover content="Popover" id="popover-02">
- regular (Default)
-</DBPopover>
<db-popover content="Popover" id="popover-03">
- expressive
-</db-popover>
<i id="popover-03" class="db-popover">
- expressive
-</i>
<DBPopover content="Popover" id="popover-03">
- expressive
-</DBPopover>
<DBPopover content="Popover" id="popover-03">
- expressive
-</DBPopover>
<db-popover id="popover-01">Functional</db-popover>
<div id="popover-01" class="db-popover">
+ <article class="db-popover-content">Functional</article>
+</div>
<DBPopover id="popover-01">Functional</DBPopover>
<DBPopover id="popover-01">Functional</DBPopover>
<db-popover id="popover-02">(Default) Regular</db-popover>
<div id="popover-02" class="db-popover">
+ <article class="db-popover-content">(Default) Regular</article>
+</div>
<DBPopover id="popover-02">(Default) Regular</DBPopover>
<DBPopover id="popover-02">(Default) Regular</DBPopover>
<db-popover id="popover-03">Expressive</db-popover>
<div id="popover-03" class="db-popover">
+ <article class="db-popover-content">Expressive</article>
+</div>
<DBPopover id="popover-03">Expressive</DBPopover>
<DBPopover id="popover-03">Expressive</DBPopover>
<db-popover content="Popover" id="popover-11">
- No gap (Default)
-</db-popover>
<i id="popover-11" class="db-popover">
- No gap (Default)
-</i>
<DBPopover content="Popover" id="popover-11">
- No gap (Default)
-</DBPopover>
<DBPopover content="Popover" id="popover-11">
- No gap (Default)
-</DBPopover>
<db-popover content="Popover" [gap]="true" id="popover-12">With gap</db-popover>
<i id="popover-12" class="db-popover" data-gap="true">
+DB UI Mono
<db-popover id="popover-11">(Default) No gap</db-popover>
<div id="popover-11" class="db-popover">
+ <article class="db-popover-content">(Default) No gap</article>
+</div>
<DBPopover id="popover-11">(Default) No gap</DBPopover>
<DBPopover id="popover-11">(Default) No gap</DBPopover>
<db-popover [gap]="true" id="popover-12">With gap</db-popover>
<div id="popover-12" class="db-popover">
+ <article class="db-popover-content" data-gap="true">
+ With gap
+ </article>
+</div>
<DBPopover gap id="popover-12">
With gap
-</i>
<DBPopover content="Popover" gap id="popover-12">
- With gap
-</DBPopover>
<DBPopover content="Popover" :gap="true" id="popover-12">With gap</DBPopover>
\ No newline at end of file
+</DBPopover>
<DBPopover :gap="true" id="popover-12">With gap</DBPopover>
<db-popover content="Popover" placement="bottom-start" id="popover-07-start">
+DB UI Mono
<db-popover placement="bottom-start" id="popover-07-start">
bottom-start
-</db-popover>
<i id="popover-07-start" class="db-popover" data-placement="bottom-start">
+</db-popover>
<div id="popover-07-start" class="db-popover">
+ <article class="db-popover-content" data-placement="bottom-start">
+ bottom-start
+ </article>
+</div>
<DBPopover placement="bottom-start" id="popover-07-start">
bottom-start
-</i>
<DBPopover content="Popover" placement="bottom-start" id="popover-07-start">
+</DBPopover>
<DBPopover placement="bottom-start" id="popover-07-start">
bottom-start
-</DBPopover>
<DBPopover content="Popover" placement="bottom-start" id="popover-07-start">
- bottom-start
-</DBPopover>
<db-popover content="Popover" placement="bottom" id="popover-07">
- bottom (Default)
-</db-popover>
<i id="popover-07" class="db-popover" data-placement="bottom">
- bottom (Default)
-</i>
<DBPopover content="Popover" placement="bottom" id="popover-07">
- bottom (Default)
-</DBPopover>
<DBPopover content="Popover" placement="bottom" id="popover-07">
- bottom (Default)
-</DBPopover>
<db-popover content="Popover" placement="bottom-end" id="popover-07-end">
- bottom-end
-</db-popover>
<i id="popover-07-end" class="db-popover" data-placement="bottom-end">
+</DBPopover>
<db-popover placement="bottom" id="popover-07">
+ (Default) bottom
+</db-popover>
<div id="popover-07" class="db-popover">
+ <article class="db-popover-content" data-placement="bottom">
+ (Default) bottom
+ </article>
+</div>
<DBPopover placement="bottom" id="popover-07">
+ (Default) bottom
+</DBPopover>
<DBPopover placement="bottom" id="popover-07">
+ (Default) bottom
+</DBPopover>
<db-popover placement="bottom-end" id="popover-07-end">
bottom-end
-</i>
<DBPopover content="Popover" placement="bottom-end" id="popover-07-end">
+</db-popover>
<div id="popover-07-end" class="db-popover">
+ <article class="db-popover-content" data-placement="bottom-end">
+ bottom-end
+ </article>
+</div>
<DBPopover placement="bottom-end" id="popover-07-end">
bottom-end
-</DBPopover>
<DBPopover content="Popover" placement="bottom-end" id="popover-07-end">
+</DBPopover>
<DBPopover placement="bottom-end" id="popover-07-end">
bottom-end
-</DBPopover>
<db-popover content="Popover" placement="left-start" id="popover-09-start">
- left-start
-</db-popover>
<i id="popover-09-start" class="db-popover" data-placement="left-start">
+</DBPopover>
<db-popover placement="left-start" id="popover-09-start">
left-start
-</i>
<DBPopover content="Popover" placement="left-start" id="popover-09-start">
+</db-popover>
<div id="popover-09-start" class="db-popover">
+ <article class="db-popover-content" data-placement="left-start">
+ left-start
+ </article>
+</div>
<DBPopover placement="left-start" id="popover-09-start">
left-start
-</DBPopover>
<DBPopover content="Popover" placement="left-start" id="popover-09-start">
+</DBPopover>
<DBPopover placement="left-start" id="popover-09-start">
left-start
-</DBPopover>
<db-popover content="Popover" placement="left" id="popover-09">
+</DBPopover>
<db-popover placement="left" id="popover-09">
left
-</db-popover>
<i id="popover-09" class="db-popover" data-placement="left">
+</db-popover>
<div id="popover-09" class="db-popover">
+ <article class="db-popover-content" data-placement="left">
+ left
+ </article>
+</div>
<DBPopover placement="left" id="popover-09">
left
-</i>
<DBPopover content="Popover" placement="left" id="popover-09">
+</DBPopover>
<DBPopover placement="left" id="popover-09">
left
-</DBPopover>
<DBPopover content="Popover" placement="left" id="popover-09">
- left
-</DBPopover>
<db-popover content="Popover" placement="left-end" id="popover-09-end">
- left-end
-</db-popover>
<i id="popover-09-end" class="db-popover" data-placement="left-end">
+</DBPopover>
<db-popover placement="left-end" id="popover-09-end">
left-end
-</i>
<DBPopover content="Popover" placement="left-end" id="popover-09-end">
+</db-popover>
<div id="popover-09-end" class="db-popover">
+ <article class="db-popover-content" data-placement="left-end">
+ left-end
+ </article>
+</div>
<DBPopover placement="left-end" id="popover-09-end">
left-end
-</DBPopover>
<DBPopover content="Popover" placement="left-end" id="popover-09-end">
+</DBPopover>
<DBPopover placement="left-end" id="popover-09-end">
left-end
-</DBPopover>
<db-popover content="Popover" placement="right-start" id="popover-10-start">
- right-start
-</db-popover>
<i id="popover-10-start" class="db-popover" data-placement="right-start">
+</DBPopover>
<db-popover placement="right-start" id="popover-10-start">
right-start
-</i>
<DBPopover content="Popover" placement="right-start" id="popover-10-start">
+</db-popover>
<div id="popover-10-start" class="db-popover">
+ <article class="db-popover-content" data-placement="right-start">
+ right-start
+ </article>
+</div>
<DBPopover placement="right-start" id="popover-10-start">
right-start
-</DBPopover>
<DBPopover content="Popover" placement="right-start" id="popover-10-start">
+</DBPopover>
<DBPopover placement="right-start" id="popover-10-start">
right-start
-</DBPopover>
<db-popover content="Popover" placement="right" id="popover-10">
+</DBPopover>
<db-popover placement="right" id="popover-10">
right
-</db-popover>
<i id="popover-10" class="db-popover" data-placement="right">
+</db-popover>
<div id="popover-10" class="db-popover">
+ <article class="db-popover-content" data-placement="right">
+ right
+ </article>
+</div>
<DBPopover placement="right" id="popover-10">
right
-</i>
<DBPopover content="Popover" placement="right" id="popover-10">
+</DBPopover>
<DBPopover placement="right" id="popover-10">
right
-</DBPopover>
<DBPopover content="Popover" placement="right" id="popover-10">
- right
-</DBPopover>
<db-popover content="Popover" placement="right-end" id="popover-10-end">
- right-end
-</db-popover>
<i id="popover-10-end" class="db-popover" data-placement="right-end">
+</DBPopover>
<db-popover placement="right-end" id="popover-10-end">
right-end
-</i>
<DBPopover content="Popover" placement="right-end" id="popover-10-end">
+</db-popover>
<div id="popover-10-end" class="db-popover">
+ <article class="db-popover-content" data-placement="right-end">
+ right-end
+ </article>
+</div>
<DBPopover placement="right-end" id="popover-10-end">
right-end
-</DBPopover>
<DBPopover content="Popover" placement="right-end" id="popover-10-end">
+</DBPopover>
<DBPopover placement="right-end" id="popover-10-end">
right-end
-</DBPopover>
<db-popover content="Popover" placement="top-start" id="popover-08-start">
- top-start
-</db-popover>
<i id="popover-08-start" class="db-popover" data-placement="top-start">
+</DBPopover>
<db-popover placement="top-start" id="popover-08-start">
top-start
-</i>
<DBPopover content="Popover" placement="top-start" id="popover-08-start">
+</db-popover>
<div id="popover-08-start" class="db-popover">
+ <article class="db-popover-content" data-placement="top-start">
+ top-start
+ </article>
+</div>
<DBPopover placement="top-start" id="popover-08-start">
top-start
-</DBPopover>
<DBPopover content="Popover" placement="top-start" id="popover-08-start">
+</DBPopover>
<DBPopover placement="top-start" id="popover-08-start">
top-start
-</DBPopover>
<db-popover content="Popover" placement="top" id="popover-08">
+</DBPopover>
<db-popover placement="top" id="popover-08">
top
-</db-popover>
<i id="popover-08" class="db-popover" data-placement="top">
+</db-popover>
<div id="popover-08" class="db-popover">
+ <article class="db-popover-content" data-placement="top">
+ top
+ </article>
+</div>
<DBPopover placement="top" id="popover-08">
top
-</i>
<DBPopover content="Popover" placement="top" id="popover-08">
+</DBPopover>
<DBPopover placement="top" id="popover-08">
top
-</DBPopover>
<DBPopover content="Popover" placement="top" id="popover-08">
- top
-</DBPopover>
<db-popover content="Popover" placement="top-end" id="popover-08-end">
- top-end
-</db-popover>
<i id="popover-08-end" class="db-popover" data-placement="top-end">
+</DBPopover>
<db-popover placement="top-end" id="popover-08-end">
top-end
-</i>
<DBPopover content="Popover" placement="top-end" id="popover-08-end">
+</db-popover>
<div id="popover-08-end" class="db-popover">
+ <article class="db-popover-content" data-placement="top-end">
+ top-end
+ </article>
+</div>
<DBPopover placement="top-end" id="popover-08-end">
top-end
-</DBPopover>
<DBPopover content="Popover" placement="top-end" id="popover-08-end">
+</DBPopover>
<DBPopover placement="top-end" id="popover-08-end">
top-end
-</DBPopover>
\ No newline at end of file
+</DBPopover>
<db-popover content="Popover" spacing="small" id="popover-04">
- Small (Default)
-</db-popover>
<i id="popover-04" class="db-popover" data-spacing="small">
- Small (Default)
-</i>
<DBPopover content="Popover" spacing="small" id="popover-04">
- Small (Default)
-</DBPopover>
<DBPopover content="Popover" spacing="small" id="popover-04">
- Small (Default)
-</DBPopover>
<db-popover content="Popover" spacing="medium" id="popover-05">
+DB UI Mono
<db-popover spacing="small" id="popover-04">
+ (Default) Small
+</db-popover>
<div id="popover-04" class="db-popover">
+ <article class="db-popover-content" data-spacing="small">
+ (Default) Small
+ </article>
+</div>
<DBPopover spacing="small" id="popover-04">
+ (Default) Small
+</DBPopover>
<DBPopover spacing="small" id="popover-04">
+ (Default) Small
+</DBPopover>
<db-popover spacing="medium" id="popover-05">
Medium
-</db-popover>
<i id="popover-05" class="db-popover" data-spacing="medium">
+</db-popover>
<div id="popover-05" class="db-popover">
+ <article class="db-popover-content" data-spacing="medium">
+ Medium
+ </article>
+</div>
<DBPopover spacing="medium" id="popover-05">
Medium
-</i>
<DBPopover content="Popover" spacing="medium" id="popover-05">
+</DBPopover>
<DBPopover spacing="medium" id="popover-05">
Medium
-</DBPopover>
<DBPopover content="Popover" spacing="medium" id="popover-05">
- Medium
-</DBPopover>
<db-popover content="Popover" spacing="none" id="popover-06">
- None
-</db-popover>
<i id="popover-06" class="db-popover" data-spacing="none">
+</DBPopover>
<db-popover spacing="none" id="popover-06">
None
-</i>
<DBPopover content="Popover" spacing="none" id="popover-06">
+</db-popover>
<div id="popover-06" class="db-popover">
+ <article class="db-popover-content" data-spacing="none">
+ None
+ </article>
+</div>
<DBPopover spacing="none" id="popover-06">
None
-</DBPopover>
<DBPopover content="Popover" spacing="none" id="popover-06">
+</DBPopover>
<DBPopover spacing="none" id="popover-06">
None
-</DBPopover>
\ No newline at end of file
+</DBPopover>
<db-popover
+DB UI Mono
<db-popover
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="popover-17"
>
- Auto (Default)
-</db-popover>
<i id="popover-17" class="db-popover">
- Auto (Default)
-</i>
<DBPopover
+ (Default) Auto
+</db-popover>
<div
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="popover-17"
+ class="db-popover"
>
- Auto (Default)
+ <article class="db-popover-content">(Default) Auto</article>
+</div>
<DBPopover
+ content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
+ id="popover-17"
+>
+ (Default) Auto
</DBPopover>
<DBPopover
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="popover-17"
>
- Auto (Default)
-</DBPopover>
<db-popover
+ (Default) Auto
+</DBPopover>
<db-popover
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
width="fixed"
id="popover-18"
>
Fixed
-</db-popover>
<i id="popover-18" class="db-popover" data-width="fixed">
- Fixed
-</i>
<DBPopover
+</db-popover>
<div
+ content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
+ id="popover-18"
+ class="db-popover"
+>
+ <article class="db-popover-content" data-width="fixed">
+ Fixed
+ </article>
+</div>
<DBPopover
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
width="fixed"
id="popover-18"
@@ -35,4 +45,4 @@
id="popover-18"
>
Fixed
-</DBPopover>
\ No newline at end of file
+</DBPopover>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -13,8 +13,9 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
-<db-button describedbyid="popover-01">
- Hover on me to open Popover
- <db-popover id="popover-01">Popover</db-popover>
-</db-button>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
...
<body>
- <button class="db-button" aria-describedby="popover-01">
- Hover on me to open Popover
- <i class="db-popover" id="popover-01">Popover</i>
- </button>
+ <div class="db-popover">
+ <button aria-haspopup="true" class="db-button" type="button">
+ Hover on me to open Popover
+ </button>
+ <article class="db-popover-content">
+ Use any html code here like e.g. a <code>button</code>:
+ <button type="button">Test</button>
+ </article>
+ </div>
</body>
-
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
import { DBPopover, DBButton } from "@db-ui/react-components";
const App = () => (
- <DBButton describedbyid="popover-01">
- Hover on me to open Popover
- <DBPopover id="popover-01">Popover</DBPopover>
- </DBButton>
+ <DBPopover slotTrigger={<DBButton>Hover on me to open Popover</DBButton>}>
+ Use any html code here like e.g. a <code>button</code>:
+ <button type="button">Test</button>
+ </DBPopover>
);
export default App;
-
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -7,9 +7,12 @@ Use component{"props":{"pageProps":{}},"page":"/components/popover/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-radio name="Content">(Default) Label</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Content"
+ />
+ (Default) Label
+</label>
<DBRadio name="Content">(Default) Label</DBRadio>
<DBRadio name="Content">(Default) Label</DBRadio>
<db-radio name="Content" variant="hidden">
+ Hidden Label
+</db-radio>
<label data-variant="hidden" class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Content"
+ />
+ Hidden Label
+</label>
<DBRadio name="Content" variant="hidden">
+ Hidden Label
+</DBRadio>
<DBRadio name="Content" variant="hidden">
+ Hidden Label
+</DBRadio>
<db-radio name="Density" value="functional">
- functional
+DB UI Mono
<db-radio name="Density" value="functional">
+ Functional
</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
<input
type="radio"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
value="functional"
/>
- functional
+ Functional
</label>
<DBRadio name="Density" value="functional">
- functional
+ Functional
</DBRadio>
<DBRadio name="Density" value="functional">
- functional
-</DBRadio>
<db-radio name="Density" value="regular">
- regular (Default)
+ Functional
+</DBRadio>
<db-radio name="Density" value="regular">
+ (Default) Regular
</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
<input
type="radio"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
value="regular"
/>
- regular (Default)
+ (Default) Regular
</label>
<DBRadio name="Density" value="regular">
- regular (Default)
+ (Default) Regular
</DBRadio>
<DBRadio name="Density" value="regular">
- regular (Default)
-</DBRadio>
<db-radio name="Density" value="expressive">
- expressive
+ (Default) Regular
+</DBRadio>
<db-radio name="Density" value="expressive">
+ Expressive
</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
<input
type="radio"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Density"
value="expressive"
/>
- expressive
+ Expressive
</label>
<DBRadio name="Density" value="expressive">
- expressive
+ Expressive
</DBRadio>
<DBRadio name="Density" value="expressive">
- expressive
-</DBRadio>
\ No newline at end of file
+ Expressive
+</DBRadio>
<db-radio name="Interaction States">(Default) Enabled</db-radio>
undefined
<DBRadio name="Interaction States">(Default) Enabled</DBRadio>
<DBRadio name="Interaction States">(Default) Enabled</DBRadio>
<db-radio name="Interaction States" [disabled]="true">Disabled</db-radio>
undefined
<DBRadio name="Interaction States" disabled>
+ Disabled
+</DBRadio>
<DBRadio name="Interaction States" :disabled="true">Disabled</DBRadio>
<db-radio name="Requirement">(Default) Optional</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="Requirement" />
+DB UI Mono
<db-radio name="Requirement">(Default) Optional</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Requirement"
+ />
(Default) Optional
-</label>
<DBRadio name="Requirement">(Default) Optional</DBRadio>
<DBRadio name="Requirement">(Default) Optional</DBRadio>
<db-radio name="Requirement" [required]="true" [invalid]="true">Required</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+</label>
<DBRadio name="Requirement">(Default) Optional</DBRadio>
<DBRadio name="Requirement">(Default) Optional</DBRadio>
<db-radio name="Requirement" [required]="true">Required</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
<input
type="radio"
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
name="Requirement"
- aria-invalid="true"
required=""
/>
Required
-</label>
<DBRadio name="Requirement" required invalid>
+</label>
<DBRadio name="Requirement" required>
Required
-</DBRadio>
<DBRadio name="Requirement" :required="true" :invalid="true">Required</DBRadio>
\ No newline at end of file
+</DBRadio>
<DBRadio name="Requirement" :required="true">Required</DBRadio>
<db-radio name="Size">Default</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="Size" />
- Default
-</label>
<DBRadio name="Size">Default</DBRadio>
<DBRadio name="Size">Default</DBRadio>
<db-radio name="Size" size="small">
+DB UI Mono
<db-radio name="Size">(Default) Medium</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Size"
+ />
+ (Default) Medium
+</label>
<DBRadio name="Size">(Default) Medium</DBRadio>
<DBRadio name="Size">(Default) Medium</DBRadio>
<db-radio name="Size" size="small">
Small
</db-radio>
<label data-size="small" class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="Size" />
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="Size"
+ />
Small
</label>
<DBRadio name="Size" size="small">
Small
</DBRadio>
<DBRadio name="Size" size="small">
Small
-</DBRadio>
\ No newline at end of file
+</DBRadio>
<db-radio name="States">Default</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="States" />
- Default
-</label>
<DBRadio name="States">Default</DBRadio>
<DBRadio name="States">Default</DBRadio>
<db-radio name="States" [checked]="true">Checked</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="States" checked="" />
- Checked
+DB UI Mono
<db-radio name="States">(Default) Unselected</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States"
+ />
+ (Default) Unselected
+</label>
<DBRadio name="States">(Default) Unselected</DBRadio>
<DBRadio name="States">(Default) Unselected</DBRadio>
<db-radio name="States Required" [required]="true">Unselected - Invalid</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States Required"
+ required=""
+ />
+ Unselected - Invalid
+</label>
<DBRadio name="States Required" required>
+ Unselected - Invalid
+</DBRadio>
<DBRadio name="States Required" :required="true">Unselected - Invalid</DBRadio>
<db-radio name="States" [checked]="true">Selected</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States"
+ checked=""
+ />
+ Selected
</label>
<DBRadio name="States" checked>
- Checked
-</DBRadio>
<DBRadio name="States" :checked="true">Checked</DBRadio>
<db-radio name="States" [disabled]="true">Disabled</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
- <input type="radio" id="OVERWRITE_DEFAULT_ID" name="States" disabled="" />
- Disabled
-</label>
<DBRadio name="States" disabled>
- Disabled
-</DBRadio>
<DBRadio name="States" :disabled="true">Disabled</DBRadio>
\ No newline at end of file
+ Selected
+</DBRadio>
<DBRadio name="States" :checked="true">Selected</DBRadio>
<db-radio name="States Required" [required]="true" [checked]="true">Selected - Valid</db-radio>
<label class="db-radio" for="OVERWRITE_DEFAULT_ID">
+ <input
+ type="radio"
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ name="States Required"
+ required=""
+ checked=""
+ />
+ Selected - Valid
+</label>
<DBRadio name="States Required" required checked>
+ Selected - Valid
+</DBRadio>
<DBRadio name="States Required" :required="true" :checked="true">Selected - Valid</DBRadio>
<db-radio name="Content">(Default) Label</db-radio>
undefined
<DBRadio name="Content">(Default) Label</DBRadio>
<DBRadio name="Content">(Default) Label</DBRadio>
<db-radio name="Content" variant="hidden">
- Hidden Label
-</db-radio>
undefined
<DBRadio name="Content" variant="hidden">
- Hidden Label
-</DBRadio>
<DBRadio name="Content" variant="hidden">
- Hidden Label
-</DBRadio>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -76,4 +76,4 @@ How to use with Template Driven F
}
coming soon … if your interested in contributing, you're very welcome ;)
coming soon … if your interested in contributing, you're very welcome ;)
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -13,4 +13,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/radio/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description elm-radio
🔁 db-radio
idid anchor link
-
Before Status After Description input_id
🔁 id
Before | Status | After | Description |
---|---|---|---|
input_id | 🔁 | id |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -24,4 +24,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/radio/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -23,4 +23,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/radio/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-section>functional</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
- <div>functional</div>
-</section>
<DBSection>functional</DBSection>
<DBSection>functional</DBSection>
<db-section>regular (Default)</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
- <div>regular (Default)</div>
-</section>
<DBSection>regular (Default)</DBSection>
<DBSection>regular (Default)</DBSection>
<db-section>expressive</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
- <div>expressive</div>
-</section>
<DBSection>expressive</DBSection>
<DBSection>expressive</DBSection>
<db-section>Functional</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+ <div>Functional</div>
+</section>
<DBSection>Functional</DBSection>
<DBSection>Functional</DBSection>
<db-section>(Default) Regular</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+ <div>(Default) Regular</div>
+</section>
<DBSection>(Default) Regular</DBSection>
<DBSection>(Default) Regular</DBSection>
<db-section>Expressive</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+ <div>Expressive</div>
+</section>
<DBSection>Expressive</DBSection>
<DBSection>Expressive</DBSection>
<db-section>Medium (Default)</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
- <div>Medium (Default)</div>
-</section>
<DBSection>Medium (Default)</DBSection>
<DBSection>Medium (Default)</DBSection>
<db-section size="large">Large</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="large" class="db-section">
+DB UI Mono
<db-section>(Default) Medium</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+ <div>(Default) Medium</div>
+</section>
<DBSection>(Default) Medium</DBSection>
<DBSection>(Default) Medium</DBSection>
<db-section size="large">Large</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="large" class="db-section">
<div>Large</div>
-</section>
<DBSection size="large">Large</DBSection>
<DBSection size="large">Large</DBSection>
<db-section size="small">Small</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="small" class="db-section">
+</section>
<DBSection size="large">Large</DBSection>
<DBSection size="large">Large</DBSection>
<db-section size="small">Small</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="small" class="db-section">
<div>Small</div>
-</section>
<DBSection size="small">Small</DBSection>
<DBSection size="small">Small</DBSection>
\ No newline at end of file
+</section>
<DBSection size="small">Small</DBSection>
<DBSection size="small">Small</DBSection>
<db-section>Full (Default)</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
- <div>Full (Default)</div>
-</section>
<DBSection>Full (Default)</DBSection>
<DBSection>Full (Default)</DBSection>
<db-section variant="medium">Medium</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+DB UI Mono
<db-section>(Default) Full</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+ <div>(Default) Full</div>
+</section>
<DBSection>(Default) Full</DBSection>
<DBSection>(Default) Full</DBSection>
<db-section variant="medium">Medium</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
<div data-variant="medium">Medium</div>
-</section>
<DBSection variant="medium">Medium</DBSection>
<DBSection variant="medium">Medium</DBSection>
<db-section variant="large">Large</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
+</section>
<DBSection variant="medium">Medium</DBSection>
<DBSection variant="medium">Medium</DBSection>
<db-section variant="large">Large</db-section>
<section id="OVERWRITE_DEFAULT_ID" data-size="medium" class="db-section">
<div data-variant="large">Large</div>
-</section>
<DBSection variant="large">Large</DBSection>
<DBSection variant="large">Large</DBSection>
\ No newline at end of file
+</section>
<DBSection variant="large">Large</DBSection>
<DBSection variant="large">Large</DBSection>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -14,4 +14,4 @@ Load componentUse componentuse-component anchor link
<!-- app.component.html -->
<db-section variant="full">Section</db-section>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -8,4 +8,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/section/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -7,4 +7,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/section/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/section/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Text</db-select>
<div class="db-select">
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Text</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -30,9 +31,10 @@
label="Label"
>
(Default) Text
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Text</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" icon="x_placeholder">Text - Leading Icon</db-select>
<div class="db-select" data-icon="x_placeholder">
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Text</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" icon="x_placeholder">Text - Leading Icon</db-select>
<div class="db-select" data-icon="x_placeholder">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -63,4 +65,4 @@
icon="x_placeholder"
>
Text - Leading Icon
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" icon="x_placeholder">Text - Leading Icon</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" icon="x_placeholder">Text - Leading Icon</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Functional</db-select>
<div class="db-select">
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Functional</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -30,9 +31,10 @@
label="Label"
>
Functional
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Functional</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Regular</db-select>
<div class="db-select">
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Functional</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Regular</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -62,9 +64,10 @@
label="Label"
>
(Default) Regular
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Regular</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Expressive</db-select>
<div class="db-select">
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Regular</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Expressive</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -94,4 +97,4 @@
label="Label"
>
Expressive
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Expressive</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">Expressive</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Optional</db-select>
<div class="db-select">
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Optional</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
>
@@ -30,9 +31,10 @@
label="Label"
>
(Default) Optional
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Optional</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" [required]="true">Required</db-select>
<div class="db-select">
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Optional</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" [required]="true">Required</db-select>
<div class="db-select">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<select
+ aria-invalid="false"
required=""
id="OVERWRITE_DEFAULT_ID"
aria-describedby="OVERWRITE_DEFAULT_ID-placeholder"
@@ -64,4 +66,4 @@
required
>
Required
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" :required="true">Required</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" :required="true">Required</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="floating">(Default) Empty</db-select>
undefined
<DBSelect
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="floating">(Default) Empty</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
variant="floating"
>
(Default) Empty
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="floating">(Default) Empty</DBSelect>
<db-select [options]="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled" variant="floating">Filled</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="floating">(Default) Empty</DBSelect>
<db-select [options]="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled" variant="floating">Filled</db-select>
undefined
<DBSelect
options={[{ value: "Filled" }, { value: "Option 2" }]}
label="Label"
value="Filled"
variant="floating"
>
Filled
-</DBSelect>
<DBSelect :options="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled" variant="floating">Filled</DBSelect>
<db-select [options]="[{'value':'Disabled'},{'value':'Option 2'}]" label="Label" [disabled]="true" variant="floating" value="Disabled">Disabled</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled" variant="floating">Filled</DBSelect>
<db-select [options]="[{'value':'Disabled'},{'value':'Option 2'}]" label="Label" [disabled]="true" variant="floating" value="Disabled">Disabled</db-select>
undefined
<DBSelect
options={[{ value: "Disabled" }, { value: "Option 2" }]}
label="Label"
disabled
@@ -19,4 +19,4 @@
value="Disabled"
>
Disabled
-</DBSelect>
<DBSelect :options="[{'value':'Disabled'},{'value':'Option 2'}]" label="Label" :disabled="true" variant="floating" value="Disabled">Disabled</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Disabled'},{'value':'Option 2'}]" label="Label" :disabled="true" variant="floating" value="Disabled">Disabled</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Empty</db-select>
undefined
<DBSelect
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Empty</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
>
(Default) Empty
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Empty</DBSelect>
<db-select [options]="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled">Filled</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Empty</DBSelect>
<db-select [options]="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled">Filled</db-select>
undefined
<DBSelect
options={[{ value: "Filled" }, { value: "Option 2" }]}
label="Label"
value="Filled"
>
Filled
-</DBSelect>
<DBSelect :options="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled">Filled</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" [disabled]="true">Disabled</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Filled'},{'value':'Option 2'}]" label="Label" value="Filled">Filled</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" [disabled]="true">Disabled</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
disabled
>
Disabled
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" :disabled="true">Disabled</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" :disabled="true">Disabled</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Basic</db-select>
undefined
<DBSelect
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Basic</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
>
(Default) Basic
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Basic</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" message="Helper Message">Helper Message</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Basic</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" message="Helper Message">Helper Message</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
message="Helper Message"
>
Helper Message
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" message="Helper Message">Helper Message</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" message="Helper Message">Helper Message</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Label Above</db-select>
undefined
<DBSelect
+DB UI Mono
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Label Above</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
>
(Default) Label Above
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Label Above</DBSelect>
<db-select [options]="[{'value':'Floating Label'},{'value':'Option 2'}]" label="Label" variant="floating" value="Floating Label">Floating Label</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label">(Default) Label Above</DBSelect>
<db-select [options]="[{'value':'Floating Label'},{'value':'Option 2'}]" label="Label" variant="floating" value="Floating Label">Floating Label</db-select>
undefined
<DBSelect
options={[{ value: "Floating Label" }, { value: "Option 2" }]}
label="Label"
variant="floating"
value="Floating Label"
>
Floating Label
-</DBSelect>
<DBSelect :options="[{'value':'Floating Label'},{'value':'Option 2'}]" label="Label" variant="floating" value="Floating Label">Floating Label</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="hidden">Hidden Label</db-select>
undefined
<DBSelect
+</DBSelect>
<DBSelect :options="[{'value':'Floating Label'},{'value':'Option 2'}]" label="Label" variant="floating" value="Floating Label">Floating Label</DBSelect>
<db-select [options]="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="hidden">Hidden Label</db-select>
undefined
<DBSelect
options={[{ value: "Option 1" }, { value: "Option 2" }]}
label="Label"
variant="hidden"
>
Hidden Label
-</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="hidden">Hidden Label</DBSelect>
\ No newline at end of file
+</DBSelect>
<DBSelect :options="[{'value':'Option 1'},{'value':'Option 2'}]" label="Label" variant="hidden">Hidden Label</DBSelect>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -17,4 +17,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/select/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/select/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description elm-select
🔁 db-select
selectselect anchor link
-
Before Status After Description multiple
❌ We removed this attribute for now, there are no valid designs for this use case. size
❌ We removed this attribute for now, there are no valid designs for this use case.
Before | Status | After | Description |
---|---|---|---|
multiple | ❌ | We removed this attribute for now, there are no valid designs for this use case. | |
size | ❌ | We removed this attribute for now, there are no valid designs for this use case. |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/select/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/select/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the ngx-components package.
You can't use the component standalone!
@@ -25,4 +25,4 @@For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -72,4 +72,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-list/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-list/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-list/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the ngx-components package.
You can't use the component standalone!
@@ -25,4 +25,4 @@For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -72,4 +72,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-panel/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-panel/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab-panel/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-tab label="Auto Width (Default)">Auto Width (Default)</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>Auto Width (Default)<!-- -->Auto Width (Default)</label>
<DBTab label="Auto Width (Default)">Auto Width (Default)</DBTab>
<DBTab label="Auto Width (Default)">Auto Width (Default)</DBTab>
<db-tab label="Width full" width="full">
+DB UI Mono
<db-tab label="(Default) Auto Width">(Default) Auto Width</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>(Default) Auto Width<!-- -->(Default) Auto Width</label></li>
<DBTab label="(Default) Auto Width">(Default) Auto Width</DBTab>
<DBTab label="(Default) Auto Width">(Default) Auto Width</DBTab>
<db-tab label="Width full" width="full">
Width full
-</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" data-width="full" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>Width full<!-- -->Width full</label>
<DBTab label="Width full" width="full">
+</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>Width full<!-- -->Width full</label></li>
<DBTab label="Width full" width="full">
Width full
</DBTab>
<DBTab label="Width full" width="full">
Width full
-</DBTab>
\ No newline at end of file
+</DBTab>
<db-tab label="(Default) Text">(Default) Text</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>(Default) Text<!-- -->(Default) Text</label>
<DBTab label="(Default) Text">(Default) Text</DBTab>
<DBTab label="(Default) Text">(Default) Text</DBTab>
<db-tab label="Text - Icon (Leading)" icon="x_placeholder">
+DB UI Mono
<db-tab label="(Default) Text">(Default) Text</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>(Default) Text<!-- -->(Default) Text</label></li>
<DBTab label="(Default) Text">(Default) Text</DBTab>
<DBTab label="(Default) Text">(Default) Text</DBTab>
<db-tab label="Text - Icon (Leading)" icon="x_placeholder">
Text - Icon (Leading)
-</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" data-icon="x_placeholder" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>Text - Icon (Leading)<!-- -->Text - Icon (Leading)</label>
<DBTab label="Text - Icon (Leading)" icon="x_placeholder">
+</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID" data-icon="x_placeholder"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>Text - Icon (Leading)<!-- -->Text - Icon (Leading)</label></li>
<DBTab label="Text - Icon (Leading)" icon="x_placeholder">
Text - Icon (Leading)
</DBTab>
<DBTab label="Text - Icon (Leading)" icon="x_placeholder">
Text - Icon (Leading)
-</DBTab>
<db-tab label="Text - Icon (Trailing)" iconAfter="x_placeholder">
+</DBTab>
<db-tab label="Text - Icon (Trailing)" iconAfter="x_placeholder">
Text - Icon (Trailing)
-</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" data-icon-after="x_placeholder" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>Text - Icon (Trailing)<!-- -->Text - Icon (Trailing)</label>
<DBTab label="Text - Icon (Trailing)" iconAfter="x_placeholder">
+</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID" data-icon-after="x_placeholder"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>Text - Icon (Trailing)<!-- -->Text - Icon (Trailing)</label></li>
<DBTab label="Text - Icon (Trailing)" iconAfter="x_placeholder">
Text - Icon (Trailing)
</DBTab>
<DBTab label="Text - Icon (Trailing)" iconAfter="x_placeholder">
Text - Icon (Trailing)
-</DBTab>
<db-tab icon="x_placeholder" [noText]="true">Icon</db-tab>
<label
- role="tab"
- for="OVERWRITE_DEFAULT_ID"
- data-icon="x_placeholder"
- data-no-text="true"
- class="db-tab"
->
- <input type="radio" id="OVERWRITE_DEFAULT_ID" />
+</DBTab>
<db-tab icon="x_placeholder" [noText]="true">Icon</db-tab>
<li role="tab" class="db-tab">
+ <label
+ for="OVERWRITE_DEFAULT_ID"
+ data-icon="x_placeholder"
+ data-no-text="true"
+ >
+ <input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID" />
+ Icon
+ </label>
+</li>
<DBTab icon="x_placeholder" noText>
Icon
-</label>
<DBTab icon="x_placeholder" noText>
- Icon
-</DBTab>
<DBTab icon="x_placeholder" :noText="true">Icon</DBTab>
\ No newline at end of file
+</DBTab>
<DBTab icon="x_placeholder" :noText="true">Icon</DBTab>
<db-tab label="Left" width="full">
+DB UI Mono
<db-tab label="Left" width="full">
Left
</db-tab>
undefined
<DBTab label="Left" width="full">
Left
</DBTab>
<DBTab label="Left" width="full">
Left
-</DBTab>
<db-tab label="Centered" width="full" alignment="center">
+</DBTab>
<db-tab label="Centered" width="full" alignment="center">
Centered
</db-tab>
undefined
<DBTab label="Centered" width="full" alignment="center">
Centered
</DBTab>
<DBTab label="Centered" width="full" alignment="center">
Centered
-</DBTab>
\ No newline at end of file
+</DBTab>
<db-tab label="functional">functional</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>functional<!-- -->functional</label>
<DBTab label="functional">functional</DBTab>
<DBTab label="functional">functional</DBTab>
<db-tab label="regular (Default)">regular (Default)</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>regular (Default)<!-- -->regular (Default)</label>
<DBTab label="regular (Default)">regular (Default)</DBTab>
<DBTab label="regular (Default)">regular (Default)</DBTab>
<db-tab label="expressive">expressive</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>expressive<!-- -->expressive</label>
<DBTab label="expressive">expressive</DBTab>
<DBTab label="expressive">expressive</DBTab>
<db-tab label="functional">Functional</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>functional<!-- -->Functional</label></li>
<DBTab label="functional">Functional</DBTab>
<DBTab label="functional">Functional</DBTab>
<db-tab label="(Default) Regular">(Default) Regular</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>(Default) Regular<!-- -->(Default) Regular</label></li>
<DBTab label="(Default) Regular">(Default) Regular</DBTab>
<DBTab label="(Default) Regular">(Default) Regular</DBTab>
<db-tab label="expressive">Expressive</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>expressive<!-- -->Expressive</label></li>
<DBTab label="expressive">Expressive</DBTab>
<DBTab label="expressive">Expressive</DBTab>
<db-tab label="(Default) Enabled">(Default) Enabled</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>(Default) Enabled<!-- -->(Default) Enabled</label>
<DBTab label="(Default) Enabled">(Default) Enabled</DBTab>
<DBTab label="(Default) Enabled">(Default) Enabled</DBTab>
<db-tab label="active" [active]="true">active</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" id="OVERWRITE_DEFAULT_ID"/>active<!-- -->active</label>
<DBTab label="active" active>
+DB UI Mono
<db-tab label="(Default) Enabled">(Default) Enabled</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>(Default) Enabled<!-- -->(Default) Enabled</label></li>
<DBTab label="(Default) Enabled">(Default) Enabled</DBTab>
<DBTab label="(Default) Enabled">(Default) Enabled</DBTab>
<db-tab label="active" [active]="true">active</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" id="OVERWRITE_DEFAULT_ID"/>active<!-- -->active</label></li>
<DBTab label="active" active>
active
-</DBTab>
<DBTab label="active" :active="true">active</DBTab>
<db-tab label="active" [disabled]="true">disabled</db-tab>
<label role="tab" for="OVERWRITE_DEFAULT_ID" class="db-tab"><input type="radio" disabled="" id="OVERWRITE_DEFAULT_ID"/>active<!-- -->disabled</label>
<DBTab label="active" disabled>
+</DBTab>
<DBTab label="active" :active="true">active</DBTab>
<db-tab label="active" [disabled]="true">disabled</db-tab>
<li role="tab" class="db-tab"><label for="OVERWRITE_DEFAULT_ID"><input type="radio" role="tab" disabled="" id="OVERWRITE_DEFAULT_ID"/>active<!-- -->disabled</label></li>
<DBTab label="active" disabled>
disabled
-</DBTab>
<DBTab label="active" :disabled="true">disabled</DBTab>
\ No newline at end of file
+</DBTab>
<DBTab label="active" :disabled="true">disabled</DBTab>
For general installation and configuration take a look at the ngx-components package.
You can't use the component standalone!
@@ -25,4 +25,4 @@For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -72,4 +72,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -7,4 +7,4 @@DB UI Core ➡ DB UI Componentsclassclass anchor link
Before Status After Description cmp-db-tab
🔁 db-tab
namename anchor link
-
Before Status After Description name
❌ ❌ It should be used with db-tabs
which will add a thename
fromdb-tabs
to all tabs all at one.
Before | Status | After | Description |
---|---|---|---|
name | ❌ | ❌ | It should be used with db-tabs which will add a the name from db-tabs to all tabs all at one. |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tab/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-tabs [initialSelectedIndex]="1">
+DB UI Mono
<db-tabs [initialSelectedIndex]="1">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -87,7 +87,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
- </DBTabs>
<db-tabs [initialSelectedMode]="manually">
+ </DBTabs>
<db-tabs [initialSelectedMode]="manually">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -176,4 +176,4 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
- </DBTabs>
\ No newline at end of file
+ </DBTabs>
<db-tabs>
+DB UI Mono
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -87,7 +87,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs orientation="vertical">
+</DBTabs>
<db-tabs orientation="vertical">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -176,4 +176,4 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
\ No newline at end of file
+</DBTabs>
<db-tabs>
+DB UI Mono
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -87,7 +87,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs behaviour="arrows">
+</DBTabs>
<db-tabs behaviour="arrows">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -176,7 +176,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs>
+</DBTabs>
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -265,4 +265,4 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
\ No newline at end of file
+</DBTabs>
<db-tabs>
+DB UI Mono
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -87,7 +87,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs>
+</DBTabs>
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -176,7 +176,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs>
+</DBTabs>
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -265,4 +265,4 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
\ No newline at end of file
+</DBTabs>
<db-tabs>
+DB UI Mono
<db-tabs>
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -87,7 +87,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs width="full">
+</DBTabs>
<db-tabs width="full">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -176,7 +176,7 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
<db-tabs width="full" alignment="center">
+</DBTabs>
<db-tabs width="full" alignment="center">
<db-tab-list>
<db-tab>Tab 1</db-tab>
<db-tab>Tab 2</db-tab>
@@ -265,4 +265,4 @@
<DBTabPanel>Tab Panel 1</DBTabPanel>
<DBTabPanel>Tab Panel 2</DBTabPanel>
<DBTabPanel>Tab Panel 3</DBTabPanel>
-</DBTabs>
\ No newline at end of file
+</DBTabs>
For general installation and configuration take a look at the ngx-components package.
You can't use the component standalone!
@@ -25,4 +25,4 @@For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -72,4 +72,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tabs/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
Before | Status | After | Description |
---|---|---|---|
cmp-tab-bar | 🔁 | db-tabs |
Before | Status | After | Description |
---|---|---|---|
cmp-tab-bar | 🔁 | db-tabs |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tabs/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tabs/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-tag>Static (Default)</db-tag>
<div class="db-tag">Static (Default)</div>
<DBTag>Static (Default)</DBTag>
<DBTag>Static (Default)</DBTag>
<db-tag>
+DB UI Mono
<db-tag>(Default) Static</db-tag>
<div class="db-tag">(Default) Static</div>
<DBTag>(Default) Static</DBTag>
<DBTag>(Default) Static</DBTag>
<db-tag>
<db-button>Interactive Button</db-button>
</db-tag>
<div class="db-tag">
<button class="db-button">Interactive Button</button>
@@ -6,7 +6,7 @@
<DBButton>Interactive Button</DBButton>
</DBTag>
<DBTag>
<DBButton>Interactive Button</DBButton>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-link>Interactive Link</db-link>
</db-tag>
<div class="db-tag">
<a class="db-link">Interactive Link</a>
@@ -14,7 +14,7 @@
<DBLink>Interactive Link</DBLink>
</DBTag>
<DBTag>
<DBLink>Interactive Link</DBLink>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-checkbox>Interactive Checkbox</db-checkbox>
</db-tag>
<div class="db-tag">
<input type="checkbox" class="db-checkbox" id="checkbox-element" />
@@ -23,7 +23,7 @@
<DBCheckbox>Interactive Checkbox</DBCheckbox>
</DBTag>
<DBTag>
<DBCheckbox>Interactive Checkbox</DBCheckbox>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-radio name="radio01">Interactive Radio 1</db-radio>
</db-tag>
<div class="db-tag">
<input
@@ -37,7 +37,7 @@
<DBRadio name="radio01">Interactive Radio 1</DBRadio>
</DBTag>
<DBTag>
<DBRadio name="radio01">Interactive Radio 1</DBRadio>
-</DBTag>
<db-tag component="radio" identifier="radio01" [code]="{'angular':'<db-tag><db-radio name='radio01'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio01' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Radio 2</db-tag>
<div class="db-tag">Interactive Radio 2</div>
<DBTag
+</DBTag>
<db-tag component="radio" identifier="radio01" [code]="{'angular':'<db-tag><db-radio name='radio01'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio01' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Radio 2</db-tag>
<div class="db-tag">Interactive Radio 2</div>
<DBTag
component="radio"
identifier="radio01"
code={{
@@ -50,11 +50,11 @@
}}
>
Interactive Radio 2
-</DBTag>
<DBTag component="radio" identifier="radio01" :code="{'angular':'<db-tag><db-radio name='radio01'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio01' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Radio 2</DBTag>
<db-tag behaviour="removable">Removeable</db-tag>
<div class="db-tag">
+</DBTag>
<DBTag component="radio" identifier="radio01" :code="{'angular':'<db-tag><db-radio name='radio01'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio01' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio01'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Radio 2</DBTag>
<db-tag behaviour="removable">Removeable</db-tag>
<div class="db-tag">
Removeable
<button
- class="db-button db-tab-remove-button"
title="Remove tag"
+ class="db-button db-tab-remove-button"
data-icon="cross"
data-size="small"
data-variant="ghost"
@@ -62,4 +62,4 @@
>
Remove tag
</button>
-</div>
<DBTag behaviour="removable">Removeable</DBTag>
<DBTag behaviour="removable">Removeable</DBTag>
\ No newline at end of file
+</div>
<DBTag behaviour="removable">Removeable</DBTag>
<DBTag behaviour="removable">Removeable</DBTag>
<db-tag>Text (Default)</db-tag>
<div class="db-tag">Text (Default)</div>
<DBTag>Text (Default)</DBTag>
<DBTag>Text (Default)</DBTag>
<db-tag icon="user" [noText]="true">Icon</db-tag>
<div class="db-tag" data-icon="user" data-no-text="true">
+DB UI Mono
<db-tag>(Default) Text</db-tag>
<div class="db-tag">(Default) Text</div>
<DBTag>(Default) Text</DBTag>
<DBTag>(Default) Text</DBTag>
<db-tag icon="user" [noText]="true">Icon</db-tag>
<div class="db-tag" data-icon="user" data-no-text="true">
Icon
</div>
<DBTag icon="user" noText>
Icon
-</DBTag>
<DBTag icon="user" :noText="true">Icon</DBTag>
<db-tag icon="user">Icon & Text</db-tag>
<div class="db-tag" data-icon="user">
+</DBTag>
<DBTag icon="user" :noText="true">Icon</DBTag>
<db-tag icon="user">Icon & Text</db-tag>
<div class="db-tag" data-icon="user">
Icon & Text
-</div>
<DBTag icon="user">Icon & Text</DBTag>
<DBTag icon="user">Icon & Text</DBTag>
\ No newline at end of file
+</div>
<DBTag icon="user">Icon & Text</DBTag>
<DBTag icon="user">Icon & Text</DBTag>
<db-tag>functional</db-tag>
<div class="db-tag">functional</div>
<DBTag>functional</DBTag>
<DBTag>functional</DBTag>
<db-tag>regular (Default)</db-tag>
<div class="db-tag">regular (Default)</div>
<DBTag>regular (Default)</DBTag>
<DBTag>regular (Default)</DBTag>
<db-tag>expressive</db-tag>
<div class="db-tag">expressive</div>
<DBTag>expressive</DBTag>
<DBTag>expressive</DBTag>
<db-tag>Functional</db-tag>
<div class="db-tag">Functional</div>
<DBTag>Functional</DBTag>
<DBTag>Functional</DBTag>
<db-tag>(Default) Regular</db-tag>
<div class="db-tag">(Default) Regular</div>
<DBTag>(Default) Regular</DBTag>
<DBTag>(Default) Regular</DBTag>
<db-tag>Expressive</db-tag>
<div class="db-tag">Expressive</div>
<DBTag>Expressive</DBTag>
<DBTag>Expressive</DBTag>
<db-tag>Weak (Default)</db-tag>
<div class="db-tag">Weak (Default)</div>
<DBTag>Weak (Default)</DBTag>
<DBTag>Weak (Default)</DBTag>
<db-tag emphasis="strong">Strong</db-tag>
<div class="db-tag" data-emphasis="strong">
+DB UI Mono
<db-tag>(Default) Weak</db-tag>
<div class="db-tag">(Default) Weak</div>
<DBTag>(Default) Weak</DBTag>
<DBTag>(Default) Weak</DBTag>
<db-tag emphasis="strong">Strong</db-tag>
<div class="db-tag" data-emphasis="strong">
Strong
-</div>
<DBTag emphasis="strong">Strong</DBTag>
<DBTag emphasis="strong">Strong</DBTag>
\ No newline at end of file
+</div>
<DBTag emphasis="strong">Strong</DBTag>
<DBTag emphasis="strong">Strong</DBTag>
<db-tag>
+DB UI Mono
<db-tag>
<db-button>Interactive Button</db-button>
</db-tag>
<div class="db-tag">
<button class="db-button">Interactive Button</button>
@@ -6,7 +6,7 @@
<DBButton>Interactive Button</DBButton>
</DBTag>
<DBTag>
<DBButton>Interactive Button</DBButton>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-link>Interactive Link</db-link>
</db-tag>
<div class="db-tag">
<a class="db-link">Interactive Link</a>
@@ -14,7 +14,7 @@
<DBLink>Interactive Link</DBLink>
</DBTag>
<DBTag>
<DBLink>Interactive Link</DBLink>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-checkbox>Interactive Checkbox</db-checkbox>
</db-tag>
<div class="db-tag">
<input type="checkbox" class="db-checkbox" id="checkbox-element" />
@@ -23,7 +23,7 @@
<DBCheckbox>Interactive Checkbox</DBCheckbox>
</DBTag>
<DBTag>
<DBCheckbox>Interactive Checkbox</DBCheckbox>
-</DBTag>
<db-tag>
+</DBTag>
<db-tag>
<db-radio name="radio02">Interactive Radio 1</db-radio>
</db-tag>
<div class="db-tag">
<input
@@ -37,7 +37,7 @@
<DBRadio name="radio02">Interactive Radio 1</DBRadio>
</DBTag>
<DBTag>
<DBRadio name="radio02">Interactive Radio 1</DBRadio>
-</DBTag>
<db-tag component="radio" emphasis="strong" icon="user" identifier="radio02" [code]="{'angular':'<db-tag><db-radio name='radio02'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio02' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Strong Radio 2 with Icon</db-tag>
<div class="db-tag" data-emphasis="strong" data-icon="user">
+</DBTag>
<db-tag component="radio" emphasis="strong" icon="user" identifier="radio02" [code]="{'angular':'<db-tag><db-radio name='radio02'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio02' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Strong Radio 2 with Icon</db-tag>
<div class="db-tag" data-emphasis="strong" data-icon="user">
Interactive Strong Radio 2 with Icon
</div>
<DBTag
component="radio"
@@ -54,4 +54,4 @@
}}
>
Interactive Strong Radio 2 with Icon
-</DBTag>
<DBTag component="radio" emphasis="strong" icon="user" identifier="radio02" :code="{'angular':'<db-tag><db-radio name='radio02'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio02' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Strong Radio 2 with Icon</DBTag>
\ No newline at end of file
+</DBTag>
<DBTag component="radio" emphasis="strong" icon="user" identifier="radio02" :code="{'angular':'<db-tag><db-radio name='radio02'>Interactive Radio 2</db-radio></db-tag>','html':'<div class='db-tag'><input type='radio' class='db-checkbox' id='checkbox-element' name='radio02' /><label for='checkbox-element'>Interactive Radio 2</label></div>','react':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>','vue':'<DBTag><DBRadio name='radio02'>Interactive Radio 2</DBRadio></DBTag>'}">Interactive Strong Radio 2 with Icon</DBTag>
<db-tag>No Overflow (Default)</db-tag>
<div class="db-tag">No Overflow (Default)</div>
<DBTag>No Overflow (Default)</DBTag>
<DBTag>No Overflow (Default)</DBTag>
<db-tag [overflow]="true">With Overflow (max-width)</db-tag>
<div class="db-tag" data-overflow="true">
+DB UI Mono
<db-tag>(Default) No Overflow</db-tag>
<div class="db-tag">(Default) No Overflow</div>
<DBTag>(Default) No Overflow</DBTag>
<DBTag>(Default) No Overflow</DBTag>
<db-tag [overflow]="true">With Overflow (max-width)</db-tag>
<div class="db-tag" data-overflow="true">
With Overflow (max-width)
-</div>
<DBTag overflow>With Overflow (max-width)</DBTag>
<DBTag :overflow="true">With Overflow (max-width)</DBTag>
\ No newline at end of file
+</div>
<DBTag overflow>With Overflow (max-width)</DBTag>
<DBTag :overflow="true">With Overflow (max-width)</DBTag>
<db-tag>Adaptive (Default)</db-tag>
<div class="db-tag">Adaptive (Default)</div>
<DBTag>Adaptive (Default)</DBTag>
<DBTag>Adaptive (Default)</DBTag>
<db-tag semantic="neutral">Neutral</db-tag>
<div class="db-tag" data-semantic="neutral">
+DB UI Mono
<db-tag>(Default) Adaptive</db-tag>
<div class="db-tag">(Default) Adaptive</div>
<DBTag>(Default) Adaptive</DBTag>
<DBTag>(Default) Adaptive</DBTag>
<db-tag semantic="neutral">Neutral</db-tag>
<div class="db-tag" data-semantic="neutral">
Neutral
-</div>
<DBTag semantic="neutral">Neutral</DBTag>
<DBTag semantic="neutral">Neutral</DBTag>
<db-tag semantic="critical">Critical</db-tag>
<div class="db-tag" data-semantic="critical">
+</div>
<DBTag semantic="neutral">Neutral</DBTag>
<DBTag semantic="neutral">Neutral</DBTag>
<db-tag semantic="critical">Critical</db-tag>
<div class="db-tag" data-semantic="critical">
Critical
-</div>
<DBTag semantic="critical">Critical</DBTag>
<DBTag semantic="critical">Critical</DBTag>
<db-tag semantic="informational">Informational</db-tag>
<div class="db-tag" data-semantic="informational">
+</div>
<DBTag semantic="critical">Critical</DBTag>
<DBTag semantic="critical">Critical</DBTag>
<db-tag semantic="informational">Informational</db-tag>
<div class="db-tag" data-semantic="informational">
Informational
-</div>
<DBTag semantic="informational">Informational</DBTag>
<DBTag semantic="informational">Informational</DBTag>
<db-tag semantic="successful">Successful</db-tag>
<div class="db-tag" data-semantic="successful">
+</div>
<DBTag semantic="informational">Informational</DBTag>
<DBTag semantic="informational">Informational</DBTag>
<db-tag semantic="successful">Successful</db-tag>
<div class="db-tag" data-semantic="successful">
Successful
-</div>
<DBTag semantic="successful">Successful</DBTag>
<DBTag semantic="successful">Successful</DBTag>
<db-tag semantic="warning">Warning</db-tag>
<div class="db-tag" data-semantic="warning">
+</div>
<DBTag semantic="successful">Successful</DBTag>
<DBTag semantic="successful">Successful</DBTag>
<db-tag semantic="warning">Warning</db-tag>
<div class="db-tag" data-semantic="warning">
Warning
-</div>
<DBTag semantic="warning">Warning</DBTag>
<DBTag semantic="warning">Warning</DBTag>
<db-tag emphasis="strong">Adaptive Strong</db-tag>
<div class="db-tag" data-emphasis="strong">
+</div>
<DBTag semantic="warning">Warning</DBTag>
<DBTag semantic="warning">Warning</DBTag>
<db-tag emphasis="strong">Adaptive Strong</db-tag>
<div class="db-tag" data-emphasis="strong">
Adaptive Strong
-</div>
<DBTag emphasis="strong">Adaptive Strong</DBTag>
<DBTag emphasis="strong">Adaptive Strong</DBTag>
<db-tag semantic="neutral" emphasis="strong">
+</div>
<DBTag emphasis="strong">Adaptive Strong</DBTag>
<DBTag emphasis="strong">Adaptive Strong</DBTag>
<db-tag semantic="neutral" emphasis="strong">
Neutral Strong
</db-tag>
<div class="db-tag" data-semantic="neutral" data-emphasis="strong">
Neutral Strong
@@ -18,7 +18,7 @@
Neutral Strong
</DBTag>
<DBTag semantic="neutral" emphasis="strong">
Neutral Strong
-</DBTag>
<db-tag semantic="critical" emphasis="strong">
+</DBTag>
<db-tag semantic="critical" emphasis="strong">
Critical Strong
</db-tag>
<div class="db-tag" data-semantic="critical" data-emphasis="strong">
Critical Strong
@@ -26,7 +26,7 @@
Critical Strong
</DBTag>
<DBTag semantic="critical" emphasis="strong">
Critical Strong
-</DBTag>
<db-tag semantic="informational" emphasis="strong">
+</DBTag>
<db-tag semantic="informational" emphasis="strong">
Informational Strong
</db-tag>
<div class="db-tag" data-semantic="informational" data-emphasis="strong">
Informational Strong
@@ -34,7 +34,7 @@
Informational Strong
</DBTag>
<DBTag semantic="informational" emphasis="strong">
Informational Strong
-</DBTag>
<db-tag semantic="successful" emphasis="strong">
+</DBTag>
<db-tag semantic="successful" emphasis="strong">
Successful Strong
</db-tag>
<div class="db-tag" data-semantic="successful" data-emphasis="strong">
Successful Strong
@@ -42,7 +42,7 @@
Successful Strong
</DBTag>
<DBTag semantic="successful" emphasis="strong">
Successful Strong
-</DBTag>
<db-tag semantic="warning" emphasis="strong">
+</DBTag>
<db-tag semantic="warning" emphasis="strong">
Warning Strong
</db-tag>
<div class="db-tag" data-semantic="warning" data-emphasis="strong">
Warning Strong
@@ -50,4 +50,4 @@
Warning Strong
</DBTag>
<DBTag semantic="warning" emphasis="strong">
Warning Strong
-</DBTag>
\ No newline at end of file
+</DBTag>
<db-tag>
+DB UI Mono
<db-tag>
<db-checkbox>Interactive Checkbox</db-checkbox>
</db-tag>
<div class="db-tag">
<input type="checkbox" class="db-checkbox" id="checkbox-element" />
@@ -7,7 +7,7 @@
<DBCheckbox>Interactive Checkbox</DBCheckbox>
</DBTag>
<DBTag>
<DBCheckbox>Interactive Checkbox</DBCheckbox>
-</DBTag>
<db-tag><db-checkbox [checked]="true">Interactive Checkbox</db-checkbox></db-tag>
<div class="db-tag">
+</DBTag>
<db-tag><db-checkbox [checked]="true">Interactive Checkbox</db-checkbox></db-tag>
<div class="db-tag">
<input
checked="true"
type="checkbox"
@@ -17,7 +17,7 @@
<label for="checkbox-element">Interactive Checkbox</label>
</div>
<DBTag>
<DBCheckbox checked>Interactive Checkbox</DBCheckbox>
-</DBTag>
<DBTag><DBCheckbox :checked="true">Interactive Checkbox</DBCheckbox></DBTag>
<db-tag><db-checkbox [checked]="true" [disabled]="true">Interactive Checkbox</db-checkbox></db-tag>
<div class="db-tag">
+</DBTag>
<DBTag><DBCheckbox :checked="true">Interactive Checkbox</DBCheckbox></DBTag>
<db-tag><db-checkbox [checked]="true" [disabled]="true">Interactive Checkbox</db-checkbox></db-tag>
<div class="db-tag">
<input
checked="true"
disabled="true"
@@ -30,4 +30,4 @@
<DBCheckbox checked disabled>
Interactive Checkbox
</DBCheckbox>
-</DBTag>
<DBTag><DBCheckbox :checked="true" :disabled="true">Interactive Checkbox</DBCheckbox></DBTag>
\ No newline at end of file
+</DBTag>
<DBTag><DBCheckbox :checked="true" :disabled="true">Interactive Checkbox</DBCheckbox></DBTag>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -21,4 +21,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tag/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
<!-- index.html -->
...
<body>
<div class="db-tag">
- <span class="tag-label">regular (Default)</span>
+ <span class="tag-label">Regular (Default)</span>
</div>
</body>
-
Note For a general installation or migration process check out this documentation.
@@ -20,4 +20,4 @@sizesvariantsvariants anchor link
Before Status After Description poi-*
❌ ❌ We removed all point of interest colors for now. track
❌ ❌ We removed track for now. error
🔁 critical
informative
🔁 informational
success
🔁 successful
iconsicons anchor link
-
Before Status After Description iconAfter
❌ ❌ not valid anymore, for tags only icons before text are allowed
Before | Status | After | Description |
---|---|---|---|
iconAfter | ❌ | ❌ | not valid anymore, for tags only icons before text are allowed |
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -26,4 +26,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tag/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -18,4 +18,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tag/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-textarea label="Label">Functional</db-textarea>
<div class="db-textarea">
+DB UI Mono
<db-textarea label="Label">Functional</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="4"></textarea>
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="4"
+ ></textarea>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
class="db-infotext"
@@ -17,9 +22,14 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBTextarea label="Label">Functional</DBTextarea>
<DBTextarea label="Label">Functional</DBTextarea>
<db-textarea label="Label">(Default) Regular</db-textarea>
<div class="db-textarea">
+</div>
<DBTextarea label="Label">Functional</DBTextarea>
<DBTextarea label="Label">Functional</DBTextarea>
<db-textarea label="Label">(Default) Regular</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="4"></textarea>
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="4"
+ ></textarea>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
class="db-infotext"
@@ -36,9 +46,14 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBTextarea label="Label">(Default) Regular</DBTextarea>
<DBTextarea label="Label">(Default) Regular</DBTextarea>
<db-textarea label="Label">Expressive</db-textarea>
<div class="db-textarea">
+</div>
<DBTextarea label="Label">(Default) Regular</DBTextarea>
<DBTextarea label="Label">(Default) Regular</DBTextarea>
<db-textarea label="Label">Expressive</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="4"></textarea>
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="4"
+ ></textarea>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
class="db-infotext"
@@ -55,4 +70,4 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBTextarea label="Label">Expressive</DBTextarea>
<DBTextarea label="Label">Expressive</DBTextarea>
\ No newline at end of file
+</div>
<DBTextarea label="Label">Expressive</DBTextarea>
<DBTextarea label="Label">Expressive</DBTextarea>
<db-textarea label="Label">(Default) Optional</db-textarea>
<div class="db-textarea">
+DB UI Mono
<db-textarea label="Label">(Default) Optional</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="4"></textarea>
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="4"
+ ></textarea>
<span
id="OVERWRITE_DEFAULT_ID-valid-message"
class="db-infotext"
@@ -17,9 +22,10 @@
>
TODO: Add an invalidMessage
</span>
-</div>
<DBTextarea label="Label">(Default) Optional</DBTextarea>
<DBTextarea label="Label">(Default) Optional</DBTextarea>
<db-textarea label="Label" [required]="true">Required</db-textarea>
<div class="db-textarea">
+</div>
<DBTextarea label="Label">(Default) Optional</DBTextarea>
<DBTextarea label="Label">(Default) Optional</DBTextarea>
<db-textarea label="Label" [required]="true">Required</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Label</label>
<textarea
+ aria-invalid="false"
id="OVERWRITE_DEFAULT_ID"
required=""
placeholder=" "
@@ -43,4 +49,4 @@
</span>
</div>
<DBTextarea label="Label" required>
Required
-</DBTextarea>
<DBTextarea label="Label" :required="true">Required</DBTextarea>
\ No newline at end of file
+</DBTextarea>
<DBTextarea label="Label" :required="true">Required</DBTextarea>
<db-textarea
+DB UI Mono
<db-textarea
label="(Default) 4 Rows"
value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
>
(Default) 4 Rows
</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">(Default) 4 Rows</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="4">
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="4"
+ >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
@@ -36,9 +41,14 @@
value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
>
(Default) 4 Rows
-</DBTextarea>
<db-textarea label="Custom Example 8 Rows" [rows]="8" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Custom</db-textarea>
<div class="db-textarea">
+</DBTextarea>
<db-textarea label="Custom Example 8 Rows" [rows]="8" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Custom</db-textarea>
<div class="db-textarea">
<label for="OVERWRITE_DEFAULT_ID">Custom Example 8 Rows</label>
- <textarea id="OVERWRITE_DEFAULT_ID" placeholder=" " rows="8">
+ <textarea
+ aria-invalid="false"
+ id="OVERWRITE_DEFAULT_ID"
+ placeholder=" "
+ rows="8"
+ >
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
@@ -65,4 +75,4 @@
value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
>
Custom
-</DBTextarea>
<DBTextarea label="Custom Example 8 Rows" :rows="8" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Custom</DBTextarea>
\ No newline at end of file
+</DBTextarea>
<DBTextarea label="Custom Example 8 Rows" :rows="8" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.">Custom</DBTextarea>
<db-textarea label="Label" variant="floating">
+DB UI Mono
<db-textarea label="Label" variant="floating">
(Default) Empty
</db-textarea>
undefined
<DBTextarea label="Label" variant="floating">
(Default) Empty
</DBTextarea>
<DBTextarea label="Label" variant="floating">
(Default) Empty
-</DBTextarea>
<db-textarea label="Label" value="Filled" variant="floating">
+</DBTextarea>
<db-textarea label="Label" value="Filled" variant="floating">
Filled
</db-textarea>
undefined
<DBTextarea label="Label" value="Filled" variant="floating">
Filled
</DBTextarea>
<DBTextarea label="Label" value="Filled" variant="floating">
Filled
-</DBTextarea>
<db-textarea label="Label" [disabled]="true" variant="floating">Disabled</db-textarea>
undefined
<DBTextarea label="Label" disabled variant="floating">
+</DBTextarea>
<db-textarea label="Label" [disabled]="true" variant="floating">Disabled</db-textarea>
undefined
<DBTextarea label="Label" disabled variant="floating">
Disabled
-</DBTextarea>
<DBTextarea label="Label" :disabled="true" variant="floating">Disabled</DBTextarea>
<db-textarea label="Label" value="Readonly - Filled" [readOnly]="true" variant="floating">Readonly - Filled</db-textarea>
undefined
<DBTextarea label="Label" value="Readonly - Filled" readOnly variant="floating">
+</DBTextarea>
<DBTextarea label="Label" :disabled="true" variant="floating">Disabled</DBTextarea>
<db-textarea label="Label" value="Readonly - Filled" [readOnly]="true" variant="floating">Readonly - Filled</db-textarea>
undefined
<DBTextarea label="Label" value="Readonly - Filled" readOnly variant="floating">
Readonly - Filled
-</DBTextarea>
<DBTextarea label="Label" value="Readonly - Filled" :readOnly="true" variant="floating">Readonly - Filled</DBTextarea>
\ No newline at end of file
+</DBTextarea>
<DBTextarea label="Label" value="Readonly - Filled" :readOnly="true" variant="floating">Readonly - Filled</DBTextarea>
<db-textarea label="Label">(Default) Empty</db-textarea>
undefined
<DBTextarea label="Label">(Default) Empty</DBTextarea>
<DBTextarea label="Label">(Default) Empty</DBTextarea>
<db-textarea label="Label" value="Filled">
+DB UI Mono
<db-textarea label="Label">(Default) Empty</db-textarea>
undefined
<DBTextarea label="Label">(Default) Empty</DBTextarea>
<DBTextarea label="Label">(Default) Empty</DBTextarea>
<db-textarea label="Label" value="Filled">
Filled
</db-textarea>
undefined
<DBTextarea label="Label" value="Filled">
Filled
</DBTextarea>
<DBTextarea label="Label" value="Filled">
Filled
-</DBTextarea>
<db-textarea label="Label" [disabled]="true">Disabled</db-textarea>
undefined
<DBTextarea label="Label" disabled>
+</DBTextarea>
<db-textarea label="Label" [disabled]="true">Disabled</db-textarea>
undefined
<DBTextarea label="Label" disabled>
Disabled
-</DBTextarea>
<DBTextarea label="Label" :disabled="true">Disabled</DBTextarea>
<db-textarea label="Label" value="Readonly - Filled" [readOnly]="true">Readonly - Filled</db-textarea>
undefined
<DBTextarea label="Label" value="Readonly - Filled" readOnly>
+</DBTextarea>
<DBTextarea label="Label" :disabled="true">Disabled</DBTextarea>
<db-textarea label="Label" value="Readonly - Filled" [readOnly]="true">Readonly - Filled</db-textarea>
undefined
<DBTextarea label="Label" value="Readonly - Filled" readOnly>
Readonly - Filled
-</DBTextarea>
<DBTextarea label="Label" value="Readonly - Filled" :readOnly="true">Readonly - Filled</DBTextarea>
\ No newline at end of file
+</DBTextarea>
<DBTextarea label="Label" value="Readonly - Filled" :readOnly="true">Readonly - Filled</DBTextarea>
<db-textarea label="Label">(Default) Basic</db-textarea>
undefined
<DBTextarea label="Label">(Default) Basic</DBTextarea>
<DBTextarea label="Label">(Default) Basic</DBTextarea>
<db-textarea label="Label" message="Helper Message">
+DB UI Mono
<db-textarea label="Label">(Default) Basic</db-textarea>
undefined
<DBTextarea label="Label">(Default) Basic</DBTextarea>
<DBTextarea label="Label">(Default) Basic</DBTextarea>
<db-textarea label="Label" message="Helper Message">
Helper Message
</db-textarea>
undefined
<DBTextarea label="Label" message="Helper Message">
Helper Message
</DBTextarea>
<DBTextarea label="Label" message="Helper Message">
Helper Message
-</DBTextarea>
\ No newline at end of file
+</DBTextarea>
<db-textarea label="Label">(Default) Label Above</db-textarea>
undefined
<DBTextarea label="Label">(Default) Label Above</DBTextarea>
<DBTextarea label="Label">(Default) Label Above</DBTextarea>
<db-textarea label="Label" variant="floating" value="Floating Label">
+DB UI Mono
<db-textarea label="Label">(Default) Label Above</db-textarea>
undefined
<DBTextarea label="Label">(Default) Label Above</DBTextarea>
<DBTextarea label="Label">(Default) Label Above</DBTextarea>
<db-textarea label="Label" variant="floating" value="Floating Label">
Floating Label
</db-textarea>
undefined
<DBTextarea label="Label" variant="floating" value="Floating Label">
Floating Label
</DBTextarea>
<DBTextarea label="Label" variant="floating" value="Floating Label">
Floating Label
-</DBTextarea>
<db-textarea label="Label" variant="hidden">
+</DBTextarea>
<db-textarea label="Label" variant="hidden">
Hidden Label
</db-textarea>
undefined
<DBTextarea label="Label" variant="hidden">
Hidden Label
</DBTextarea>
<DBTextarea label="Label" variant="hidden">
Hidden Label
-</DBTextarea>
\ No newline at end of file
+</DBTextarea>
For general installation and configuration look at the ngx-components package.
// app.component.ts
@@ -28,9 +28,9 @@ Use component{"props":{"pageProps":{}},"page":"/components/textarea/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration look at the components package.
<!-- index.html -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/textarea/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
@@ -9,4 +9,4 @@classvariantsvariants anchor link
Before Status After Description semitransparent
❌ white
❌ solid
❌ outline
❌ 🆕 adaptive
🆕 critical
🆕 informational
🆕 warning
🆕 successful
otherother anchor link
-
Before Status After Description description
🔁 message
Before | Status | After | Description |
---|---|---|---|
description | 🔁 | message |
For general installation and configuration look at the react-components package.
// App.tsx
@@ -10,6 +10,7 @@ Use componentUse component{"props":{"pageProps":{}},"page":"/components/textarea/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration look at the v-components package.
You cannot use a default value for textarea in vue. @@ -16,10 +16,10 @@
<db-tooltip content="Tooltip" id="tooltip-14">
- Animation no delay (Default)
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-14" class="db-tooltip">
- Animation no delay (Default)
+DB UI Mono
<db-tooltip content="Tooltip" id="tooltip-14">
+ (Default) Animation no delay
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-14"
+ class="db-tooltip"
+>
+ (Default) Animation no delay
</i>
<DBTooltip content="Tooltip" id="tooltip-14">
- Animation no delay (Default)
+ (Default) Animation no delay
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-14">
- Animation no delay (Default)
-</DBTooltip>
<db-tooltip content="Tooltip" delay="slow" id="tooltip-15">
+ (Default) Animation no delay
+</DBTooltip>
<db-tooltip content="Tooltip" delay="slow" id="tooltip-15">
Delay slow
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-15"
data-delay="slow"
class="db-tooltip"
@@ -20,11 +27,12 @@
Delay slow
</DBTooltip>
<DBTooltip content="Tooltip" delay="slow" id="tooltip-15">
Delay slow
-</DBTooltip>
<db-tooltip content="Tooltip" delay="fast" id="tooltip-16">
+</DBTooltip>
<db-tooltip content="Tooltip" delay="fast" id="tooltip-16">
Delay fast
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-16"
data-delay="fast"
class="db-tooltip"
@@ -34,11 +42,12 @@
Delay fast
</DBTooltip>
<DBTooltip content="Tooltip" delay="fast" id="tooltip-16">
Delay fast
-</DBTooltip>
<db-tooltip content="Tooltip" animation="disabled" id="tooltip-17">
+</DBTooltip>
<db-tooltip content="Tooltip" animation="disabled" id="tooltip-17">
No animation
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-17"
data-animation="disabled"
class="db-tooltip"
@@ -48,4 +57,4 @@
No animation
</DBTooltip>
<DBTooltip content="Tooltip" animation="disabled" id="tooltip-17">
No animation
-</DBTooltip>
\ No newline at end of file
+</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-01">
- functional
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-01" class="db-tooltip">
- functional
+DB UI Mono
<db-tooltip content="Tooltip" id="tooltip-01">
+ Functional
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-01"
+ class="db-tooltip"
+>
+ Functional
</i>
<DBTooltip content="Tooltip" id="tooltip-01">
- functional
+ Functional
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-01">
- functional
-</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-02">
- regular (Default)
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-02" class="db-tooltip">
- regular (Default)
+ Functional
+</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-02">
+ (Default) Regular
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-02"
+ class="db-tooltip"
+>
+ (Default) Regular
</i>
<DBTooltip content="Tooltip" id="tooltip-02">
- regular (Default)
+ (Default) Regular
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-02">
- regular (Default)
-</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-03">
- expressive
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-03" class="db-tooltip">
- expressive
+ (Default) Regular
+</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-03">
+ Expressive
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-03"
+ class="db-tooltip"
+>
+ Expressive
</i>
<DBTooltip content="Tooltip" id="tooltip-03">
- expressive
+ Expressive
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-03">
- expressive
-</DBTooltip>
\ No newline at end of file
+ Expressive
+</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-06">
- Weak (Default)
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-06" class="db-tooltip">
- Weak (Default)
+DB UI Mono
<db-tooltip content="Tooltip" id="tooltip-06">
+ (Default) Weak
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-06"
+ class="db-tooltip"
+>
+ (Default) Weak
</i>
<DBTooltip content="Tooltip" id="tooltip-06">
- Weak (Default)
+ (Default) Weak
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-06">
- Weak (Default)
-</DBTooltip>
<db-tooltip content="Tooltip" emphasis="strong" id="tooltip-07">
+ (Default) Weak
+</DBTooltip>
<db-tooltip content="Tooltip" emphasis="strong" id="tooltip-07">
Strong
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-07"
data-emphasis="strong"
class="db-tooltip"
@@ -20,4 +27,4 @@
Strong
</DBTooltip>
<DBTooltip content="Tooltip" emphasis="strong" id="tooltip-07">
Strong
-</DBTooltip>
\ No newline at end of file
+</DBTooltip>
<db-tooltip content="Tooltip" placement="bottom-start" id="tooltip-08-start">
+DB UI Mono
<db-tooltip content="Tooltip" placement="bottom-start" id="tooltip-08-start">
bottom-start
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-08-start"
data-placement="bottom-start"
class="db-tooltip"
@@ -12,25 +13,27 @@
bottom-start
</DBTooltip>
<DBTooltip content="Tooltip" placement="bottom-start" id="tooltip-08-start">
bottom-start
-</DBTooltip>
<db-tooltip content="Tooltip" placement="bottom" id="tooltip-08">
- bottom (Default)
+</DBTooltip>
<db-tooltip content="Tooltip" placement="bottom" id="tooltip-08">
+ (Default) bottom
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-08"
data-placement="bottom"
class="db-tooltip"
>
- bottom (Default)
+ (Default) bottom
</i>
<DBTooltip content="Tooltip" placement="bottom" id="tooltip-08">
- bottom (Default)
+ (Default) bottom
</DBTooltip>
<DBTooltip content="Tooltip" placement="bottom" id="tooltip-08">
- bottom (Default)
-</DBTooltip>
<db-tooltip content="Tooltip" placement="bottom-end" id="tooltip-08-end">
+ (Default) bottom
+</DBTooltip>
<db-tooltip content="Tooltip" placement="bottom-end" id="tooltip-08-end">
bottom-end
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-08-end"
data-placement="bottom-end"
class="db-tooltip"
@@ -40,11 +43,12 @@
bottom-end
</DBTooltip>
<DBTooltip content="Tooltip" placement="bottom-end" id="tooltip-08-end">
bottom-end
-</DBTooltip>
<db-tooltip content="Tooltip" placement="left-start" id="tooltip-10-start">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="left-start" id="tooltip-10-start">
left-start
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-10-start"
data-placement="left-start"
class="db-tooltip"
@@ -54,11 +58,12 @@
left-start
</DBTooltip>
<DBTooltip content="Tooltip" placement="left-start" id="tooltip-10-start">
left-start
-</DBTooltip>
<db-tooltip content="Tooltip" placement="left" id="tooltip-10">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="left" id="tooltip-10">
left
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-10"
data-placement="left"
class="db-tooltip"
@@ -68,11 +73,12 @@
left
</DBTooltip>
<DBTooltip content="Tooltip" placement="left" id="tooltip-10">
left
-</DBTooltip>
<db-tooltip content="Tooltip" placement="left-end" id="tooltip-10-end">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="left-end" id="tooltip-10-end">
left-end
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-10-end"
data-placement="left-end"
class="db-tooltip"
@@ -82,11 +88,12 @@
left-end
</DBTooltip>
<DBTooltip content="Tooltip" placement="left-end" id="tooltip-10-end">
left-end
-</DBTooltip>
<db-tooltip content="Tooltip" placement="right-start" id="tooltip-11-start">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="right-start" id="tooltip-11-start">
right-start
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-11-start"
data-placement="right-start"
class="db-tooltip"
@@ -96,11 +103,12 @@
right-start
</DBTooltip>
<DBTooltip content="Tooltip" placement="right-start" id="tooltip-11-start">
right-start
-</DBTooltip>
<db-tooltip content="Tooltip" placement="right" id="tooltip-11">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="right" id="tooltip-11">
right
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-11"
data-placement="right"
class="db-tooltip"
@@ -110,11 +118,12 @@
right
</DBTooltip>
<DBTooltip content="Tooltip" placement="right" id="tooltip-11">
right
-</DBTooltip>
<db-tooltip content="Tooltip" placement="right-end" id="tooltip-11-end">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="right-end" id="tooltip-11-end">
right-end
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-11-end"
data-placement="right-end"
class="db-tooltip"
@@ -124,11 +133,12 @@
right-end
</DBTooltip>
<DBTooltip content="Tooltip" placement="right-end" id="tooltip-11-end">
right-end
-</DBTooltip>
<db-tooltip content="Tooltip" placement="top-start" id="tooltip-09-start">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="top-start" id="tooltip-09-start">
top-start
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-09-start"
data-placement="top-start"
class="db-tooltip"
@@ -138,11 +148,12 @@
top-start
</DBTooltip>
<DBTooltip content="Tooltip" placement="top-start" id="tooltip-09-start">
top-start
-</DBTooltip>
<db-tooltip content="Tooltip" placement="top" id="tooltip-09">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="top" id="tooltip-09">
top
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-09"
data-placement="top"
class="db-tooltip"
@@ -152,11 +163,12 @@
top
</DBTooltip>
<DBTooltip content="Tooltip" placement="top" id="tooltip-09">
top
-</DBTooltip>
<db-tooltip content="Tooltip" placement="top-end" id="tooltip-09-end">
+</DBTooltip>
<db-tooltip content="Tooltip" placement="top-end" id="tooltip-09-end">
top-end
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-09-end"
data-placement="top-end"
class="db-tooltip"
@@ -166,4 +178,4 @@
top-end
</DBTooltip>
<DBTooltip content="Tooltip" placement="top-end" id="tooltip-09-end">
top-end
-</DBTooltip>
\ No newline at end of file
+</DBTooltip>
<db-tooltip content="Tooltip" id="tooltip-04">
- With arrow (Default)
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-04" class="db-tooltip">
- With arrow (Default)
+DB UI Mono
<db-tooltip content="Tooltip" id="tooltip-04">
+ (Default) With arrow
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Tooltip"
+ id="tooltip-04"
+ class="db-tooltip"
+>
+ (Default) With arrow
</i>
<DBTooltip content="Tooltip" id="tooltip-04">
- With arrow (Default)
+ (Default) With arrow
</DBTooltip>
<DBTooltip content="Tooltip" id="tooltip-04">
- With arrow (Default)
-</DBTooltip>
<db-tooltip content="Tooltip" variant="basic" id="tooltip-05">
+ (Default) With arrow
+</DBTooltip>
<db-tooltip content="Tooltip" variant="basic" id="tooltip-05">
Basic
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Tooltip"
id="tooltip-05"
data-variant="basic"
class="db-tooltip"
@@ -20,4 +27,4 @@
Basic
</DBTooltip>
<DBTooltip content="Tooltip" variant="basic" id="tooltip-05">
Basic
-</DBTooltip>
\ No newline at end of file
+</DBTooltip>
<db-tooltip
+DB UI Mono
<db-tooltip
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="tooltip-12"
>
- Auto (Default)
-</db-tooltip>
<i role="tooltip" data-gap="true" id="tooltip-12" class="db-tooltip">
- Auto (Default)
+ (Default) Auto
+</db-tooltip>
<i
+ role="tooltip"
+ data-gap="true"
+ content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
+ id="tooltip-12"
+ class="db-tooltip"
+>
+ (Default) Auto
</i>
<DBTooltip
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="tooltip-12"
>
- Auto (Default)
+ (Default) Auto
</DBTooltip>
<DBTooltip
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="tooltip-12"
>
- Auto (Default)
-</DBTooltip>
<db-tooltip
+ (Default) Auto
+</DBTooltip>
<db-tooltip
content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
width="fixed"
id="tooltip-13"
@@ -24,6 +30,7 @@
</db-tooltip>
<i
role="tooltip"
data-gap="true"
+ content="Max width, lorem ipsum dolor sit amet, consetetur sadipscing"
id="tooltip-13"
data-width="fixed"
class="db-tooltip"
@@ -41,4 +48,4 @@
id="tooltip-13"
>
Fixed
-</DBTooltip>
\ No newline at end of file
+</DBTooltip>
For general installation and configuration take a look at the ngx-components package.
// app.component.ts
@@ -17,4 +17,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tooltip/docs/Angular","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -9,4 +9,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tooltip/docs/HTML","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
Note For a general installation or migration process check out this documentation.
New Component 🥳
New Component 🥳
For general installation and configuration take a look at the react-components package.
// App.tsx
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tooltip/docs/React","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
For general installation and configuration take a look at the v-components package.
<!-- App.vue -->
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/tooltip/docs/Vue","query":{},"buildId":"hUN3v-21gaMKPz0VnphaU","assetPrefix":"/mono/review/feat-new-icons","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+