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 /> टैग को स्वीकार करता है।

वैकल्पिक: .md-user-avatar , जो <img /> टैग बनाता है, एक सर्कल लुक देता है।

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>