๊ธฐ๋ฅ ์์ฒญ: ์์์ ์ ๋ ฅ(ํ ์คํธ/์ซ์)์ ์ค๋ฅธ์ชฝ ์ ๋ ฌํ์ฌ ํ ๊ธ์ด ์๋ ๊ฒฝ์ฐ ์์์ด ๋ ์ ๋ณด์ด๋๋ก ํ๋ ๊ธฐ๋ฅ
์์ฑ(์: item-right )์ด ์ด์จ ์ ๋ ฅ์์ ์๋ํ๊ธฐ๋ฅผ ์ํฉ๋๋ค.
์ฌํ ๋จ๊ณ:
์์์ ํ ๊ธ ์์ - ์ผ์ชฝ์ ๋ ์ด๋ธ์ด ์๋ ์ค๋ฅธ์ชฝ์ ๋ํ๋จ
<ion-row>
<ion-col>
<ion-item no-lines>
<ion-label secondary>Published</ion-label>
<ion-toggle [(ngModel)]="published" toggle></ion-toggle>
</ion-item>
</ion-col>
</ion-row>
ํ์ง๋ง ์ด๋ ๊ฒ ํ๋ฉด
<ion-row>
<ion-col>
<ion-item no-lines>
<ion-label>City</ion-label>
<ion-input [(ngModel)]="city" ngControl="city"
maxlength="10"
type="text"></ion-input>
</ion-item>
</ion-col>
</ion-row>
๊ทธ๋ฌ๋ฉด ์ ๋ ฅ์ด ๋ ์ด๋ธ ์ค๋ฅธ์ชฝ์ ๋ํ๋ฉ๋๋ค.
์ ๋ ฅ์ ์ด๋ํ๊ธฐ ์ํด item-right๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ต๋๋ค. ์ค๋ฅธ์ชฝ ๊ฐ์ฅ์๋ฆฌ์ ๋ง์ถฐ ์ ๋ ฌ๋ฉ๋๋ค.
<ion-row>
<ion-col>
<ion-item no-lines>
<ion-label secondary>City</ion-label>
<ion-input item-right [(ngModel)]="city" ngControl="city"
maxlength="10"
type="text"></ion-input>
</ion-item>
</ion-col>
</ion-row>
์ด์จ ๋ฒ์ : 1.x / 2.x
2
๋ธ๋ผ์ฐ์ ๋ฐ ์ด์ ์ฒด์ : iOS / Android / Chrome
ํฌ๋กฌ(๊ฐ๋ฐ์ค)
์ ๋ ฅ ํ ์คํธ๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌํ์๊ฒ ์ต๋๊น? ์ฐพ๊ณ ์๋ ์ฌ์ง์ด ์์ต๋๊น?
ion-input
์ text-right
์์ฑ์ ์ฌ์ฉํ์ฌ ํ
์คํธ๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌํ ์ ์์ง๋ง, ์ด๋ ๊ฒ ํ ๋ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ์ ๋ช ๊ฐ์ง UI ๋ฌธ์ ๊ฐ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
์ - ์ข์ต๋๋ค(๊ทธ๋ฆฌ๊ณ padding-right๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ํ ํจ๋ฉ์ด ์ํ๋จ). ๋ชจ๋ ์ข ๋ฅ๋ฅผ ์๋ํ์ง๋ง ๊ทธ๋ ์ง ์์์ต๋๋ค :)
์ฝ๊ฐ ํผ๋์ค๋ฌ์ด - ํ ๊ธ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋ํ๊ณ ๋ค๋ฅธ ๊ตฌ์ฑ ์์ ๋๋ ์ง์ ํ ์คํธ์๋ ํญ๋ชฉ ์ค๋ฅธ์ชฝ์ด ํ์ํ๊ณ ์ ๋ ฅ์๋ ํ ์คํธ ์ค๋ฅธ์ชฝ ๋ฐ ํจ๋ฉ์ด ํ์ํฉ๋๋ค.
์ด ๋ชจ๋ ๊ฒ์ ์ผ๊ด๋ ๋ฐฉ์์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ ๊ฒ์ ๋๋ค(๋๋ ๋จ๋ฐฉํฅ, ํน์ํ ๊ฒฝ์ฐ๋ก ํ ๊ธ).
๊ฐ์ฌํฉ๋๋ค!
๋ฐ๋ผ์ item-right
๋ ํนํ ์ฝํ
์ธ ํ๋ก์ ์
์ ์ฌ์ฉ๋ฉ๋๋ค. ๋๋์ด ์์ฑ ์ ๋ ฌ ํ
์คํธ๊ฐ ์๊ธฐ ๋๋ฌธ์ ํผ๋ ๋ ๋ง๋๋ ์๊ฐ item-right
์ธ๋ถ์ ์์น ์์์ ์ฌ์ฉ๋๋ input-wrapper
๋ง์์ดํ์ง ์์ต๋๋ค ์์
ion-input
๊ฐ ๋ฐฐ์น๋์ด ์๊ธฐ ๋๋ฌธ์ input-wrapper
.
ํญ๋ชฉ์ ์ฝํ ์ธ ํฌ์์ ๋ํ ๋ช ๊ฐ์ง ๋ฌธ์๋ฅผ ์ถ๊ฐํ์ต๋๋ค. http://ionicframework.com/docs/v2/api/components/item/Item/#item -placement
์ด์ ๋ํ ๊ฐ์ฅ ์ข์ ํด๊ฒฐ์ฑ ์ ๋ฌธ์ํ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ ์คํธ ์ ๋ ฌ์ ์ ํธ๋ฆฌํฐ ์์ฑ์ ์ฌ์ฉํ์ฌ ์ํํด์ผ ํฉ๋๋ค. http://ionicframework.com/docs/v2/theming/css-utilities/
์ด์ ๋ํ ๋ฌธ์๋ฅผ ์ถ๊ฐํ๊ธฐ ์ํด ๋ฌธ์ ๋ฅผ ๋ง๋ค์์ต๋๋ค. https://github.com/driftyco/ionic-site/issues/661
๋ฌธ์ ๋ฅผ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ ๋ ฅ ํ ์คํธ๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌํ์๊ฒ ์ต๋๊น? ์ฐพ๊ณ ์๋ ์ฌ์ง์ด ์์ต๋๊น?
ion-input
์text-right
์์ฑ์ ์ฌ์ฉํ์ฌ ํ ์คํธ๋ฅผ ์ค๋ฅธ์ชฝ์ผ๋ก ์ ๋ ฌํ ์ ์์ง๋ง, ์ด๋ ๊ฒ ํ ๋ ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ์ ๋ช ๊ฐ์ง UI ๋ฌธ์ ๊ฐ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.