カードコンポーネント
14944 ワード
反応中のカードコンポーネントは、コンテンツコンテナーの一種です.これは、画像、ヘッダーを追加するためのオプションを提供し、フッター、コンテンツのさまざまな、コンテキストの背景色、ポストの詳細を追加し、プロファイルの詳細と優れた表示オプションを追加します.ここでは、カードコンポーネントを作成します.
カードのコンポーネントを美しくするには、CSSを追加します.
より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング
カードコンポーネントを作成する
class Card extends React.Component {
render() {
return(
<div className='card-side side-back'>
<div className='container-fluid'>
<h1>Let's get in touch!</h1>
<form formAction='' className='card-form'>
<div className='row'>
<div className='col-xs-6'>
<input name='contactFirstName' id='contactFirstName' type='text' placeholder='Your first name' />
</div>
<div className='col-xs-6'>
<input name='contactLastName' id='contactLastName' type='text' placeholder='Your last name' />
</div>
</div>
<div className='row'>
<div className='col-xs-6'>
<input name='contactEmail' id='contactEmail' type='email' placeholder='Your email address' />
</div>
<div className='col-xs-6'>
<input name='contactSubject' id='contactSubject' type='text' placeholder='Subject' />
</div>
</div>
<button className='btn btn-primary' type='submit'>Send message</button>
</form>
</div>
</div>
)
}
}
CSSをカードコンポーネントに追加する
カードのコンポーネントを美しくするには、CSSを追加します.
/*- Card container -*/
.card-container {
position: relative;
z-index: 1;
margin: 32px auto;
max-width: 720px;
height: 420px;
perspective: 1000px;
}
/*- Card body -*/
.card-body {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .7s linear;
}
/*- Flipping the card -*/
.card-container:hover .card-body {
transform: rotateY(180deg);
}
/*- Card sides -*/
.card-side {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
color: #212121;
background-color: #fff;
backface-visibility: hidden;
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
}
/*- Front side -*/
/*- Back side -*/
.side-back {
z-index: 2;
padding: 32px;
text-align: center;
transform: rotateY(180deg);
}
/*- Form -*/
.card-form {
margin-top: 32px;
}
.card-form .row + .row,
.card-form .row + fieldset,
.card-form fieldset + fieldset {
margin-top: 16px;
}
input {
padding: 8px;
width: 100%;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #eee;
border-left: 0;
&:focus {
outline: 0;
border-bottom: 1px solid #0c81f6;
}
}
.btn-primary {
padding: 8px 16px;
font-size: 16px;
background-color: #0c81f6;
border: none;
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
transition: background-color .25s ease-in, box-shadow .25s ease-in;
&:focus,
&:hover {
background-color: lighten(#0c81f6, 15%);
box-shadow: 0 18px 35px rgba(50,50,93,.1),0 8px 15px rgba(0,0,0,.07);
}
}
してください共有購読し、あなたのためにもっと書くことを動機に肯定的なフィードバックを与える.より多くのチュートリアルのために、visit my website .
ありがとう
ハッピーコーディング
Reference
この問題について(カードコンポーネント), 我々は、より多くの情報をここで見つけました https://dev.to/readymadecode/card-components-in-react-29ekテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol