@@ -83,7 +91,7 @@ Large.args = {
const TemplateScrolling: Story = (args: DialogComponent) => ({
props: args,
template: `
-
+ Scrolling Example
Dialog body text goes here.
@@ -104,3 +112,37 @@ export const ScrollingContent = TemplateScrolling.bind({});
ScrollingContent.args = {
dialogSize: "small",
};
+
+const TemplateTabbed: Story = (args: DialogComponent) => ({
+ props: args,
+ template: `
+
+ Tab Content Example
+
+
+ First Tab Content
+ Second Tab Content
+ Third Tab Content
+
+
+
+
+
+
+
+ `,
+});
+
+export const TabContent = TemplateTabbed.bind({});
+TabContent.args = {
+ dialogSize: "large",
+ disablePadding: true,
+};
+TabContent.story = {
+ parameters: {
+ docs: {
+ storyDescription: `An example of using the \`bitTabGroup\` component within the Dialog. The content padding should be
+ disabled (via \`disablePadding\`) so that the tabs are flush against the dialog title.`,
+ },
+ },
+};