How to use the react-md/lib/Cards.CardMedia.aspect function in react-md

To help you get started, we’ve selected a few react-md examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mlaursen / react-md / docs / src / app / components / Cards / Cards.jsx View on Github external
desc: 'A wrapper for placing any text content in a card. _Or anything really_.',
          details: [{
            name: 'component',
            pt: 's',
            desc: 'The component to render the card text as.',
          }],
        }, {
          component: CardMedia,
          desc: `This is a component for displaying some media information at the correct
          aspect ratio from the material design docs.`,
          details: [{
            name: 'aspectRatio',
            pt: `one(['${CardMedia.aspect.equal}, '${CardMedia.aspect.wide}'])`,
            desc: `This is the aspect ratio to use for a card media item.
            To be safe, you should probably use \`CardMedia.aspect.equal\`
            '(${CardMedia.aspect.equal}') or \`CardMedia.aspect.wide\` ('${CardMedia.aspect.wide}').`,
          }, {
            name: 'forceAspect',
            pt: 'b',
            desc: 'Boolean if the \`aspectRation\` should be forced. *should* be true 99% of the time.',
          }, {
            name: 'overlay',
            pt: 'no',
            desc: `An optional overlay to display over the media item. This should be the
            \`CardTitle\` component and optionally the \`CardActions\` component. They
            will be modified to be styled for the overlay.`,
          }, {
            name: 'children',
            pt: 'no',
            desc: 'The media item to display. Usually an image or some graphic.',
          }],
        }, {
github mlaursen / react-md / docs / src / app / Home / Home.jsx View on Github external
There are already some other projects out there that are a lot farther along, so
              those might be a better choice for you. I do think the other projects are set up
              on inline styling, which I am not a fan of personally.
            <p></p>
            <p>
              The eventual goal of this project is to be able to quickly set up a material design
              website by changing a few variables or using the given sass mixins/functions for
              fine tuning.
            </p>
          
        
        <section style="{{">
          <div>
            
              
              
                <img alt="A person figure sitting at a desk looking at a laptop." src="{`${imgPrefix}/getting-started.jpg`}">
              
            
            
              
              
                <img alt="A person figure painting on a canvas" src="{`${imgPrefix}/customization.jpg`}">
              
            
            
              
              
                <img alt="Two person figures carrying a material item shaped like a pipe." src="{`${imgPrefix}/components.jpg`}">
              
            
          </div></section>
github mlaursen / react-md / docs / src / app / components / Cards / Cards.jsx View on Github external
}],
        }, {
          component: CardText,
          desc: 'A wrapper for placing any text content in a card. _Or anything really_.',
          details: [{
            name: 'component',
            pt: 's',
            desc: 'The component to render the card text as.',
          }],
        }, {
          component: CardMedia,
          desc: `This is a component for displaying some media information at the correct
          aspect ratio from the material design docs.`,
          details: [{
            name: 'aspectRatio',
            pt: `one(['${CardMedia.aspect.equal}, '${CardMedia.aspect.wide}'])`,
            desc: `This is the aspect ratio to use for a card media item.
            To be safe, you should probably use \`CardMedia.aspect.equal\`
            '(${CardMedia.aspect.equal}') or \`CardMedia.aspect.wide\` ('${CardMedia.aspect.wide}').`,
          }, {
            name: 'forceAspect',
            pt: 'b',
            desc: 'Boolean if the \`aspectRation\` should be forced. *should* be true 99% of the time.',
          }, {
            name: 'overlay',
            pt: 'no',
            desc: `An optional overlay to display over the media item. This should be the
            \`CardTitle\` component and optionally the \`CardActions\` component. They
            will be modified to be styled for the overlay.`,
          }, {
            name: 'children',
            pt: 'no',
github mlaursen / react-md / docs / src / app / components / Cards / CardListExample.jsx View on Github external
{Array.apply(null, new Array(6)).map((_, i) =&gt; (
        
          }
            &gt;
            <img src="{randomImage({">
          
          
            favorite
            bookmark
            reply
          
        
      ))}
github mlaursen / react-md / docs / src / app / components / Cards / ExpandableCard.jsx View on Github external
}
          title="Title"
          subtitle="Subtitle"
        /&gt;
        
          
          
        
        
          {loremIpsum(4)}
        
      
      
        
          )}
          &gt;
          <img alt="Some image" src="{randomImage()}">
        
      
    
  );
}
github mlaursen / react-md / docs / src / app / Home / Home.jsx View on Github external
<div>
            
              
              
                <img alt="A person figure sitting at a desk looking at a laptop." src="{`${imgPrefix}/getting-started.jpg`}">
              
            
            
              
              
                <img alt="A person figure painting on a canvas" src="{`${imgPrefix}/customization.jpg`}">
              
            
            
              
              
                <img alt="Two person figures carrying a material item shaped like a pipe." src="{`${imgPrefix}/components.jpg`}">
              
            
          </div>
        
      
    );
  }
}