Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
[showSelectionColumn]="showSelectionColumn"
[striped]="striped">
<div>No data.</div>
`,
styles: [`
.no-data {
width: 100%;
height: 150px;
text-align: center;
}
`],
props: getProps({
model: emptyModel,
description: text("Description", "With no data")
})
}))
.add("With toolbar", () => ({
[onText]="altOnText"
[offText]="altOffText"
[disabled]="disabled"
[checked]="checked"
[size]="size">
`,
props: {
disabled: boolean("Disabled", false),
checked: boolean("Checked", false),
size: select("Size", ["md", "sm"], "md"),
label: text("Label text", ""),
onText: text("On text", "On"),
offText: text("Off text", "Off"),
altOffText: text("Alternative off text", "Dark"),
altOnText: text("Alternative on text", "Light")
}
}))
.add("Skeleton", () => ({
.add("Passive", () => ({
template: `
`,
props: {
modalType: select("modalType", ["default", "danger"], "default"),
modalLabel: text("modalLabel", "optional label"),
modalTitle: text("modalTitle", "Passive modal title"),
modalContent: text("modalContent", "Passive modal notifications should only appear if there is an action " +
"the user needs to address immediately. Passive modal notifications are persistent on screen")
}
}))
.add("Documentation", () => ({
[value]="value"
[shiftMultiplier]="shiftMultiplier"
[disabled]="disabled"
(valueChange)="valueChange($event)">
<span>{{minLabel}}</span>
<span>{{maxLabel}}</span>
<input>
`,
props: {
min: number("min", 0),
max: number("max", 100),
step: number("step", 1),
value: number("value", 0),
label: text("Label text", "Slider Label"),
minLabel: text("minLabel", "0"),
maxLabel: text("maxLabel", "100"),
theme: select("Theme", ["dark", "light"], "dark"),
disabled: boolean("disabled", false),
shiftMultiplier: number("shiftMultiplier", 4),
valueChange: action("Value changed")
}
}))
.add("With NgModel", () => ({
[dateFormat]="dateFormat"
(valueChange)="valueChange($event)">
Tab Content 3
`,
props: {
valueChange: action("Date change fired!"),
theme: select("Theme", ["dark", "light"], "dark"),
label: text("Label text", "Date Picker Label"),
placeholder: text("Placeholder text", "mm/dd/yyyy"),
invalidText: text("Form validation content", "Invalid date format"),
invalid: boolean("Show form validation", false),
disabled: boolean("Disabled", false),
dateFormat: text("Date format", "m/d/Y"),
value: array("Value", ["10/19/2019"])
}
}))
.add("Skeleton", () => ({
[shiftMultiplier]="shiftMultiplier"
[disabled]="disabled"
(valueChange)="valueChange($event)">
<span>{{minLabel}}</span>
<span>{{maxLabel}}</span>
<input>
`,
props: {
min: number("min", 0),
max: number("max", 100),
step: number("step", 1),
value: number("value", 0),
label: text("Label text", "Slider Label"),
minLabel: text("minLabel", "0"),
maxLabel: text("maxLabel", "100"),
theme: select("Theme", ["dark", "light"], "dark"),
disabled: boolean("disabled", false),
shiftMultiplier: number("shiftMultiplier", 4),
valueChange: action("Value changed")
}
}))
.add("With NgModel", () => ({
range="true"
[placeholder]="placeholder"
[theme]="theme"
[disabled]="disabled"
[invalid]="invalid"
[invalidText]="invalidText"
[dateFormat]="dateFormat"
(valueChange)="valueChange($event)">
`,
props: {
valueChange: action("Date change fired!"),
theme: select("Theme", ["dark", "light"], "dark"),
label: text("Label text", "Date Picker Label"),
placeholder: text("Placeholder text", "mm/dd/yyyy"),
invalidText: text("Form validation content", "Invalid date format"),
invalid: boolean("Show form validation", false),
disabled: boolean("Disabled", false),
dateFormat: text("Date format", "m/d/Y"),
value: array("Value", ["09/19/2019", "10/19/2019"])
}
}))
.add("With reactive forms", () => ({
.add("Basic", () => ({
template: `
<button>Toggle state</button>
`,
props: {
onSuccess: action("onSuccess"),
loadingText: text("The loading text", "Loading data..."),
successText: text("The success text", "Data loaded.")
}
}))
.add("Documentation", () => ({
`,
props: {
disabled: boolean("Disabled", false),
checked: boolean("Checked", false),
size: select("Size", ["md", "sm"], "md"),
label: text("Label text", ""),
onText: text("On text", "On"),
offText: text("Off text", "Off"),
altOffText: text("Alternative off text", "Dark"),
altOnText: text("Alternative on text", "Light")
}
}))
.add("Skeleton", () => ({
template: `
<h4>{{title}}</h4>
<p>{{description}}</p>
`,
props: getProps({
description: text("Description", "With dynamic content")
})
}))
.add("With overflow menu", () => ({