ޑްރޮޕްޑައުންސް އެވެ
ބޫޓްސްޓްރެޕް ޑްރޮޕްޑައުން ޕްލަގިން އިން ލިންކްތަކުގެ ލިސްޓާއި އަދިވެސް އެތައް ކަމެއް ދައްކާލުމަށް ކޮންޓެކްސްޗުއަލް އޮވަރލޭސް ޓޮގްލް ކުރާށެވެ.
ޑްރޮޕްޑައުންތަކަކީ ޓޮގްލް ކުރެވޭ، ލިންކްތަކުގެ ލިސްޓްތައް ދައްކާލުމަށް ކޮންޓެކްސްޗުއަލް އޯވަރލޭސް އަދި އެހެނިހެން ކަންކަމެވެ. އެއީ ހިމެނޭ ބޫޓްސްޓްރެޕް ޑްރޮޕްޑައުން ޖާވާސްކްރިޕްޓް ޕްލަގިން އާއި އެކު އިންޓަރެކްޓިވް ކޮށްފައިވާ އެއްޗެހިތަކެކެވެ. އެމީހުން ޓޮގްލް ކުރެވެނީ ކްލިކް ކޮށްގެން، ހޯވަރ ކޮށްގެން ނޫން؛ މިއީ ގަސްތުގައި ޑިޒައިން ކުރުމަށް ނިންމާ ނިންމުމެކެވެ.
ޑްރޮޕްޑައުންތައް ބިނާކޮށްފައިވަނީ ތިންވަނަ ފަރާތެއްގެ ލައިބްރަރީއެއް ކަމަށްވާ Popper.js ގެ މައްޗަށް ކަމަށާއި، މިއީ ޑައިނަމިކް ޕޮޒިޝަނިންގ އާއި ވިއުޕޯޓް ޑިޓެކްޝަން ފޯރުކޮށްދޭ އެއްޗެކެވެ. ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓްގެ ކުރިން popper.min.js ހިމަނަން ޔަގީން ކުރައްވާ ނުވަތަ Popper.js ހިމެނޭ bootstrap.bundle.min.js
/ ބޭނުން ކުރައްވާށެވެ. bootstrap.bundle.js
ޑައިނަމިކް ޕޮޒިޝަން ކުރަން ނުޖެހޭތީ ނަވްބާރތަކުގައި ޑްރޮޕްޑައުންތައް ޕޮޒިޝަން ކުރުމަށް Popper.js ބޭނުން ނުކުރެއެވެ.
އަޅުގަނޑުމެންގެ ޖާވާސްކްރިޕްޓް ބިލްޑިންގ ފްރޮމް ސޯސް ނަމަ، އެއަށް ބޭނުންވަނީutil.js
.
WAI ARIA ސްޓޭންޑަރޑް ޑެފިނޭޓް ކުރަނީ ޙަޤީޤީ role="menu"
ވިޖެޓެއް , އެކަމަކު މިއީ ޢަމަލުތައް ނުވަތަ ފަންކްޝަންތައް ޓްރިގަރ ކުރާ އެޕްލިކޭޝަން ކަހަލަ މެނޫތަކަށް ޚާއްޞަ ކަމެކެވެ. އޭރިއާ މެނޫތަކުގައި ހިމެނޭނީ ހަމައެކަނި މެނޫ އައިޓަމްތަކާއި، ޗެކްބޮކްސް މެނޫ އައިޓަމްތަކާއި، ރޭޑިއޯ ބަޓަން މެނޫ އައިޓަމްތަކާއި، ރޭޑިއޯ ބަޓަން ގްރޫޕްތަކާއި، ސަބް މެނޫތަކެވެ.
އަނެއްކޮޅުން ބޫޓްސްޓްރަޕްގެ ޑްރޮޕްޑައުންތަކަކީ ޖެނެރިކް އަދި ތަފާތު ހާލަތްތަކަށާއި މާކަޕް ސްޓްރަކްޗަރތަކަށް އަމަލުކުރެވޭނެ ގޮތަށް ފަރުމާކޮށްފައިވާ އެއްޗެކެވެ. މިސާލަކަށް ސަރޗް ފީލްޑް ނުވަތަ ލޮގިން ފޯމް ފަދަ އިތުރު އިންޕުޓްތަކާއި ފޯމް ކޮންޓްރޯލްތައް ހިމެނޭ ޑްރޮޕްޑައުންތައް އުފެއްދުމަކީ ކުރެވިދާނެ ކަމެކެވެ. މި ސަބަބަށްޓަކައި، ބޫޓްސްޓްރެޕް އިން އުންމީދު ނުކުރާ (ނުވަތަ އޮޓޮމެޓިކުން އިތުރުކުރާނެ) އެއްވެސް role
އަދި ޙަޤީޤީ އޭރިއާ މެނޫތަކަށް aria-
ބޭނުންވާ އެއްވެސް އެޓްރިބިއުޓެއް . މިއަށްވުރެ ވަކި ސިފަތައް ލިޔުންތެރިން އަމިއްލައަށް ހިމަނަން ޖެހޭނެއެވެ.
ނަމަވެސް ބޫޓްސްޓްރަޕް އިން ގިނަ ސްޓޭންޑަރޑް ކީބޯޑް މެނޫ އިންޓަރެކްޝަންތަކަށް ބިލްޓް-އިން ސަޕޯޓް އިތުރުކޮށްދެއެވެ، .dropdown-item
ކަރސަރ ކީސް ބޭނުންކޮށްގެން ވަކިވަކި އެލިމެންޓްތަކުގެ ތެރެއިން ދަތުރުކޮށް ކީ އިން މެނޫ ބަންދުކުރުމުގެ ޤާބިލުކަން ލިބިގެންދެއެވެ ESC.
ޑްރޮޕްޑައުންގެ ޓޮގްލް (ތިބާގެ ބަޓަން ނުވަތަ ލިންކް) އާއި ޑްރޮޕްޑައުން މެނޫ ގެ ތެރޭގައި އޮޅާލާށެވެ .dropdown
، ނުވަތަ ޑިކްލެއާ ކުރާ އެހެން އެލިމެންޓެއް position: relative;
. ޑްރޮޕްޑައުންސް ޓްރިގަރ ކުރެވިދާނެ ފްރޮމް <a>
ނުވަތަ <button>
އެލިމެންޓްތަކުން ތިމާގެ ޕޮޓެންޝަލް ބޭނުންތަކަށް ރަނގަޅަށް ފިޓްވާ ގޮތަށް.
ކޮންމެ ސިންގަލް .btn
ވެސް ޑްރޮޕްޑައުން ޓޮގްލަކަށް ބަދަލުކޮށްލެވޭނީ ބައެއް މާކަޕް ބަދަލުތަކާއެކުގައެވެ. <button>
މިއީ އެއިން އެއްވެސް އުނިއިތުރަކާއެކު އެތަކެތި މަސައްކަތް ކުރުމަށް ޖައްސާލެވޭނެ ގޮތެވެ :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
އަދި <a>
އުފެއްދުންތަކާއެކު:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
އެންމެ ރަނގަޅު ކަމަކީ ކޮންމެ ބަޓަން ވެރިއަންޓަކުން ވެސް މިކަން ކުރެވޭނެ ކަމެވެ:
ހަމައެފަދައިން، އެއް ބަޓަން ޑްރޮޕްޑައުންތަކާ ގާތްގަނޑަކަށް އެއް މާކަޕް އެއް އެކުލެވޭ ނަމަވެސް .dropdown-toggle-split
ޑްރޮޕްޑައުން ކެރެޓްގެ ވަށައިގެން ރަނގަޅު ޖާގައެއް ބެހެއްޓުމަށްޓަކައި އިތުރުކޮށްގެން ސްޕްލިޓް ބަޓަން ޑްރޮޕްޑައުންތައް އުފައްދާށެވެ.
އަޅުގަނޑުމެން މި އިތުރު ކްލާސް ބޭނުންކޮށްގެން padding
ކެރެޓްގެ ދެފަރާތުގައިވާ ހޮރައިޒޮންޓަލް %25 ދަށްކޮށް، margin-left
ގަވާއިދުން ބަޓަން ޑްރޮޕްޑައުންތަކަށް އިތުރުކޮށްފައިވާ ތަޓް ނައްތާލުމެވެ. އެ އިތުރު ބަދަލުތަކުގެ ސަބަބުން ކެރެޓް ސްޕްލިޓް ބަޓަންގައި ސެންޓަރކޮށްފައި ބެހެއްޓި، މައި ބަޓަންގެ ކައިރީގައި މާ އެކަށީގެންވާ ސައިޒެއްގެ ހިޓް އޭރިއާއެއް ލިބިގެންދެއެވެ.
ބަޓަން ޑްރޮޕްޑައުންތައް މަސައްކަތް ކުރަނީ ޑިފޯލްޓް އަދި ސްޕްލިޓް ޑްރޮޕްޑައުން ބަޓަންތައް ހިމެނޭ ގޮތަށް ހުރިހާ ސައިޒެއްގެ ބަޓަންތަކާ އެކުގަ އެވެ.
.dropup
ޕޭރެންޓް އެލިމެންޓަށް އިތުރުކޮށްގެން އެލިމެންޓްތަކުގެ މަތީގައިވާ ޑްރޮޕްޑައުން މެނޫތައް ޓްރިގަރ ކުރާށެވެ .
.dropright
ޕޭރެންޓް އެލިމެންޓަށް އިތުރުކޮށްގެން އެލިމެންޓްތަކުގެ ވާތްފަރާތުގައިވާ ޑްރޮޕްޑައުން މެނޫތައް ޓްރިގަރ ކުރާށެވެ .
.dropleft
ޕޭރެންޓް އެލިމެންޓަށް އިތުރުކޮށްގެން އެލިމެންޓްތަކުގެ ކަނާތްފަރާތުގައި ހުންނަ ޑްރޮޕްޑައުން މެނޫތައް ޓްރިގަރ ކުރާށެވެ .
ތާރީޚީ ގޮތުން ޑްރޮޕްޑައުން މެނޫ ކޮންޓެންޓްތަކަކީ ލިންކްތަކަކަށް ވާން ޖެހުނު ނަމަވެސް v4 ގައި އެއީ މިހާރު އެގޮތެއް ނޫނެވެ. މިހާރު ހަމައެކަނި s ގެ <button>
ބަދަލުގައި ޑްރޮޕްޑައުންތަކުގައި އިޚްތިޔާރީ ގޮތެއްގައި އެލިމެންޓްތައް ބޭނުން ކުރެވިދާނެއެވެ .<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
ބައި ޑިފޯލްޓްކޮށް، ޑްރޮޕްޑައުން މެނޫއެއް އޮޓޮމެޓިކުން %100 މަތިންނާއި އޭގެ ބެލެނިވެރިޔާގެ ކަނާތްފަރާތުގައި ބެހެއްޓިފައި ހުރެއެވެ. ޑްރޮޕްޑައުން މެނޫ އަށް ކަނާތްފަރާތަށް .dropdown-menu-right
އެޑް ކޮށްލާށެވެ ..dropdown-menu
ހެޑްސް އަޕް! ޑްރޮޕްޑައުންތައް ޕޮޒިޝަން ކުރެވެނީ Popper.js ގެ ސަބަބުން (އެއީ ނެވްބާރ އެއްގައި ހިމެނޭ ވަގުތު ފިޔަވައި) އެވެ.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
ކޮންމެ ޑްރޮޕްޑައުން މެނޫއެއްގައި ވެސް ޢަމަލުތަކުގެ ބައިތައް ލޭބަލް ކުރުމަށް ހެޑަރެއް އިތުރުކުރުން.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
ޑިވައިޑަރ އެއް ބޭނުންކޮށްގެން ގުޅުންހުރި މެނޫ އައިޓަމްތަކުގެ ގްރޫޕްތައް ވަކިކުރުން.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
ޑްރޮޕްޑައުން މެނޫއެއްގެ ތެރޭގައި ފޯމެއް ޖައްސައި، ނުވަތަ ޑްރޮޕްޑައުން މެނޫއަކަށް ހަދައި، މާރޖިން ނުވަތަ ޕެޑިންގ ޔުޓިލިޓީސް ބޭނުންކޮށްގެން އެއަށް ބޭނުންވާ ނެގެޓިވް ސްޕޭސް ދިނުން.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
އެކްޓިވް ގޮތަށް ސްޓައިލް.active
ކުރުމަށް ޑްރޮޕްޑައުންގައިވާ ތަކެތި އިތުރުކުރުން .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
.disabled
ޑްރޮޕްޑައުންގައިވާ ތަކެތި ޑިސެބިލް ކޮށްފައިވާ ގޮތަށް ސްޓައިލް ކުރުމަށް އެޑް ކުރާށެވެ .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
.show
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް، ޑްރޮޕްޑައުން ޕްލަގިން އިން ޕޭރެންޓް ލިސްޓް އައިޓަމްގައި ހުންނަ ކްލާސް ޓޮގްލްކޮށްގެން ފޮރުވިފައިވާ ކޮންޓެންޓް (ޑްރޮޕްޑައުން މެނޫތައް) ޓޮގްލް ކުރެއެވެ . އެޕްލިކޭޝަން ލެވެލްއެއްގައި ޑްރޮޕްޑައުން މެނޫތައް ބަންދުކުރުމަށް މި data-toggle="dropdown"
އެޓްރިބިއުޓް ބަރޯސާވެވޭތީ އަބަދުވެސް ބޭނުންކުރުމަކީ ރަނގަޅު ގޮތެކެވެ.
ޓަޗް އެނެބަލް ޑިވައިސްތަކުގައި، ޑްރޮޕްޑައުން ހުޅުވުމުން، އެލިމެންޓްގެ ގާތް ކުދިންނަށް ހުސް ( $.noop
) ހެންޑްލަރސް އިތުރުވެގެންދެއެވެ. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , އެހެން ނޫންނަމަ ޑްރޮޕްޑައުންގެ ބޭރުގައި އެއްވެސް ތަނެއްގައި ޓޭޕް ކުރުމުން ޑްރޮޕްޑައުން ބަންދުކުރާ ކޯޑް ޓްރިގަރ ކުރުމުން ހުއްޓުވޭނެއެވެ. ޑްރޮޕްޑައުން ބަންދުވުމުން، މި އިތުރު ހުސް ހެންޑްލަރތައް ނައްތާލެވޭނެއެވެ.mouseover
<body>
mouseover
data-toggle="dropdown"
ޑްރޮޕްޑައުން އެއް ޓޮގްލް ކުރުމަށް ލިންކަކަށް ނުވަތަ ބަޓަނަކަށް އެޑް ކުރާށެވެ .
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންތަކަށް ގުޅާލާ:
data-toggle="dropdown"
އަދިވެސް ބޭނުންވެއެވެ
ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް ޑްރޮޕްޑައުންއަށް ގޮވާލިޔަސް ނުވަތަ އޭގެ ބަދަލުގައި ޑޭޓާ-އޭޕީއައި ބޭނުންކުރިޔަސް، data-toggle="dropdown"
އަބަދުވެސް ޑްރޮޕްޑައުންގެ ޓްރިގަރ އެލިމެންޓްގައި ހުންނަން ޖެހެއެވެ.
ޑޭޓާ އެޓްރިބިއުޓްސް ނުވަތަ ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އޮޕްޝަންތައް ޕާސް ކުރެވޭނެ އެވެ. ޑޭޓާ އެޓްރިބިއުޓްތަކަށް، data-
ގައިވާ ފަދައިން، އޮޕްޝަން ނަން އަށް އިތުރުކުރުން data-offset=""
.
ނަން | ވައްތަރު | ޑީފޯލްޓް | ތަފްޞީލު |
---|---|---|---|
އޮފްސެޓް ކޮށްލާށެވެ | ނަންބަރު | ސްޓްރިންގް | ފަންކްޝަން | 0 | އޭގެ ޓާގެޓަށް ނިސްބަތްކޮށް ޑްރޮޕްޑައުންގެ އޮފްސެޓް. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ އޮފްސެޓް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
ފުށުންޖެހުން | ބޫލިއަން އެވެ | ރަނގަޅު | ރެފަރެންސް އެލިމެންޓްގައި އޮވަރލެޕް ވެއްޖެނަމަ ޑްރޮޕްޑައުން ފްލިޕް ކުރުމަށް ހުއްދަ ދޭށެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ ފްލިޕް ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
ބައުންޑަރީ އެވެ | ސްޓްރިންގް | އެއްޗެއްގެ ބައެއް | 'ސްކްރޯލްޕޭރެންޓް' އެވެ. | ޑްރޮޕްޑައުން މެނޫގެ އޯވަރފްލޯ ކޮންސްޓްރެއިންޓް ބައުންޑަރީ. 'viewport' , 'window' , 'scrollParent' , ނުވަތަ HTMLElement ރެފަރެންސެއް (އެކަނި ޖާވާސްކްރިޕްޓް) ގެ އަގުތައް ބަލައިގަންނައެވެ . އިތުރު މަޢުލޫމާތު ހޯދުމަށް Popper.js ގެ preventOverflow ޑޮކްސް އަށް ރިޢާޔަތް ކުރައްވާށެވެ . |
ނޯޓް ކުރާއިރު boundary
ސެޓް ފިޔަވައި އެހެން އެއްވެސް އަގަކަށް ސެޓް ކުރާއިރު 'scrollParent'
، ސްޓައިލް ކޮންޓެއިނަރަށް position: static
އަމަލު ކުރެވެއެވެ ..dropdown
ގޮތް | ތަފްޞީލު |
---|---|
$().dropdown('toggle') |
ދީފައިވާ ނެވްބާރެއް ނުވަތަ ޓެބް ކުރެވިފައިވާ ނެވިގޭޝަނެއްގެ ޑްރޮޕްޑައުން މެނޫ ޓޮގްލް ކުރެއެވެ. |
$().dropdown('update') |
އެލިމެންޓެއްގެ ޑްރޮޕްޑައުންގެ މަޤާމު އަޕްޑޭޓް ކުރެއެވެ. |
$().dropdown('dispose') |
އެލިމެންޓެއްގެ ޑްރޮޕްޑައުން ހަލާކުކޮށްލައެވެ. |
ހުރިހާ ޑްރޮޕްޑައުން އިވެންޓްތަކެއް .dropdown-menu
's ޕޭރެންޓް އެލިމެންޓަށް ފަޔަރ ކުރެވި، relatedTarget
ޕްރޮޕަޓީއެއް ހުންނައިރު، އޭގެ އަގަކީ ޓޮގްލިންގ އެންކަރ އެލިމެންޓެވެ.
ހަރަކާތް | ތަފްޞީލު |
---|---|
show.bs.dropdown |
މި އިވެންޓް ވަގުތުން ފަޔަރ ވެގެން ދަނީ ޝޯ އިންސްޓޭންސް މެތޯޑަށް ގޮވާލުމުންނެވެ. |
shown.bs.dropdown |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފެންނަ ގޮތަށް ހެދުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ. |
hide.bs.dropdown |
މި އިވެންޓް ވަގުތުން ފަޔަރ ކުރެވެނީ ހައިޑް އިންސްޓޭންސް މެތޯޑަށް ގޮވާ ނިމުމުންނެވެ. |
hidden.bs.dropdown |
މި އިވެންޓް ފަޔަރ ކުރެވެނީ ޑްރޮޕްޑައުން ޔޫޒަރަށް ފޮރުވުން ނިމުމުން (ސީއެސްއެސް ޓްރާންސިޝަންތަކަށް އިންތިޒާރު ކުރާނެ، ފުރިހަމަ ކުރުމަށް) އެވެ. |