편집토론기록

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

< 사용자:하늘
편집 요약 없음
편집 요약 없음
 
(사용자 2명의 중간 판 24개는 보이지 않습니다)
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|}}}
namespaces={{{이름공간|}}}
prefix={{{경로|}}}
placeholder={{{placeholder|}}}
minor={{{잔글|}}}
nosummary={{{요약없음|}}}
summary={{{요약|}}}
id={{{id|}}}
dir={{{dir|}}}
preloadparams[]=
searchfilter={{{검색필터|}}}
useve={{{useve|}}}
arialabel={{{arialabel|}}}
}}</div></onlyinclude>


== Parameters ==  
=== demo ===
{| class="wikitable"
https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop
!  Parameter
!  Description
!  Scope
!  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.
=== 사용법 ===
|create, comment
<syntaxhighlight lang="js">
|<syntaxhighlight lang="html"><inputbox>
mw.loader.using(['oojs-ui-core', 'oojs-ui.styles.icons-editing-advanced'], '''function''');
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.
function () { ........
| search, fulltext
</syntaxhighlight>
|<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).


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


* Create new page beginning with a certain prefix.
아이콘 그룹은 아래 데모에서 확인<br/>
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:


* In , the prefix is prepended to the default parameter.
* <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.
Remark: underscores aren't recognized as spaces.
* <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.
|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.