angular-material
MD 카드

소개

비고

헤더가있는 기본 카드

<md-card>
    <md-card-header>
        <md-card-header-text>
            <span class="md-title">This will be the title</span>
            <span class="md-subhead">Here goes the (smaller, lighter) sub-header</span>
        </md-card-header-text>
    </md-card-header>
    <md-card-content>
        <p>
        Your content goes here!
        </p>
    </md-card-content>
</md-card>

액션 카드

카드에 단추를 포함 시키려면 md-card-actions 지시문을 사용하십시오. 단추는 아이콘 전용 단추에 대해 다르게 형식을 지정할 수도 있습니다. Google의 소재 아이콘을 사용하는 경우 여기 에서 아이콘을 검색 하십시오 .

<md-card>
    <!--header-->
    <md-card-content>
        <p>
        Your content goes here!
        </p>
    </md-card-content>
    <md-card-actions>
        <md-button>Save</md-button>
        <md-button>Cancel</md-button>
        <md-card-icon-actions>
          <md-button aria-label="icon" class="md-icon-button">
                <md-icon>help</md-icon>
          </md-button>
        </md-card-icon-actions>
    </md-card-actions>
</md-card>

아바타 및 이미지가있는 카드

카드에 아바타가 나타나게하려면 <md-card-avatar> 지시문을 사용하십시오.이 지시어는 <md-card-header> 지시어 안에 있어야합니다. <md-card-avatar> 지시문은 <img /> 태그를 허용합니다.

선택 사항 : <img /> 태그에 원 모양이있는 .md-user-avatar .

index.html :

<md-card>
    <md-card-header>
        <!--Avatar-->
        <md-card-avatar>
            <img src="/path/to/avatar.svg" class="md-user-avatar"/>
        </md-card-avatar>
        <!--Header text-->
        <md-card-header-text>
            <span class="md-title">Lorem</span>
            <span class="md-subhead">Ipsum</span>
        </md-card-header-text>
    </md-card-header>
    <!--Card image-->
    <img src="/path/to/cardimage.svg" class="md-card-image" alt="Card Image">
    <!--Card title-->
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">Card header</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere et risus sed finibus. Nunc vestibulum sagittis enim ut sagittis.</p>
    </md-card-content>
</md-card>