mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(ui-toolkit): add disabled card mode
This commit is contained in:
parent
08745d4b12
commit
68685284ea
14
packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap
Normal file
14
packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap
Normal file
@ -0,0 +1,14 @@
|
||||
exports[`Anchor-2 1`] = `
|
||||
<span
|
||||
style={
|
||||
Object {
|
||||
"background-color": "#343434",
|
||||
}
|
||||
}>
|
||||
<a
|
||||
className="baseline-bFpgpG gnUgwP sc-hEsumM dhfAIY"
|
||||
disabled={true}>
|
||||
Inspire the lazy disabled
|
||||
</a>
|
||||
</span>
|
||||
`;
|
99
packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap
Normal file
99
packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap
Normal file
@ -0,0 +1,99 @@
|
||||
exports[`Card-12 1`] = `
|
||||
<div
|
||||
className="baseline-jXLmkH gzkHKC sc-kvZOFW jRrOBA"
|
||||
disabled={true}
|
||||
name="card">
|
||||
<div
|
||||
className="baseline-kqfNug fnozEx sc-dNLxif ilGAh sc-kvZOFW gVvtRM"
|
||||
disabled={true}
|
||||
name="card-header">
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU cVsyzo">
|
||||
<div
|
||||
className="baseline-hUQnaN htCKZi title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-title">
|
||||
<span
|
||||
className="title__Span-iBHACD geUdxg">
|
||||
Title
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-ixBCQn fBryli sc-uJMKN jtRVeL title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-subtitle">
|
||||
<span
|
||||
className="subtitle__Span-gbjeXx itnInm">
|
||||
Subtitle
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-cgfWYh cQuXkt sc-jqCOkK iqDuPh title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-description">
|
||||
<div
|
||||
className="description__InnerDescription-gTxtRa hulDZp">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className="sc-jnlKLf jvMgYz"
|
||||
disabled={true}
|
||||
name="card-options">
|
||||
<button
|
||||
className="baseline-iSnHlx gdVREx sc-fYxtnH byWRPT sc-bxivhb PEVyF"
|
||||
disabled={true}>
|
||||
<div
|
||||
className="options__StyledContainer-kWJktR cxevEJ">
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI fJJDmf"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU gxBTEj">
|
||||
<div
|
||||
className="baseline-cgfWYh cQuXkt sc-jqCOkK cqajkP title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-description">
|
||||
<div
|
||||
className="description__InnerDescription-gTxtRa eYtutw">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
|
||||
disabled={true}
|
||||
name="card-outlet">
|
||||
Outlet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
200
packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap
Normal file
200
packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap
Normal file
@ -0,0 +1,200 @@
|
||||
exports[`Card-14 1`] = `
|
||||
<div
|
||||
className="baseline-jXLmkH gzkHKC sc-kvZOFW jRrOBA"
|
||||
disabled={true}
|
||||
name="card">
|
||||
<div
|
||||
className="baseline-kqfNug fnozEx sc-dNLxif ilGAh sc-kvZOFW gVvtRM"
|
||||
disabled={true}
|
||||
name="card-header">
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU cVsyzo">
|
||||
<div
|
||||
className="baseline-hUQnaN htCKZi title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-title">
|
||||
<span
|
||||
className="title__Span-iBHACD geUdxg">
|
||||
Title
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-ixBCQn fBryli sc-uJMKN jtRVeL title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-subtitle">
|
||||
<span
|
||||
className="subtitle__Span-gbjeXx itnInm">
|
||||
Subtitle
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-cgfWYh cQuXkt sc-jqCOkK iqDuPh title__Container-KOVlp dKgaEf"
|
||||
disabled={true}
|
||||
name="card-description">
|
||||
<div
|
||||
className="description__InnerDescription-gTxtRa hulDZp">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
className="sc-jnlKLf jvMgYz"
|
||||
disabled={true}
|
||||
name="card-options">
|
||||
<button
|
||||
className="baseline-iSnHlx gdVREx sc-fYxtnH byWRPT sc-bxivhb PEVyF"
|
||||
disabled={true}>
|
||||
<div
|
||||
className="options__StyledContainer-kWJktR cxevEJ">
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
<div
|
||||
className="options__StyledCircle-UMbaE hNWITc"
|
||||
disabled={true} />
|
||||
</div>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-iMHSlr gIqaSF sc-gZMcBi uLhlE sc-iwsKbI fJJDmf"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-jXLmkH gzkHKC sc-kvZOFW iFKHfX"
|
||||
disabled={true}
|
||||
name="card">
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU gxBTEj">
|
||||
<div
|
||||
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-title">
|
||||
<span
|
||||
className="title__Span-iBHACD geUdxg">
|
||||
Title
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
|
||||
disabled={true}
|
||||
name="card-outlet">
|
||||
Outlet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-jXLmkH gzkHKC sc-kvZOFW iFKHfX"
|
||||
disabled={true}
|
||||
name="card">
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU gxBTEj">
|
||||
<div
|
||||
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-title">
|
||||
<span
|
||||
className="title__Span-iBHACD geUdxg">
|
||||
Title
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-ixBCQn fBryli sc-uJMKN fZgWsF title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-subtitle">
|
||||
<span
|
||||
className="subtitle__Span-gbjeXx czORam">
|
||||
Subtitle
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-cgfWYh cQuXkt sc-jqCOkK cqajkP title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-description">
|
||||
<div
|
||||
className="description__InnerDescription-gTxtRa eYtutw">
|
||||
Description
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
|
||||
disabled={true}
|
||||
name="card-outlet">
|
||||
Outlet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-jXLmkH gzkHKC sc-kvZOFW duluUG"
|
||||
disabled={true}
|
||||
name="card">
|
||||
<div
|
||||
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
|
||||
disabled={true}
|
||||
name="card-view">
|
||||
<div
|
||||
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
|
||||
name="card-meta">
|
||||
<div
|
||||
className="sc-gqjmRU gxBTEj">
|
||||
<div
|
||||
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-title">
|
||||
<span
|
||||
className="title__Span-iBHACD geUdxg">
|
||||
Title
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-ixBCQn fBryli sc-uJMKN fZgWsF title__Container-KOVlp fVrmFB"
|
||||
disabled={true}
|
||||
name="card-subtitle">
|
||||
<span
|
||||
className="subtitle__Span-gbjeXx czORam">
|
||||
Subtitle
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
|
||||
disabled={true}
|
||||
name="card-outlet">
|
||||
Outlet
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
@ -12,7 +12,11 @@ const style = css`
|
||||
${is('secondary')`
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
`}
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledAnchor = A.extend`
|
||||
|
@ -6,4 +6,10 @@
|
||||
<span style={{'background-color': '#343434'}}>
|
||||
<Anchor secondary>Inspire the lazy secondary</Anchor>
|
||||
</span>
|
||||
```
|
||||
```
|
||||
|
||||
```
|
||||
<span>
|
||||
<Anchor secondary disabled>Inspire the lazy disabled</Anchor>
|
||||
</span>
|
||||
```
|
||||
|
@ -43,17 +43,18 @@ const StyledCard = Row.extend`
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const Card = ({ children, collapsed = false, headed = false, ...rest }) => {
|
||||
const Card = ({ children, collapsed = false, headed = false, disabled = false, ...rest }) => {
|
||||
const render = value => {
|
||||
const newValue = {
|
||||
fromHeader: (value || {}).fromHeader,
|
||||
headed,
|
||||
collapsed
|
||||
collapsed,
|
||||
disabled
|
||||
};
|
||||
|
||||
return (
|
||||
<Broadcast channel="card" value={newValue}>
|
||||
<StyledCard name="card" collapsed={collapsed} headed={headed} {...rest}>
|
||||
<StyledCard name="card" disabled={disabled} collapsed={collapsed} headed={headed} {...rest}>
|
||||
{children}
|
||||
</StyledCard>
|
||||
</Broadcast>
|
||||
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Broadcast, Subscriber } from 'react-broadcast';
|
||||
import remcalc from 'remcalc';
|
||||
import PropTypes from 'prop-types';
|
||||
import is from 'styled-is';
|
||||
import Baseline from '../baseline';
|
||||
import Card from './card';
|
||||
|
||||
@ -15,10 +16,18 @@ const StyledCard = Card.extend`
|
||||
|
||||
width: calc(100% + ${remcalc(2)});
|
||||
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
||||
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
border-color: ${props => props.theme.grey};
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Header = ({ children, ...rest }) => {
|
||||
const render = value => {
|
||||
const { disabled } = value;
|
||||
|
||||
const newValue = {
|
||||
...value,
|
||||
fromHeader: true
|
||||
@ -26,7 +35,7 @@ const Header = ({ children, ...rest }) => {
|
||||
|
||||
return (
|
||||
<Broadcast channel="card" value={newValue}>
|
||||
<StyledCard name="card-header" collapsed headed {...rest}>
|
||||
<StyledCard name="card-header" disabled={disabled} collapsed headed {...rest}>
|
||||
{children}
|
||||
</StyledCard>
|
||||
</Broadcast>
|
||||
|
@ -6,6 +6,7 @@ import Label from '../label';
|
||||
|
||||
const StyledLabel = Label.extend`
|
||||
${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')};
|
||||
${props => (props.color === 'disabled' ? `color: ${props.theme.grey};` : '')};
|
||||
margin-left: ${props => (props.iconPosition === 'left' ? remcalc(24) : 0)};
|
||||
`;
|
||||
|
||||
@ -14,6 +15,7 @@ const StyledIconContainer = styled.div`
|
||||
|
||||
> svg {
|
||||
${props => (props.color === 'light' ? `fill: ${props.theme.white};` : '')};
|
||||
${props => (props.color === 'disabled' ? `fill: ${props.theme.grey};` : '')};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -34,7 +36,7 @@ CardInfo.propTypes = {
|
||||
label: PropTypes.string.isRequired,
|
||||
icon: PropTypes.node.isRequired,
|
||||
iconPosition: PropTypes.string,
|
||||
color: PropTypes.oneOf(['dark', 'light'])
|
||||
color: PropTypes.oneOf(['dark', 'light', 'disabled'])
|
||||
};
|
||||
|
||||
export default CardInfo;
|
||||
|
@ -16,6 +16,10 @@ const StyledNav = Nav.extend`
|
||||
${is('fromHeader')`
|
||||
border-left-color: ${props => props.theme.primaryDesaturatedActive};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
border-left-color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledButton = Button.extend`
|
||||
@ -68,21 +72,26 @@ const StyledCircle = styled.div`
|
||||
${is('secondary')`
|
||||
background-color: ${props => props.theme.secondary};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Options = ({ children, ...rest }) => {
|
||||
const render = ({ fromHeader = false, collapsed = false }) =>
|
||||
<StyledNav fromHeader={fromHeader} name="card-options">
|
||||
const render = ({ fromHeader = false, collapsed = false, disabled = false }) =>
|
||||
<StyledNav disabled={disabled} fromHeader={fromHeader} name="card-options">
|
||||
<StyledButton
|
||||
secondary={!fromHeader}
|
||||
collapsed={collapsed}
|
||||
disabled={disabled}
|
||||
rect
|
||||
{...rest}
|
||||
>
|
||||
<StyledContainer>
|
||||
<StyledCircle secondary={!fromHeader} />
|
||||
<StyledCircle secondary={!fromHeader} />
|
||||
<StyledCircle secondary={!fromHeader} />
|
||||
<StyledCircle disabled={disabled} secondary={!fromHeader} />
|
||||
<StyledCircle disabled={disabled} secondary={!fromHeader} />
|
||||
<StyledCircle disabled={disabled} secondary={!fromHeader} />
|
||||
</StyledContainer>
|
||||
</StyledButton>
|
||||
</StyledNav>;
|
||||
|
@ -19,11 +19,15 @@ const StyledCol = Col.extend`
|
||||
${is('collapsed')`
|
||||
display: none;
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Outlet = ({ children, ...rest }) => {
|
||||
const render = ({ collapsed = false }) =>
|
||||
<StyledCol name="card-outlet" collapsed={collapsed} xs={6} {...rest}>
|
||||
const render = ({ disabled = false, collapsed = false }) =>
|
||||
<StyledCol name="card-outlet" disabled={disabled} collapsed={collapsed} xs={6} {...rest}>
|
||||
{children}
|
||||
</StyledCol>;
|
||||
|
||||
|
@ -27,6 +27,10 @@ const Span = styled.span`
|
||||
${is('fromHeader')`
|
||||
color: ${props => props.theme.white};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledTitle = Title.extend`
|
||||
@ -43,11 +47,12 @@ const StyledTitle = Title.extend`
|
||||
`;
|
||||
|
||||
const Subtitle = ({ children, ...props }) => {
|
||||
const render = ({ fromHeader = false, collapsed = false }) =>
|
||||
const render = ({ disabled = false, fromHeader = false, collapsed = false }) =>
|
||||
<StyledTitle
|
||||
name="card-subtitle"
|
||||
fromHeader={fromHeader}
|
||||
collapsed={collapsed}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
>
|
||||
<Span fromHeader={fromHeader} collapsed={collapsed}>
|
||||
|
@ -29,6 +29,10 @@ const Container = styled.div`
|
||||
color: ${props => props.theme.white};
|
||||
`};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
||||
${is('collapsed')`
|
||||
flex-grow: 0;
|
||||
flex-direction: column;
|
||||
@ -55,10 +59,11 @@ const Title = ({ children, ...rest }) => {
|
||||
</Span>
|
||||
: children;
|
||||
|
||||
const render = ({ collapsed = false, fromHeader = false }) =>
|
||||
const render = ({ collapsed = false, disabled = false, fromHeader = false }) =>
|
||||
<Container
|
||||
collapsed={collapsed}
|
||||
fromHeader={fromHeader}
|
||||
disabled={disabled}
|
||||
name="card-title"
|
||||
xs={collapsed ? 6 : 12}
|
||||
{...rest}
|
||||
|
@ -201,3 +201,92 @@ const {
|
||||
</CardGroupView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### `disabled`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed disabled>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
```
|
||||
|
||||
#### group and `disabled`
|
||||
|
||||
```
|
||||
const {
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardMeta,
|
||||
CardOptions,
|
||||
CardOutlet,
|
||||
CardSubTitle,
|
||||
CardTitle,
|
||||
CardView,
|
||||
CardGroupView
|
||||
} = require('./');
|
||||
|
||||
<Card headed disabled>
|
||||
<CardHeader>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOptions />
|
||||
</CardHeader>
|
||||
<CardGroupView>
|
||||
<Card flat disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
<CardDescription>Description</CardDescription>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
<Card flat stacked disabled>
|
||||
<CardView>
|
||||
<CardMeta>
|
||||
<CardTitle>Title</CardTitle>
|
||||
<CardSubTitle>Subtitle</CardSubTitle>
|
||||
</CardMeta>
|
||||
<CardOutlet>Outlet</CardOutlet>
|
||||
</CardView>
|
||||
</Card>
|
||||
</CardGroupView>
|
||||
</Card>
|
||||
```
|
Loading…
Reference in New Issue
Block a user