편집토론기록

사용자:하늘/참고/OO.UI: 두 판 사이의 차이

< 사용자:하늘
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 25개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<onlyinclude><templatestyles src='틀:검색창/styles.css'/><div style="{{{2|{{{style|}}}}}}" class="input_box {{{3|{{{class|normal}}}}}} {{{type|}}}">{{#tag:inputbox|
== OO.ui ==
type={{{타입|search}}}
bgcolor={{{배경색|}}}
width={{{너비|}}}
page={{{페이지|}}}
default={{{기본|}}}
preload={{{포함|}}}
editintro={{{editintro|}}}
buttonlabel={{{버튼라벨|}}}
hidden={{{숨김|}}}
searchbuttonlabel={{{검색버튼라벨|}}}
fulltextbutton={{{fulltextbutton|}}}
labeltext={{{labeltext|}}}
break={{{break|}}}
namespaces={{{namespaces|}}}
prefix={{{prefix|}}}
placeholder={{{placeholder|}}}
minor={{{minor|}}}
nosummary={{{nosummary|}}}
summary={{{summary|}}}
id={{{id|}}}
inline={{{inline|}}}
dir={{{dir|}}}
preloadparams[]=
searchfilter={{{searchfilter|}}}
useve={{{useve|}}}
arialabel={{{arialabel|}}}
}}</div></onlyinclude>


== Parameters ==  
=== demo ===
https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop


=== 사용법 ===
<syntaxhighlight lang="js">
mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced'], '''function''');


{| class="wikitable"
function () { ........
!  Parameter
</syntaxhighlight>
!  Description
!  Scope
!  Compatibility
!  Example
!  Result
|-
|'''arialabel='''
|Supply the aria-label attribute to the inputbox to allow generated markup be accessible to screen readers
| All types
|
|<syntaxhighlight lang="html"><inputbox>
type=search
arialabel=Search the Wiki
</inputbox></syntaxhighlight>
|<inputbox>
type=search
arialabel=Search the wiki
</inputbox>
|-
|'''bgcolor='''
|  Do not use quotes.
|  All types
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search
bgcolor=#eeeeff
</inputbox></syntaxhighlight>
|<inputbox>
type=search
bgcolor=#eeeeff
</inputbox>
|-
|'''width='''
|  Sets the width of the InputBox in characters.
|  All types
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=create
width=24
</inputbox></syntaxhighlight>
|<inputbox>
type=create
width=24
</inputbox>
|-
|'''default='''
|  Default text to put in the InputBox.
|  All types
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=comment
default=User talk:Eloquence
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
default=User talk:Eloquence
</inputbox>
|-
|'''preload='''
|  The page under this title will be preloaded (see ) into the blank editbox when a new page is created.
| create, comment, commenttitle
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=create
preload=Log
</inputbox></syntaxhighlight>
|<inputbox>
type=create
preload=Log
</inputbox>
|-
| colspan="6" |  Enter the title of a non-existent page in the example InputBox above or below, and click "" respectively to test this effect.
|-
|'''editintro='''
|  The page which is given under this parameter will be shown, as instructions, ''above'' the editing window.
| create, comment
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=comment
editintro=MediaWiki:Missingcommenttext
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
editintro=MediaWiki:Missingcommenttext
</inputbox>
|-
|'''buttonlabel='''
|  This label will be used for the main button of the form.
|  All types
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=comment
buttonlabel= Add new rumor
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
buttonlabel= Add new rumor
</inputbox>
|-
|'''hidden='''
|  This specifies that there is no InputBox.


It is used with parameter "", now not being a default, but the fixed value of the name of the page.
아이콘을 사용하기 위한 모듈<br/>
|create, comment
oojs-ui.styles.icons-editing-advanced<br/>
|''?''
oojs-ui.styles.icons-movement<br/>
|<syntaxhighlight lang="html"><inputbox>
oojs-ui.styles.icons-content<br/>
type=comment
...
editintro=Extension:InputBox/editintro comment
preload=Extension:InputBox/preload
hidden=yes
default=Extension talk:InputBox
buttonlabel= Post a comment on the talk page
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
editintro=Extension:InputBox/editintro comment
preload=Extension:InputBox/preload
hidden=yes
default=Extension talk:InputBox
buttonlabel= Post a comment on the talk page
</inputbox>
|-
|'''searchbuttonlabel='''
|  This label will be used for the "Search full text" button of the search form.
| search, fulltext
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search
searchbuttonlabel= Dig deeper
</inputbox></syntaxhighlight>
|<inputbox>
type=search
searchbuttonlabel= Dig deeper
</inputbox>
|-
|'''fulltextbutton='''
|  Show the full text search button on search2 form
|search2
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search2
searchbuttonlabel= Dig deeper
fulltextbutton=true
</inputbox></syntaxhighlight>
|<inputbox>
type=search
searchbuttonlabel= Dig deeper
fulltextbutton=true
</inputbox>
|-
|'''labeltext='''
|  Text to print beside the button
|search2
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search2
searchbuttonlabel= Dig deeper
labeltext= Look for:
</inputbox></syntaxhighlight>
|<inputbox>
type=search2
searchbuttonlabel= Dig deeper
labeltext= Look for:
</inputbox>
|-
|'''break='''
|  Defaults to  (use a line break).
|  All types
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=create
width=24
break=no
</inputbox></syntaxhighlight>
|<inputbox>
type=create
width=24
break=no
</inputbox>
|-
|'''namespaces='''
|  Support for namespace checkboxes in fulltext search.


With "", main article namespace is checked by default.
아이콘 그룹은 아래 데모에서 확인<br/>
| search, fulltext
https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search
namespaces=Main**,Help
</inputbox></syntaxhighlight>
|<inputbox>
type=search
namespaces=Main**,Help
</inputbox>
|-
|'''prefix='''
|
* Narrow down search to pages beginning with certain prefix.  Defaults to empty string (search all pages).


Depending on which of the features you're going to use, you should list one or more of the following modules as dependencies of your modules that use OOUI:


* Create new page beginning with a certain prefix.
* <code>oojs-ui-core</code> — OOUI's core JavaScript library. Contains the basic widgets and layouts that are also available in PHP (see exact list above) and the ability to infuse them.
 
* <code>oojs-ui-widgets</code> — Additional widgets and layouts.
 
* <code>oojs-ui-toolbars</code> — Toolbar and tools.
* In , the prefix is prepended to the default parameter.
* <code>oojs-ui-windows</code> — Windows and dialogs.
 
* <code>oojs-ui.styles.icons-*</code> — Specific icon styles depending on what icons you may want to use, e.g. <code>oojs-ui.styles.icons-interactions</code> for check icon. Group names can be found in demo page or in code.
 
Remark: underscores aren't recognized as spaces.
 
|search, fulltext, create
|''?''
|<syntaxhighlight lang="html"><inputbox>
type=search
prefix={{FULLPAGENAME}}/Archive
</inputbox></syntaxhighlight>
|<inputbox>
type=search
prefix={{FULLPAGENAME}}/Archive
</inputbox>
 
The button below prefixes the name with .
<inputbox>
type=create
preload=Template:Article wizard/userpageskeleton
default= new article name here
prefix=Special:Mypage/
editintro=Wikipedia:Article wizard/Wizard-New edit instructions userdraft
buttonlabel= Create a userspace draft
width=50
</inputbox>
|-
|'''placeholder='''
|  Define placeholder text that will display in the input box when it is empty.
|  All types
|
|<syntaxhighlight lang="html"><inputbox>
type=search
placeholder= Search this Wiki
</inputbox></syntaxhighlight>
|<inputbox>
type=search
placeholder= Search this Wiki
</inputbox>
|-
|'''page='''
|  Page to posts comment to, or page to move.
| comment, move
|
|<syntaxhighlight lang="html"><inputbox>
type=comment
page=Project:Sandbox
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
page=Project:Sandbox
</inputbox>
|-
|'''minor='''
|  Minor edit.
| comment, create
|
|<syntaxhighlight lang="html"><inputbox>
type=comment
page=Project:Sandbox
minor=true
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
page=Project:Sandbox
minor=true
</inputbox>
|-
|'''nosummary='''
|  Edit summary (headline) not required for new comment.
|comment
|
|<syntaxhighlight lang="html"><inputbox>
type=comment
page=Project:Sandbox
nosummary=true
</inputbox></syntaxhighlight>
|<inputbox>
type=create
page=Project:Sandbox
nosummary=true
</inputbox>
|-
|'''summary='''
|  Edit summary or move reason.
| create, move
|
|<syntaxhighlight lang="html"><inputbox>
type=create
default=Special:Mypage/inputbox test
summary=Foo
</inputbox></syntaxhighlight>
|<inputbox>
type=create
default=Special:Mypage/inputbox test
summary=Foo
</inputbox>
|-
|'''id='''
|  id attribute for .
|  All types
|<syntaxhighlight lang="html"><inputbox>
type=comment
page=Project:Sandbox
summary=Foo
id=bar
</inputbox></syntaxhighlight>
|<inputbox>
type=comment
page=Project:Sandbox
summary=Foo
id=bar
</inputbox>
|-
|'''inline='''
|  Make the InputBox be an inline element (no line break at beginning).
| search2
|
|<syntaxhighlight lang="html"> Text here: <inputbox>
type=search2
inline=true
width=10
</inputbox></syntaxhighlight>
|  Text here: <inputbox>
type=search2
inline=true
width=10
</inputbox>
|-
|'''dir='''
|  Defaults to directionality of the page's language.
|  All types
|
|<syntaxhighlight lang="html"><inputbox>
dir=rtl
type=comment
page=Project:Sandbox
summary=Foo
</inputbox></syntaxhighlight>
|<inputbox>
dir=rtl
type=comment
page=Project:Sandbox
summary=Foo
</inputbox>
|-
| id="preloadparams" |'''preloadparams[]='''
|  See [[Creating pages with preloaded text]].
| create, comment, commenttitle
|
|<syntaxhighlight lang="html"><inputbox>
type=create
preload=Log
preloadparams[]=param1
preloadparams[]=param2
</inputbox></syntaxhighlight>
|<inputbox>
type=create
preload=Log
preloadparams[]=param1
preloadparams[]=param2
</inputbox>
|-
|'''searchfilter='''
| Specify parameters to append to the search
|search
|
|<syntaxhighlight lang="html"><inputbox>
type=search
searchfilter=insource:foo
</inputbox></syntaxhighlight>
|<inputbox>
type=search
searchfilter=insource:foo
</inputbox>
|-
|'''useve='''
|  When creating a page the input box will use the new visual editor, if the extension is installed, and this parameter is set to true.
| create, comment
|
|<syntaxhighlight lang="html"><inputbox>
type=create
break=no
useve=true
</inputbox></syntaxhighlight>
|<inputbox>
type=create
break=no
useve=true
</inputbox>
|}
 
Applying  to an existing page simply gives the edit page.
In that case  is ignored.
Applying  for a new page works.
 
The texts taken from the .
Unfortunately |Upload]] summary.

2023년 12월 30일 (토) 22:25 기준 최신판

OO.ui[편집 | 원본 편집]

demo[편집 | 원본 편집]

https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop

사용법[편집 | 원본 편집]

mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced'], '''function''');

function () { ........

아이콘을 사용하기 위한 모듈
oojs-ui.styles.icons-editing-advanced
oojs-ui.styles.icons-movement
oojs-ui.styles.icons-content
...

아이콘 그룹은 아래 데모에서 확인
https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop

Depending on which of the features you're going to use, you should list one or more of the following modules as dependencies of your modules that use OOUI:

  • oojs-ui-core — OOUI's core JavaScript library. Contains the basic widgets and layouts that are also available in PHP (see exact list above) and the ability to infuse them.
  • oojs-ui-widgets — Additional widgets and layouts.
  • oojs-ui-toolbars — Toolbar and tools.
  • oojs-ui-windows — Windows and dialogs.
  • oojs-ui.styles.icons-* — Specific icon styles depending on what icons you may want to use, e.g. oojs-ui.styles.icons-interactions for check icon. Group names can be found in demo page or in code.