Ionic-framework: v2 ํ•ญ๋ชฉ ์˜ค๋ฅธ์ชฝ ํ…์ŠคํŠธ/์–‘์‹์— ์ˆซ์ž ์ž…๋ ฅ

์— ๋งŒ๋“  2016๋…„ 02์›” 18์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ionic-team/ionic-framework

๋ฌธ์ œ์— ๋Œ€ํ•œ ๊ฐ„๋žตํ•œ ์„ค๋ช…:

๊ธฐ๋Šฅ ์š”์ฒญ: ์–‘์‹์˜ ์ž…๋ ฅ(ํ…์ŠคํŠธ/์ˆซ์ž)์„ ์˜ค๋ฅธ์ชฝ ์ •๋ ฌํ•˜์—ฌ ํ† ๊ธ€์ด ์žˆ๋Š” ๊ฒฝ์šฐ ์–‘์‹์ด ๋” ์ž˜ ๋ณด์ด๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ

์–ด๋–ค ํ–‰๋™์„ ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

์†์„ฑ(์˜ˆ: 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 ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

screen shot 2016-02-18 at 5 43 48 pm

๋ชจ๋“  3 ๋Œ“๊ธ€

์ž…๋ ฅ ํ…์ŠคํŠธ๋ฅผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์ฐพ๊ณ  ์žˆ๋Š” ์‚ฌ์ง„์ด ์žˆ์Šต๋‹ˆ๊นŒ?

ion-input ์— text-right ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ…์ŠคํŠธ๋ฅผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ด๋ ‡๊ฒŒ ํ•  ๋•Œ ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ์— ๋ช‡ ๊ฐ€์ง€ UI ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

screen shot 2016-02-18 at 5 43 48 pm

์˜ˆ - ์ข‹์Šต๋‹ˆ๋‹ค(๊ทธ๋ฆฌ๊ณ  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

๋ฌธ์ œ๋ฅผ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰