Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 1x 1x | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
import React from 'react';
import { StandardIcon } from '../../icons/standard/example';
import { UtilityIcon } from '../../icons/base/example';
import { Badge } from '../../badges';
export const exampleTabs = [
{
label: 'Tab 1',
content: (
<div className="slds-text-longform">
<h3 className="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
),
},
{
label: 'Tab 2',
content: (
<div className="slds-text-longform">
<p>Content for Tab 2</p>
</div>
),
},
{
label: 'Tab 3 has a really long label and can wrap or truncate',
content: (
<div className="slds-text-longform">
<p>Content for Tab 3</p>
</div>
),
},
];
export const exampleTabsWithIcons = [
{
label: 'Opportunities',
leftIcon: <StandardIcon symbol="opportunity" assistiveText={false} className="slds-icon_small" />,
content: (
<div className="slds-text-longform">
<h3 className="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
),
},
{
label: 'Cases',
leftIcon: <StandardIcon symbol="case" assistiveText={false} className="slds-icon_small" />,
rightIcon: (
<UtilityIcon
symbol="error"
title="This tab has an error"
assistiveText="This tab has an error"
className="slds-icon_x-small slds-icon-text-error"
/>
),
content: (
<div className="slds-text-longform">
<p>Content for Tab 2</p>
</div>
),
},
{
label: 'Accounts',
leftIcon: <StandardIcon symbol="account" assistiveText={false} className="slds-icon_small" />,
content: (
<div className="slds-text-longform">
<p>Content for Tab 3</p>
</div>
),
},
];
export const exampleTabsWithBadges = [
{
label: 'Opportunities',
leftIcon: <StandardIcon symbol="opportunity" assistiveText={false} className="slds-icon_small" />,
rightIcon: <Badge isInverse>New</Badge>,
content: (
<div className="slds-text-longform">
<h3 className="slds-text-heading_medium">Tab Title</h3>
<p>Content for Tab 1</p>
<p>Lorem ipsum dolor...</p>
<p>Lorem ipsum dolor...</p>
</div>
),
},
{
label: 'Cases',
leftIcon: <StandardIcon symbol="case" assistiveText={false} className="slds-icon_small" />,
rightIcon: <Badge isInverse>New</Badge>,
content: (
<div className="slds-text-longform">
<p>Content for Tab 2</p>
</div>
),
},
{
label: 'Accounts',
leftIcon: <StandardIcon symbol="account" assistiveText={false} className="slds-icon_small" />,
content: (
<div className="slds-text-longform">
<p>Content for Tab 3</p>
</div>
),
},
];
|