Closable
\nClosable
\nPermanent
\nPermanent
\n(Default) Alert
\n(Default) Alert
\nInline
\nInline
\nClosable
\nClosable
\nPermanent
\nPermanent
\n(Default) Alert
\n(Default) Alert
\nInline
\nInline
\n<db-accordion-item title="(Default) Collapsed">
+DB UI Mono
<db-accordion-item title="(Default) Collapsed">
(Default) Collapsed
</db-accordion-item>
undefined
<DBAccordionItem title="(Default) Collapsed">
(Default) Collapsed
@@ -6,4 +6,4 @@
(Default) Collapsed
</DBAccordionItem>
<db-accordion-item headline="Open" [open]="true">Open</db-accordion-item>
undefined
<DBAccordionItem headline="Open" open>
Open
-</DBAccordionItem>
<DBAccordionItem headline="Open" :open="true">Open</DBAccordionItem>
<DBAccordionItem headline="Open" :open="true">Open</DBAccordionItem><db-accordion-item headline="Enabled (Default)/Hover/Pressed">
+DB UI Mono
<db-accordion-item headline="Enabled (Default)/Hover/Pressed">
Enabled (Default)/Hover/Pressed
</db-accordion-item>
undefined
<DBAccordionItem headline="Enabled (Default)/Hover/Pressed">
Enabled (Default)/Hover/Pressed
@@ -6,4 +6,4 @@
Enabled (Default)/Hover/Pressed
</DBAccordionItem>
<db-accordion-item headline="Disabled" [disabled]="true">Disabled</db-accordion-item>
undefined
<DBAccordionItem headline="Disabled" disabled>
Disabled
-</DBAccordionItem>
<DBAccordionItem headline="Disabled" :disabled="true">Disabled</DBAccordionItem>
<DBAccordionItem headline="Disabled" :disabled="true">Disabled</DBAccordionItem><db-accordion-item headline="Functional">Functional</db-accordion-item><details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
+DB UI Mono
<db-accordion-item headline="Functional">Functional</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
<summary>Functional</summary>
<div>Functional</div>
</details>
<DBAccordionItem headline="Functional">Functional</DBAccordionItem>
<DBAccordionItem headline="Functional">Functional</DBAccordionItem>
<db-accordion-item headline="(Default) Regular">
@@ -13,4 +13,4 @@
</DBAccordionItem>
<db-accordion-item headline="Expressive">Expressive</db-accordion-item>
<details id="OVERWRITE_DEFAULT_ID" class="db-accordion-item">
<summary>Expressive</summary>
<div>Expressive</div>
-</details>
<DBAccordionItem headline="Expressive">Expressive</DBAccordionItem>
<DBAccordionItem headline="Expressive">Expressive</DBAccordionItem>
<DBAccordionItem headline="Expressive">Expressive</DBAccordionItem><DBAccordionItem headline="Expressive">Expressive</DBAccordionItem>For general installation and configuration look at the ngx-components package.
// app.component.ts
@@ -22,4 +22,4 @@ With Content ProjectionWith 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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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-itemThe 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🔁 titleThe title/summary of the details element. emphasis❌ ❌ There is no emphasis anymore. size❌ ❌ Controlled by the tonality. 🆕 disabledDisable the component. 🆕 contentPass in a simple string as fallback to normal children/slot 🆕 slotTitlePass in a custom title (only required for React)
| Before | Status | After | Description |
|---|---|---|---|
summary | 🔁 | title | The title/summary of the details element. |
emphasis | ❌ | ❌ | There is no emphasis anymore. |
size | ❌ | ❌ | Controlled by the tonality. |
| 🆕 | disabled | Disable the component. | |
| 🆕 | content | Pass in a simple string as fallback to normal children/slot | |
| 🆕 | slotTitle | Pass in a custom title (only required for React) |
For general installation and configuration look at the react-components package.
For general installation and configuration look at the v-components package.
<db-accordion>
+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>
@@ -22,4 +22,4 @@
<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 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>
@@ -34,4 +34,4 @@
<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 UI Mono
<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>
@@ -22,4 +22,4 @@
<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],
// ...
})
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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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>
@@ -12,4 +12,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/accordion/docs/React","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
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>
@@ -13,4 +13,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/accordion/docs/Vue","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-alert type="alert" headline="Headline" [link]="{'href':'#','text':'Link'}" [click]="()=>{alert('click close button')}">Closable</db-alert><div class="db-alert" data-type="alert">
+DB UI Mono
<db-alert type="alert" headline="Headline" [link]="{'href':'#','text':'Link'}" [click]="()=>{alert('click close button')}">Closable</db-alert>
<div class="db-alert" data-type="alert">
<strong class="db-alert-headline">Headline</strong>
<p class="db-alert-content">Closable</p>
<a
@@ -46,4 +46,4 @@
behaviour="permanent"
>
Permanent
-</DBAlert>
<DBAlert type="alert" headline="Headline" :link="{'href':'#','text':'Link'}" behaviour="permanent">Permanent</DBAlert>
<DBAlert type="alert" headline="Headline" :link="{'href':'#','text':'Link'}" behaviour="permanent">Permanent</DBAlert><db-alert type="alert" icon="account" headline="Headline" [link]="{'href':'#','text':'Link'}">Headline & Text & Link & Icon</db-alert><div class="db-alert" data-type="alert" data-icon="account">
+DB UI Mono
<db-alert type="alert" icon="account" headline="Headline" [link]="{'href':'#','text':'Link'}">Headline & Text & Link & Icon</db-alert>
<div class="db-alert" data-type="alert" data-icon="account">
<strong class="db-alert-headline">Headline</strong>
<p class="db-alert-content">Headline & Text & Link & Icon</p>
<a
@@ -76,4 +76,4 @@
>
Close Button
</button>
-</div>
<DBAlert>Text</DBAlert>
<DBAlert>Text</DBAlert>
<DBAlert>Text</DBAlert><DBAlert>Text</DBAlert><db-alert headline="Headline" [link]="{'href':'#','text':'Link'}">Functional</db-alert><div class="db-alert">
+DB UI Mono
<db-alert headline="Headline" [link]="{'href':'#','text':'Link'}">Functional</db-alert>
<div class="db-alert">
<strong class="db-alert-headline">Headline</strong>
<p class="db-alert-content">Functional</p>
<a
@@ -64,4 +64,4 @@
</button>
</div>
<DBAlert headline="Headline" link={{ href: "#", text: "Link" }}>
Expressive
-</DBAlert>
<DBAlert headline="Headline" :link="{'href':'#','text':'Link'}">Expressive</DBAlert>
<DBAlert headline="Headline" :link="{'href':'#','text':'Link'}">Expressive</DBAlert><db-alert type="alert" headline="Headline" [link]="{'href':'#','text':'Link'}">(Default) Alert</db-alert><div class="db-alert" data-type="alert">
+DB UI Mono
<db-alert type="alert" headline="Headline" [link]="{'href':'#','text':'Link'}">(Default) Alert</db-alert>
<div class="db-alert" data-type="alert">
<strong class="db-alert-headline">Headline</strong>
<p class="db-alert-content">(Default) Alert</p>
<a
@@ -42,4 +42,4 @@
</button>
</div>
<DBAlert type="inline" headline="Headline" link={{ href: "#", text: "Link" }}>
Inline
-</DBAlert>
<DBAlert type="inline" headline="Headline" :link="{'href':'#','text':'Link'}">Inline</DBAlert>
<DBAlert type="inline" headline="Headline" :link="{'href':'#','text':'Link'}">Inline</DBAlert><db-alert type="alert" icon="account" headline="Headline" [link]="{'href':'#','text':'Link'}">(Default) Adaptive</db-alert><div class="db-alert" data-type="alert" data-icon="account">
+DB UI Mono
<db-alert type="alert" icon="account" headline="Headline" [link]="{'href':'#','text':'Link'}">(Default) Adaptive</db-alert>
<div class="db-alert" data-type="alert" data-icon="account">
<strong class="db-alert-headline">Headline</strong>
<p class="db-alert-content">(Default) Adaptive</p>
<a
@@ -160,4 +160,4 @@
link={{ href: "#", text: "Link" }}
>
Warning
-</DBAlert>
<DBAlert type="alert" variant="warning" headline="Headline" :link="{'href':'#','text':'Link'}">Warning</DBAlert>
<DBAlert type="alert" variant="warning" headline="Headline" :link="{'href':'#','text':'Link'}">Warning</DBAlert>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-alert headline="Headline">Alert</db-alert>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -23,4 +23,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/alert/docs/HTML","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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 alert🔁 alertDefault alert with different look status❌ ❌ Status can be changed by variants🆕 inlineNew styling with shadow and rounded corners (like card) type ➡ variantstype--variants anchor link
-
Before Status After Description 🆕 adaptiveDefault: change colors based on background error🔁 critical'Red' colored alert to show error messages informative🔁 informational'Blue' colored alert to show information messages warning🔁 warning'Yellow' colored alert to show warning messages success🔁 successful'Green' colored alert to show success messages
| Before | Status | After | Description |
|---|---|---|---|
| 🆕 | adaptive | Default: change colors based on background | |
error | 🔁 | critical | 'Red' colored alert to show error messages |
informative | 🔁 | informational | 'Blue' colored alert to show information messages |
warning | 🔁 | warning | 'Yellow' colored alert to show warning messages |
success | 🔁 | successful | 'Green' colored alert to show success messages |
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/alert/docs/React","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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/alert/docs/Vue","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<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">
+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
@@ -12,4 +12,4 @@
Icon - Medium
</DBBadge>
<DBBadge example="icon" size="medium">
Icon - Medium
-</DBBadge>
<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">
+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>
<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">(Default) Inline</db-badge><span class="db-badge" data-placement="inline">
+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
@@ -12,4 +12,4 @@
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">
Corner - Bottom- Right
-</span>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge>
<DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge><DBBadge placement="corner-bottom-right">Corner - Bottom- Right</DBBadge><db-badge>(Default) Adaptive</db-badge><span class="db-badge">(Default) Adaptive</span><DBBadge>(Default) Adaptive</DBBadge><DBBadge>(Default) Adaptive</DBBadge><db-badge variant="neutral">Neutral</db-badge><span class="db-badge" data-variant="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 variant="neutral">Neutral</db-badge>
<span class="db-badge" data-variant="neutral">
Neutral
</span>
<DBBadge variant="neutral">Neutral</DBBadge>
<DBBadge variant="neutral">Neutral</DBBadge>
<db-badge variant="critical">Critical</db-badge>
<span class="db-badge" data-variant="critical">
Critical
@@ -50,4 +50,4 @@
Warning Strong
</DBBadge>
<DBBadge variant="warning" emphasis="strong">
Warning Strong
-</DBBadge>
<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">
+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>
<DBBadge size="medium">Medium</DBBadge><DBBadge size="medium">Medium</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>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>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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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 href="/">
<img
class="db-logo"
@@ -31,4 +31,4 @@
/>
</a>
Expressive
-</div>
<DBBrand>Expressive</DBBrand>
<DBBrand>Expressive</DBBrand>
<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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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>
<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="account">Icon & Text</db-button><button class="db-button" data-icon="account">
+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="account">Icon & Text</db-button>
<button class="db-button" data-icon="account">
Icon & Text
</button>
<DBButton icon="account">Icon & Text</DBButton>
<DBButton icon="account">Icon & Text</DBButton>
<db-button icon="account" [noText]="true">Icon</db-button>
<button class="db-button is-icon-text-replace" data-icon="account">
Icon
</button>
<DBButton icon="account" noText>
Icon
-</DBButton>
<DBButton icon="account" :noText="true">Icon</DBButton>
<DBButton icon="account" :noText="true">Icon</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>
<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>
<DBButton disabled>Disabled</DBButton><DBButton :disabled="true">Disabled</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>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 variant="primary">Primary</db-button><button class="db-button" data-variant="primary">
+DB UI Mono
<db-button variant="primary">Primary</db-button>
<button class="db-button" data-variant="primary">
Primary
</button>
<DBButton variant="primary">Primary</DBButton>
<DBButton variant="primary">Primary</DBButton>
<db-button>Outlined (Adaptive)</db-button>
<button class="db-button">Outlined (Adaptive)</button>
<DBButton>Outlined (Adaptive)</DBButton>
<DBButton>Outlined (Adaptive)</DBButton>
<db-button variant="solid">Solid (Adaptive)</db-button>
<button class="db-button" data-variant="solid">
Solid (Adaptive)
</button>
<DBButton variant="solid">Solid (Adaptive)</DBButton>
<DBButton variant="solid">Solid (Adaptive)</DBButton>
<db-button variant="text">Text (Adaptive)</db-button>
<button class="db-button" data-variant="text">
Text (Adaptive)
-</button>
<DBButton variant="text">Text (Adaptive)</DBButton>
<DBButton variant="text">Text (Adaptive)</DBButton>
<DBButton variant="text">Text (Adaptive)</DBButton><DBButton variant="text">Text (Adaptive)</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="primary">Button</db-button>
-
For general installation and configuration take a look at the components package.
<!-- index.html -->
@@ -8,4 +8,4 @@ Use component{"props":{"pageProps":{}},"page":"/components/button/docs/HTML","query":{},"buildId":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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 outlinedbuttons for those purposesbrand-primary🔁 primarysecondary-outline🔁 outlinedsecondary-solid🔁 solidtertiary-plain🔁 texticonsicons 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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","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":"X1NImgRdykMG87brM_J9S","assetPrefix":"/mono/review/fix-react-attributes","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}
\ No newline at end of file
+
<db-card variant="interactive" spacing="small" colorVariant="adaptive">
+DB UI Mono