123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828 |
- {
- "version": 1.1,
- "tags": [
- {
- "name": "ion-accordion",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the accordion cannot be interacted with."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "readonly",
- "description": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity."
- },
- {
- "name": "toggle-icon",
- "description": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
- },
- {
- "name": "toggle-icon-slot",
- "description": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "value",
- "description": "The value of the accordion. Defaults to an autogenerated\nvalue."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/accordion/accordion.tsx"
- }
- ]
- },
- {
- "name": "ion-accordion-group",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing."
- },
- {
- "name": "disabled",
- "description": "If `true`, the accordion group cannot be interacted with."
- },
- {
- "name": "expand",
- "description": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
- "values": [
- {
- "name": "compact"
- },
- {
- "name": "inset"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "multiple",
- "description": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time."
- },
- {
- "name": "readonly",
- "description": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity."
- },
- {
- "name": "value",
- "description": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`"
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/accordion-group/accordion-group.tsx"
- }
- ]
- },
- {
- "name": "ion-action-sheet",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the action sheet will animate."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the action sheet will be dismissed when the backdrop is clicked."
- },
- {
- "name": "css-class",
- "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
- },
- {
- "name": "header",
- "description": "Title for the action sheet."
- },
- {
- "name": "is-open",
- "description": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "sub-header",
- "description": "Subtitle for the action sheet."
- },
- {
- "name": "translucent",
- "description": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/action-sheet/action-sheet.tsx"
- }
- ]
- },
- {
- "name": "ion-alert",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the alert will animate."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the alert will be dismissed when the backdrop is clicked."
- },
- {
- "name": "css-class",
- "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
- },
- {
- "name": "header",
- "description": "The main title in the heading of the alert."
- },
- {
- "name": "is-open",
- "description": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "message",
- "description": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "sub-header",
- "description": "The subtitle in the heading of the alert. Displayed under the title."
- },
- {
- "name": "translucent",
- "description": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/alert/alert.tsx"
- }
- ]
- },
- {
- "name": "ion-app",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/app/app.tsx"
- }
- ]
- },
- {
- "name": "ion-avatar",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/avatar/avatar.tsx"
- }
- ]
- },
- {
- "name": "ion-back-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "default-href",
- "description": "The url to navigate back to by default when there is no history."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the button."
- },
- {
- "name": "icon",
- "description": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "text",
- "description": "The text to display in the back button."
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/back-button/back-button.tsx"
- }
- ]
- },
- {
- "name": "ion-backdrop",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "stop-propagation",
- "description": "If `true`, the backdrop will stop propagation on tap."
- },
- {
- "name": "tappable",
- "description": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event."
- },
- {
- "name": "visible",
- "description": "If `true`, the backdrop will be visible."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/backdrop/backdrop.tsx"
- }
- ]
- },
- {
- "name": "ion-badge",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/badge/badge.tsx"
- }
- ]
- },
- {
- "name": "ion-breadcrumb",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "active",
- "description": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the breadcrumb."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "separator",
- "description": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last."
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/breadcrumb/breadcrumb.tsx"
- }
- ]
- },
- {
- "name": "ion-breadcrumbs",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "items-after-collapse",
- "description": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed."
- },
- {
- "name": "items-before-collapse",
- "description": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed."
- },
- {
- "name": "max-items",
- "description": "The maximum number of breadcrumbs to show before collapsing."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/breadcrumbs/breadcrumbs.tsx"
- }
- ]
- },
- {
- "name": "ion-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "button-type",
- "description": "The type of button."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the button."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "expand",
- "description": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
- "values": [
- {
- "name": "block"
- },
- {
- "name": "full"
- }
- ]
- },
- {
- "name": "fill",
- "description": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
- "values": [
- {
- "name": "clear"
- },
- {
- "name": "default"
- },
- {
- "name": "outline"
- },
- {
- "name": "solid"
- }
- ]
- },
- {
- "name": "form",
- "description": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "shape",
- "description": "Set to `\"round\"` for a button with more rounded corners.",
- "values": [
- {
- "name": "round"
- }
- ]
- },
- {
- "name": "size",
- "description": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
- "values": [
- {
- "name": "default"
- },
- {
- "name": "large"
- },
- {
- "name": "small"
- }
- ]
- },
- {
- "name": "strong",
- "description": "If `true`, activates a button with a heavier font weight."
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/button/button.tsx"
- }
- ]
- },
- {
- "name": "ion-buttons",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "collapse",
- "description": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/buttons/buttons.tsx"
- }
- ]
- },
- {
- "name": "ion-card",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "button",
- "description": "If `true`, a button tag will be rendered and the card will be tappable."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the card."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- },
- {
- "name": "type",
- "description": "The type of the button. Only used when an `onclick` or `button` property is present.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card/card.tsx"
- }
- ]
- },
- {
- "name": "ion-card-content",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-content/card-content.tsx"
- }
- ]
- },
- {
- "name": "ion-card-header",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-header/card-header.tsx"
- }
- ]
- },
- {
- "name": "ion-card-subtitle",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-subtitle/card-subtitle.tsx"
- }
- ]
- },
- {
- "name": "ion-card-title",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-title/card-title.tsx"
- }
- ]
- },
- {
- "name": "ion-checkbox",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "alignment",
- "description": "How to control the alignment of the checkbox and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the checkbox `display` to `block`.",
- "values": [
- {
- "name": "center"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "checked",
- "description": "If `true`, the checkbox is selected."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the checkbox."
- },
- {
- "name": "error-text",
- "description": "Text that is placed under the checkbox label and displayed when an error is detected."
- },
- {
- "name": "helper-text",
- "description": "Text that is placed under the checkbox label and displayed when no error is detected."
- },
- {
- "name": "indeterminate",
- "description": "If `true`, the checkbox will visually appear as indeterminate."
- },
- {
- "name": "justify",
- "description": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the checkbox `display` to `block`.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "space-between"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "required",
- "description": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
- },
- {
- "name": "value",
- "description": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/checkbox/checkbox.tsx"
- }
- ]
- },
- {
- "name": "ion-chip",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the chip."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "outline",
- "description": "Display an outline style button."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/chip/chip.tsx"
- }
- ]
- },
- {
- "name": "ion-col",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "offset",
- "description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available."
- },
- {
- "name": "offset-lg",
- "description": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "offset-md",
- "description": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "offset-sm",
- "description": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "offset-xl",
- "description": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "offset-xs",
- "description": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "pull",
- "description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available."
- },
- {
- "name": "pull-lg",
- "description": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available."
- },
- {
- "name": "pull-md",
- "description": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available."
- },
- {
- "name": "pull-sm",
- "description": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available."
- },
- {
- "name": "pull-xl",
- "description": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available."
- },
- {
- "name": "pull-xs",
- "description": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available."
- },
- {
- "name": "push",
- "description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available."
- },
- {
- "name": "push-lg",
- "description": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "push-md",
- "description": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "push-sm",
- "description": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "push-xl",
- "description": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "push-xs",
- "description": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
- },
- {
- "name": "size",
- "description": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content."
- },
- {
- "name": "size-lg",
- "description": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
- },
- {
- "name": "size-md",
- "description": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
- },
- {
- "name": "size-sm",
- "description": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
- },
- {
- "name": "size-xl",
- "description": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
- },
- {
- "name": "size-xs",
- "description": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/col/col.tsx"
- }
- ]
- },
- {
- "name": "ion-content",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "fixed-slot-placement",
- "description": "Controls where the fixed content is placed relative to the main content\nin the DOM. This can be used to control the order in which fixed elements\nreceive keyboard focus.\nFor example, if a FAB in the fixed slot should receive keyboard focus before\nthe main page content, set this property to `'before'`.",
- "values": [
- {
- "name": "after"
- },
- {
- "name": "before"
- }
- ]
- },
- {
- "name": "force-overscroll",
- "description": "If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.\nIf the content exceeds the bounds of ionContent, nothing will change.\nNote, this does not disable the system bounce on iOS. That is an OS level setting."
- },
- {
- "name": "fullscreen",
- "description": "If `true`, the content will scroll behind the headers\nand footers. This effect can easily be seen by setting the toolbar\nto transparent."
- },
- {
- "name": "scroll-events",
- "description": "Because of performance reasons, ionScroll events are disabled by default, in order to enable them\nand start listening from (ionScroll), set this property to `true`."
- },
- {
- "name": "scroll-x",
- "description": "If you want to enable the content scrolling in the X axis, set this property to `true`."
- },
- {
- "name": "scroll-y",
- "description": "If you want to disable the content scrolling in the Y axis, set this property to `false`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/content/content.tsx"
- }
- ]
- },
- {
- "name": "ion-datetime",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "cancel-text",
- "description": "The text to display on the picker's cancel button."
- },
- {
- "name": "clear-text",
- "description": "The text to display on the picker's \"Clear\" button."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "day-values",
- "description": "Values used to create the list of selectable days. By default\nevery day is shown for the given month. However, to control exactly which days of\nthe month to display, the `dayValues` input can take a number, an array of numbers, or\na string of comma separated numbers. Note that even if the array days have an invalid\nnumber for the selected month, like `31` in February, it will correctly not show\ndays which are not valid for the selected month."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the datetime."
- },
- {
- "name": "done-text",
- "description": "The text to display on the picker's \"Done\" button."
- },
- {
- "name": "first-day-of-week",
- "description": "The first day of the week to use for `ion-datetime`. The\ndefault value is `0` and represents Sunday."
- },
- {
- "name": "hour-cycle",
- "description": "The hour cycle of the `ion-datetime`. If no value is set, this is\nspecified by the current locale.",
- "values": [
- {
- "name": "h11"
- },
- {
- "name": "h12"
- },
- {
- "name": "h23"
- },
- {
- "name": "h24"
- }
- ]
- },
- {
- "name": "hour-values",
- "description": "Values used to create the list of selectable hours. By default\nthe hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,\nto control exactly which hours to display, the `hourValues` input can take a number, an\narray of numbers, or a string of comma separated numbers."
- },
- {
- "name": "locale",
- "description": "The locale to use for `ion-datetime`. This\nimpacts month and day name formatting.\nThe `\"default\"` value refers to the default\nlocale set by your device."
- },
- {
- "name": "max",
- "description": "The maximum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\n`1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the maximum could just be the year, such as `1994`.\nDefaults to the end of this year."
- },
- {
- "name": "min",
- "description": "The minimum datetime allowed. Value must be a date string\nfollowing the\n[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),\nsuch as `1996-12-19`. The format does not have to be specific to an exact\ndatetime. For example, the minimum could just be the year, such as `1994`.\nDefaults to the beginning of the year, 100 years ago from today."
- },
- {
- "name": "minute-values",
- "description": "Values used to create the list of selectable minutes. By default\nthe minutes range from `0` to `59`. However, to control exactly which minutes to display,\nthe `minuteValues` input can take a number, an array of numbers, or a string of comma\nseparated numbers. For example, if the minute selections should only be every 15 minutes,\nthen this input value would be `minuteValues=\"0,15,30,45\"`."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "month-values",
- "description": "Values used to create the list of selectable months. By default\nthe month values range from `1` to `12`. However, to control exactly which months to\ndisplay, the `monthValues` input can take a number, an array of numbers, or a string of\ncomma separated numbers. For example, if only summer months should be shown, then this\ninput value would be `monthValues=\"6,7,8\"`. Note that month numbers do *not* have a\nzero-based index, meaning January's value is `1`, and December's is `12`."
- },
- {
- "name": "multiple",
- "description": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`."
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "prefer-wheel",
- "description": "If `true`, a wheel picker will be rendered instead of a calendar grid\nwhere possible. If `false`, a calendar grid will be rendered instead of\na wheel picker where possible.\n\nA wheel picker can be rendered instead of a grid when `presentation` is\none of the following values: `\"date\"`, `\"date-time\"`, or `\"time-date\"`.\n\nA wheel picker will always be rendered regardless of\nthe `preferWheel` value when `presentation` is one of the following values:\n`\"time\"`, `\"month\"`, `\"month-year\"`, or `\"year\"`."
- },
- {
- "name": "presentation",
- "description": "Which values you want to select. `\"date\"` will show\na calendar picker to select the month, day, and year. `\"time\"`\nwill show a time picker to select the hour, minute, and (optionally)\nAM/PM. `\"date-time\"` will show the date picker first and time picker second.\n`\"time-date\"` will show the time picker first and date picker second.",
- "values": [
- {
- "name": "date"
- },
- {
- "name": "date-time"
- },
- {
- "name": "month"
- },
- {
- "name": "month-year"
- },
- {
- "name": "time"
- },
- {
- "name": "time-date"
- },
- {
- "name": "year"
- }
- ]
- },
- {
- "name": "readonly",
- "description": "If `true`, the datetime appears normal but the selected date cannot be changed."
- },
- {
- "name": "show-clear-button",
- "description": "If `true`, a \"Clear\" button will be rendered alongside\nthe default \"Cancel\" and \"OK\" buttons at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered."
- },
- {
- "name": "show-default-buttons",
- "description": "If `true`, the default \"Cancel\" and \"OK\" buttons\nwill be rendered at the bottom of the `ion-datetime`\ncomponent. Developers can also use the `button` slot\nif they want to customize these buttons. If custom\nbuttons are set in the `button` slot then the\ndefault buttons will not be rendered."
- },
- {
- "name": "show-default-time-label",
- "description": "If `true`, the default \"Time\" label will be rendered\nfor the time selector of the `ion-datetime` component.\nDevelopers can also use the `time-label` slot\nif they want to customize this label. If a custom\nlabel is set in the `time-label` slot then the\ndefault label will not be rendered."
- },
- {
- "name": "show-default-title",
- "description": "If `true`, a header will be shown above the calendar\npicker. This will include both the slotted title, and\nthe selected date."
- },
- {
- "name": "size",
- "description": "If `cover`, the `ion-datetime` will expand to cover the full width of its container.\nIf `fixed`, the `ion-datetime` will have a fixed width.",
- "values": [
- {
- "name": "cover"
- },
- {
- "name": "fixed"
- }
- ]
- },
- {
- "name": "value",
- "description": "The value of the datetime as a valid ISO 8601 datetime string.\nThis should be an array of strings only when `multiple=\"true\"`."
- },
- {
- "name": "year-values",
- "description": "Values used to create the list of selectable years. By default\nthe year values range between the `min` and `max` datetime inputs. However, to\ncontrol exactly which years to display, the `yearValues` input can take a number, an array\nof numbers, or string of comma separated numbers. For example, to show upcoming and\nrecent leap years, then this input's value would be `yearValues=\"2008,2012,2016,2020,2024\"`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/datetime/datetime.tsx"
- }
- ]
- },
- {
- "name": "ion-datetime-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "datetime",
- "description": "The ID of the `ion-datetime` instance\nassociated with the datetime button."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the button."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/datetime-button/datetime-button.tsx"
- }
- ]
- },
- {
- "name": "ion-fab",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "activated",
- "description": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible."
- },
- {
- "name": "edge",
- "description": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot."
- },
- {
- "name": "horizontal",
- "description": "Where to align the fab horizontally in the viewport.",
- "values": [
- {
- "name": "center"
- },
- {
- "name": "end"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "vertical",
- "description": "Where to align the fab vertically in the viewport.",
- "values": [
- {
- "name": "bottom"
- },
- {
- "name": "center"
- },
- {
- "name": "top"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/fab/fab.tsx"
- }
- ]
- },
- {
- "name": "ion-fab-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "activated",
- "description": "If `true`, the fab button will be show a close icon."
- },
- {
- "name": "close-icon",
- "description": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the fab button."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "show",
- "description": "If `true`, the fab button will show when in a fab-list."
- },
- {
- "name": "size",
- "description": "The size of the button. Set this to `small` in order to have a mini fab button.",
- "values": [
- {
- "name": "small"
- }
- ]
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- },
- {
- "name": "translucent",
- "description": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/fab-button/fab-button.tsx"
- }
- ]
- },
- {
- "name": "ion-fab-list",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "activated",
- "description": "If `true`, the fab list will show all fab buttons in the list."
- },
- {
- "name": "side",
- "description": "The side the fab list will show on relative to the main fab button.",
- "values": [
- {
- "name": "bottom"
- },
- {
- "name": "end"
- },
- {
- "name": "start"
- },
- {
- "name": "top"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/fab-list/fab-list.tsx"
- }
- ]
- },
- {
- "name": "ion-footer",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "collapse",
- "description": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode.",
- "values": [
- {
- "name": "fade"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/footer/footer.tsx"
- }
- ]
- },
- {
- "name": "ion-grid",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "fixed",
- "description": "If `true`, the grid will have a fixed width based on the screen size."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/grid/grid.tsx"
- }
- ]
- },
- {
- "name": "ion-header",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "collapse",
- "description": "Describes the scroll effect that will be applied to the header.\nOnly applies in iOS mode.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)",
- "values": [
- {
- "name": "condense"
- },
- {
- "name": "fade"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the header, the `fullscreen`\nattribute needs to be set on the content."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/header/header.tsx"
- }
- ]
- },
- {
- "name": "ion-img",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "alt",
- "description": "This attribute defines the alternative text describing the image.\nUsers will see this text displayed if the image URL is wrong,\nthe image is not in one of the supported formats, or if the image is not yet downloaded."
- },
- {
- "name": "src",
- "description": "The image URL. This attribute is mandatory for the `<img>` element."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/img/img.tsx"
- }
- ]
- },
- {
- "name": "ion-infinite-scroll",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the infinite scroll will be hidden and scroll event listeners\nwill be removed.\n\nSet this to true to disable the infinite scroll from actively\ntrying to receive new data while scrolling. This is useful\nwhen it is known that there is no more data that can be added, and\nthe infinite scroll is no longer needed."
- },
- {
- "name": "position",
- "description": "The position of the infinite scroll element.\nThe value can be either `top` or `bottom`.",
- "values": [
- {
- "name": "bottom"
- },
- {
- "name": "top"
- }
- ]
- },
- {
- "name": "threshold",
- "description": "The threshold distance from the bottom\nof the content to call the `infinite` output event when scrolled.\nThe threshold value can be either a percent, or\nin pixels. For example, use the value of `10%` for the `infinite`\noutput event to get called when the user has scrolled 10%\nfrom the bottom of the page. Use the value `100px` when the\nscroll is within 100 pixels from the bottom of the page."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/infinite-scroll/infinite-scroll.tsx"
- }
- ]
- },
- {
- "name": "ion-infinite-scroll-content",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "loading-spinner",
- "description": "An animated SVG spinner that shows while loading.",
- "values": [
- {
- "name": "bubbles"
- },
- {
- "name": "circles"
- },
- {
- "name": "circular"
- },
- {
- "name": "crescent"
- },
- {
- "name": "dots"
- },
- {
- "name": "lines"
- },
- {
- "name": "lines-sharp"
- },
- {
- "name": "lines-sharp-small"
- },
- {
- "name": "lines-small"
- }
- ]
- },
- {
- "name": "loading-text",
- "description": "Optional text to display while loading.\n`loadingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx"
- }
- ]
- },
- {
- "name": "ion-input",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "autocapitalize",
- "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
- },
- {
- "name": "autocomplete",
- "description": "Indicates whether the value of the control can be automatically completed by the browser.",
- "values": [
- {
- "name": "name"
- },
- {
- "name": "email"
- },
- {
- "name": "tel"
- },
- {
- "name": "url"
- },
- {
- "name": "on"
- },
- {
- "name": "off"
- },
- {
- "name": "honorific-prefix"
- },
- {
- "name": "given-name"
- },
- {
- "name": "additional-name"
- },
- {
- "name": "family-name"
- },
- {
- "name": "honorific-suffix"
- },
- {
- "name": "nickname"
- },
- {
- "name": "username"
- },
- {
- "name": "new-password"
- },
- {
- "name": "current-password"
- },
- {
- "name": "one-time-code"
- },
- {
- "name": "organization-title"
- },
- {
- "name": "organization"
- },
- {
- "name": "street-address"
- },
- {
- "name": "address-line1"
- },
- {
- "name": "address-line2"
- },
- {
- "name": "address-line3"
- },
- {
- "name": "address-level4"
- },
- {
- "name": "address-level3"
- },
- {
- "name": "address-level2"
- },
- {
- "name": "address-level1"
- },
- {
- "name": "country"
- },
- {
- "name": "country-name"
- },
- {
- "name": "postal-code"
- },
- {
- "name": "cc-name"
- },
- {
- "name": "cc-given-name"
- },
- {
- "name": "cc-additional-name"
- },
- {
- "name": "cc-family-name"
- },
- {
- "name": "cc-number"
- },
- {
- "name": "cc-exp"
- },
- {
- "name": "cc-exp-month"
- },
- {
- "name": "cc-exp-year"
- },
- {
- "name": "cc-csc"
- },
- {
- "name": "cc-type"
- },
- {
- "name": "transaction-currency"
- },
- {
- "name": "transaction-amount"
- },
- {
- "name": "language"
- },
- {
- "name": "bday"
- },
- {
- "name": "bday-day"
- },
- {
- "name": "bday-month"
- },
- {
- "name": "bday-year"
- },
- {
- "name": "sex"
- },
- {
- "name": "tel-country-code"
- },
- {
- "name": "tel-national"
- },
- {
- "name": "tel-area-code"
- },
- {
- "name": "tel-local"
- },
- {
- "name": "tel-extension"
- },
- {
- "name": "impp"
- },
- {
- "name": "photo"
- }
- ]
- },
- {
- "name": "autocorrect",
- "description": "Whether auto correction should be enabled when the user is entering/editing the text value.",
- "values": [
- {
- "name": "off"
- },
- {
- "name": "on"
- }
- ]
- },
- {
- "name": "autofocus",
- "description": "Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n\nThis may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information."
- },
- {
- "name": "clear-input",
- "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input."
- },
- {
- "name": "clear-input-icon",
- "description": "The icon to use for the clear button. Only applies when `clearInput` is set to `true`."
- },
- {
- "name": "clear-on-edit",
- "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "counter",
- "description": "If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly."
- },
- {
- "name": "debounce",
- "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the input."
- },
- {
- "name": "enterkeyhint",
- "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
- "values": [
- {
- "name": "done"
- },
- {
- "name": "enter"
- },
- {
- "name": "go"
- },
- {
- "name": "next"
- },
- {
- "name": "previous"
- },
- {
- "name": "search"
- },
- {
- "name": "send"
- }
- ]
- },
- {
- "name": "error-text",
- "description": "Text that is placed under the input and displayed when an error is detected."
- },
- {
- "name": "fill",
- "description": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
- "values": [
- {
- "name": "outline"
- },
- {
- "name": "solid"
- }
- ]
- },
- {
- "name": "helper-text",
- "description": "Text that is placed under the input and displayed when no error is detected."
- },
- {
- "name": "inputmode",
- "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
- "values": [
- {
- "name": "decimal"
- },
- {
- "name": "email"
- },
- {
- "name": "none"
- },
- {
- "name": "numeric"
- },
- {
- "name": "search"
- },
- {
- "name": "tel"
- },
- {
- "name": "text"
- },
- {
- "name": "url"
- }
- ]
- },
- {
- "name": "label",
- "description": "The visible label associated with the input.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used."
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the input in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the input in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.\n`\"stacked\"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "floating"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "max",
- "description": "The maximum value, which must not be less than its minimum (min attribute) value."
- },
- {
- "name": "maxlength",
- "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
- },
- {
- "name": "min",
- "description": "The minimum value, which must not be greater than its maximum (max attribute) value."
- },
- {
- "name": "minlength",
- "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "multiple",
- "description": "If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"`, otherwise it is ignored."
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "pattern",
- "description": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information."
- },
- {
- "name": "placeholder",
- "description": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored."
- },
- {
- "name": "readonly",
- "description": "If `true`, the user cannot modify the value."
- },
- {
- "name": "required",
- "description": "If `true`, the user must fill in a value before submitting a form."
- },
- {
- "name": "shape",
- "description": "The shape of the input. If \"round\" it will have an increased border radius.",
- "values": [
- {
- "name": "round"
- }
- ]
- },
- {
- "name": "spellcheck",
- "description": "If `true`, the element will have its spelling and grammar checked."
- },
- {
- "name": "step",
- "description": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number."
- },
- {
- "name": "type",
- "description": "The type of control to display. The default type is text.",
- "values": [
- {
- "name": "date"
- },
- {
- "name": "datetime-local"
- },
- {
- "name": "email"
- },
- {
- "name": "month"
- },
- {
- "name": "number"
- },
- {
- "name": "password"
- },
- {
- "name": "search"
- },
- {
- "name": "tel"
- },
- {
- "name": "text"
- },
- {
- "name": "time"
- },
- {
- "name": "url"
- },
- {
- "name": "week"
- }
- ]
- },
- {
- "name": "value",
- "description": "The value of the input."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/input/input.tsx"
- }
- ]
- },
- {
- "name": "ion-input-password-toggle",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "hide-icon",
- "description": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "show-icon",
- "description": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/input-password-toggle/input-password-toggle.tsx"
- }
- ]
- },
- {
- "name": "ion-item",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "button",
- "description": "If `true`, a button tag will be rendered and the item will be tappable."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "detail",
- "description": "If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode`\nis `ios` and an `href` or `button` property is present."
- },
- {
- "name": "detail-icon",
- "description": "The icon to use when `detail` is set to `true`."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the item."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "lines",
- "description": "How the bottom border should be displayed on the item.",
- "values": [
- {
- "name": "full"
- },
- {
- "name": "inset"
- },
- {
- "name": "none"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- },
- {
- "name": "type",
- "description": "The type of the button. Only used when an `onclick` or `button` property is present.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item/item.tsx"
- }
- ]
- },
- {
- "name": "ion-item-divider",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "sticky",
- "description": "When it's set to `true`, the item-divider will stay visible when it reaches the top\nof the viewport until the next `ion-item-divider` replaces it.\n\nThis feature relies in `position:sticky`:\nhttps://caniuse.com/#feat=css-sticky"
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-divider/item-divider.tsx"
- }
- ]
- },
- {
- "name": "ion-item-group",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-group/item-group.tsx"
- }
- ]
- },
- {
- "name": "ion-item-option",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the item option."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "expandable",
- "description": "If `true`, the option will expand to take up the available width and cover any other options."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-option/item-option.tsx"
- }
- ]
- },
- {
- "name": "ion-item-options",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "side",
- "description": "The side the option button should be on. Possible values: `\"start\"` and `\"end\"`. If you have multiple `ion-item-options`, a side must be provided for each.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "start"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-options/item-options.tsx"
- }
- ]
- },
- {
- "name": "ion-item-sliding",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the sliding item."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/item-sliding/item-sliding.tsx"
- }
- ]
- },
- {
- "name": "ion-label",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "position",
- "description": "The position determines where and how the label behaves inside an item.",
- "values": [
- {
- "name": "fixed"
- },
- {
- "name": "floating"
- },
- {
- "name": "stacked"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/label/label.tsx"
- }
- ]
- },
- {
- "name": "ion-list",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "inset",
- "description": "If `true`, the list will have margin around it and rounded corners."
- },
- {
- "name": "lines",
- "description": "How the bottom border should be displayed on all items.",
- "values": [
- {
- "name": "full"
- },
- {
- "name": "inset"
- },
- {
- "name": "none"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/list/list.tsx"
- }
- ]
- },
- {
- "name": "ion-list-header",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "lines",
- "description": "How the bottom border should be displayed on the list header.",
- "values": [
- {
- "name": "full"
- },
- {
- "name": "inset"
- },
- {
- "name": "none"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/list-header/list-header.tsx"
- }
- ]
- },
- {
- "name": "ion-loading",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the loading indicator will animate."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the loading indicator will be dismissed when the backdrop is clicked."
- },
- {
- "name": "css-class",
- "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
- },
- {
- "name": "duration",
- "description": "Number of milliseconds to wait before dismissing the loading indicator."
- },
- {
- "name": "is-open",
- "description": "If `true`, the loading indicator will open. If `false`, the loading indicator will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the loadingController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe loading indicator dismisses. You will need to do that in your code."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "message",
- "description": "Optional text content to display in the loading indicator.\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "show-backdrop",
- "description": "If `true`, a backdrop will be displayed behind the loading indicator."
- },
- {
- "name": "spinner",
- "description": "The name of the spinner to display.",
- "values": [
- {
- "name": "bubbles"
- },
- {
- "name": "circles"
- },
- {
- "name": "circular"
- },
- {
- "name": "crescent"
- },
- {
- "name": "dots"
- },
- {
- "name": "lines"
- },
- {
- "name": "lines-sharp"
- },
- {
- "name": "lines-sharp-small"
- },
- {
- "name": "lines-small"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the loading indicator will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the loading indicator to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/loading/loading.tsx"
- }
- ]
- },
- {
- "name": "ion-menu",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "content-id",
- "description": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`."
- },
- {
- "name": "disabled",
- "description": "If `true`, the menu is disabled."
- },
- {
- "name": "max-edge-start",
- "description": "The edge threshold for dragging the menu open.\nIf a drag/swipe happens over this value, the menu is not triggered."
- },
- {
- "name": "menu-id",
- "description": "An id for the menu."
- },
- {
- "name": "side",
- "description": "Which side of the view the menu should be placed.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "swipe-gesture",
- "description": "If `true`, swiping the menu is enabled."
- },
- {
- "name": "type",
- "description": "The display type of the menu.\nAvailable options: `\"overlay\"`, `\"reveal\"`, `\"push\"`.",
- "values": [
- {
- "name": "overlay"
- },
- {
- "name": "push"
- },
- {
- "name": "reveal"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/menu/menu.tsx"
- }
- ]
- },
- {
- "name": "ion-menu-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "auto-hide",
- "description": "Automatically hides the menu button when the corresponding menu is not active"
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the menu button."
- },
- {
- "name": "menu",
- "description": "Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle"
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/menu-button/menu-button.tsx"
- }
- ]
- },
- {
- "name": "ion-menu-toggle",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "auto-hide",
- "description": "Automatically hides the content when the corresponding menu is not active.\n\nBy default, it's `true`. Change it to `false` in order to\nkeep `ion-menu-toggle` always visible regardless the state of the menu."
- },
- {
- "name": "menu",
- "description": "Optional property that maps to a Menu's `menuId` prop.\nCan also be `start` or `end` for the menu side.\nThis is used to find the correct menu to toggle.\n\nIf this property is not used, `ion-menu-toggle` will toggle the\nfirst menu that is active."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/menu-toggle/menu-toggle.tsx"
- }
- ]
- },
- {
- "name": "ion-modal",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the modal will animate."
- },
- {
- "name": "backdrop-breakpoint",
- "description": "A decimal value between 0 and 1 that indicates the\npoint after which the backdrop will begin to fade in\nwhen using a sheet modal. Prior to this point, the\nbackdrop will be hidden and the content underneath\nthe sheet can be interacted with. This value is exclusive\nmeaning the backdrop will become active after the value\nspecified."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the modal will be dismissed when the backdrop is clicked."
- },
- {
- "name": "can-dismiss",
- "description": "Determines whether or not a modal can dismiss\nwhen calling the `dismiss` method.\n\nIf the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.\nIf the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.\n\nSee https://ionicframework.com/docs/troubleshooting/runtime#accessing-this\nif you need to access `this` from within the callback."
- },
- {
- "name": "expand-to-scroll",
- "description": "Controls whether scrolling or dragging within the sheet modal expands\nit to a larger breakpoint. This only takes effect when `breakpoints`\nand `initialBreakpoint` are set.\n\nIf `true`, scrolling or dragging anywhere in the modal will first expand\nit to the next breakpoint. Once fully expanded, scrolling will affect the\ncontent.\nIf `false`, scrolling will always affect the content. The modal will\nonly expand when dragging the header or handle. The modal will close when\ndragging the header or handle. It can also be closed when dragging the\ncontent, but only if the content is scrolled to the top."
- },
- {
- "name": "focus-trap",
- "description": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
- },
- {
- "name": "handle",
- "description": "The horizontal line that displays at the top of a sheet modal. It is `true` by default when\nsetting the `breakpoints` and `initialBreakpoint` properties."
- },
- {
- "name": "handle-behavior",
- "description": "The interaction behavior for the sheet modal when the handle is pressed.\n\nDefaults to `\"none\"`, which means the modal will not change size or position when the handle is pressed.\nSet to `\"cycle\"` to let the modal cycle between available breakpoints when pressed.\n\nHandle behavior is unavailable when the `handle` property is set to `false` or\nwhen the `breakpoints` property is not set (using a fullscreen or card modal).",
- "values": [
- {
- "name": "cycle"
- },
- {
- "name": "none"
- }
- ]
- },
- {
- "name": "initial-breakpoint",
- "description": "A decimal value between 0 and 1 that indicates the\ninitial point the modal will open at when creating a\nsheet modal. This value must also be listed in the\n`breakpoints` array."
- },
- {
- "name": "is-open",
- "description": "If `true`, the modal will open. If `false`, the modal will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the modalController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe modal dismisses. You will need to do that in your code."
- },
- {
- "name": "keep-contents-mounted",
- "description": "If `true`, the component passed into `ion-modal` will\nautomatically be mounted when the modal is created. The\ncomponent will remain mounted even when the modal is dismissed.\nHowever, the component will be destroyed when the modal is\ndestroyed. This property is not reactive and should only be\nused when initially creating a modal.\n\nNote: This feature only applies to inline modals in JavaScript\nframeworks such as Angular, React, and Vue."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "show-backdrop",
- "description": "If `true`, a backdrop will be displayed behind the modal.\nThis property controls whether or not the backdrop\ndarkens the screen when the modal is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the modal to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/modal/modal.tsx"
- }
- ]
- },
- {
- "name": "ion-nav",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the nav should animate the transition of components."
- },
- {
- "name": "root",
- "description": "Root NavComponent to load"
- },
- {
- "name": "swipe-gesture",
- "description": "If the nav component should allow for swipe-to-go-back."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/nav/nav.tsx"
- }
- ]
- },
- {
- "name": "ion-nav-link",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "component",
- "description": "Component to navigate to. Only used if the `routerDirection` is `\"forward\"` or `\"root\"`."
- },
- {
- "name": "router-direction",
- "description": "The transition direction when navigating to another page.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/nav-link/nav-link.tsx"
- }
- ]
- },
- {
- "name": "ion-note",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/note/note.tsx"
- }
- ]
- },
- {
- "name": "ion-picker",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/picker/picker.tsx"
- }
- ]
- },
- {
- "name": "ion-picker-column",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the picker."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "value",
- "description": "The selected option in the picker."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/picker-column/picker-column.tsx"
- }
- ]
- },
- {
- "name": "ion-picker-column-option",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the picker column option."
- },
- {
- "name": "value",
- "description": "The text value of the option."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/picker-column-option/picker-column-option.tsx"
- }
- ]
- },
- {
- "name": "ion-picker-legacy",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the picker will animate."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the picker will be dismissed when the backdrop is clicked."
- },
- {
- "name": "css-class",
- "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
- },
- {
- "name": "duration",
- "description": "Number of milliseconds to wait before dismissing the picker."
- },
- {
- "name": "is-open",
- "description": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "show-backdrop",
- "description": "If `true`, a backdrop will be displayed behind the picker."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/picker-legacy/picker.tsx"
- }
- ]
- },
- {
- "name": "ion-popover",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "alignment",
- "description": "Describes how to align the popover content with the `reference` point.\nDefaults to `\"center\"` for `ios` mode, and `\"start\"` for `md` mode.",
- "values": [
- {
- "name": "center"
- },
- {
- "name": "end"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "animated",
- "description": "If `true`, the popover will animate."
- },
- {
- "name": "arrow",
- "description": "If `true`, the popover will display an arrow that points at the\n`reference` when running in `ios` mode. Does not apply in `md` mode."
- },
- {
- "name": "backdrop-dismiss",
- "description": "If `true`, the popover will be dismissed when the backdrop is clicked."
- },
- {
- "name": "component",
- "description": "The component to display inside of the popover.\nYou only need to use this if you are not using\na JavaScript framework. Otherwise, you can just\nslot your component inside of `ion-popover`."
- },
- {
- "name": "dismiss-on-select",
- "description": "If `true`, the popover will be automatically\ndismissed when the content has been clicked."
- },
- {
- "name": "event",
- "description": "The event to pass to the popover animation."
- },
- {
- "name": "focus-trap",
- "description": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
- },
- {
- "name": "is-open",
- "description": "If `true`, the popover will open. If `false`, the popover will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the popoverController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe popover dismisses. You will need to do that in your code."
- },
- {
- "name": "keep-contents-mounted",
- "description": "If `true`, the component passed into `ion-popover` will\nautomatically be mounted when the popover is created. The\ncomponent will remain mounted even when the popover is dismissed.\nHowever, the component will be destroyed when the popover is\ndestroyed. This property is not reactive and should only be\nused when initially creating a popover.\n\nNote: This feature only applies to inline popovers in JavaScript\nframeworks such as Angular, React, and Vue."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "reference",
- "description": "Describes what to position the popover relative to.\nIf `\"trigger\"`, the popover will be positioned relative\nto the trigger button. If passing in an event, this is\ndetermined via event.target.\nIf `\"event\"`, the popover will be positioned relative\nto the x/y coordinates of the trigger action. If passing\nin an event, this is determined via event.clientX and event.clientY.",
- "values": [
- {
- "name": "event"
- },
- {
- "name": "trigger"
- }
- ]
- },
- {
- "name": "show-backdrop",
- "description": "If `true`, a backdrop will be displayed behind the popover.\nThis property controls whether or not the backdrop\ndarkens the screen when the popover is presented.\nIt does not control whether or not the backdrop\nis active or present in the DOM."
- },
- {
- "name": "side",
- "description": "Describes which side of the `reference` point to position\nthe popover on. The `\"start\"` and `\"end\"` values are RTL-aware,\nand the `\"left\"` and `\"right\"` values are not.",
- "values": [
- {
- "name": "bottom"
- },
- {
- "name": "end"
- },
- {
- "name": "left"
- },
- {
- "name": "right"
- },
- {
- "name": "start"
- },
- {
- "name": "top"
- }
- ]
- },
- {
- "name": "size",
- "description": "Describes how to calculate the popover width.\nIf `\"cover\"`, the popover width will match the width of the trigger.\nIf `\"auto\"`, the popover width will be set to a static default value.",
- "values": [
- {
- "name": "auto"
- },
- {
- "name": "cover"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the popover will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the popover to open. Use the `trigger-action`\nproperty to customize the interaction that results in\nthe popover opening."
- },
- {
- "name": "trigger-action",
- "description": "Describes what kind of interaction with the trigger that\nshould cause the popover to open. Does not apply when the `trigger`\nproperty is `undefined`.\nIf `\"click\"`, the popover will be presented when the trigger is left clicked.\nIf `\"hover\"`, the popover will be presented when a pointer hovers over the trigger.\nIf `\"context-menu\"`, the popover will be presented when the trigger is right\nclicked on desktop and long pressed on mobile. This will also prevent your\ndevice's normal context menu from appearing.",
- "values": [
- {
- "name": "click"
- },
- {
- "name": "context-menu"
- },
- {
- "name": "hover"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/popover/popover.tsx"
- }
- ]
- },
- {
- "name": "ion-progress-bar",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "buffer",
- "description": "If the buffer and value are smaller than 1, the buffer circles will show.\nThe buffer should be between [0, 1]."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "reversed",
- "description": "If true, reverse the progress bar direction."
- },
- {
- "name": "type",
- "description": "The state of the progress bar, based on if the time the process takes is known or not.\nDefault options are: `\"determinate\"` (no animation), `\"indeterminate\"` (animate from left to right).",
- "values": [
- {
- "name": "determinate"
- },
- {
- "name": "indeterminate"
- }
- ]
- },
- {
- "name": "value",
- "description": "The value determines how much of the active bar should display when the\n`type` is `\"determinate\"`.\nThe value should be between [0, 1]."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/progress-bar/progress-bar.tsx"
- }
- ]
- },
- {
- "name": "ion-radio",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "alignment",
- "description": "How to control the alignment of the radio and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the radio `display` to `block`.",
- "values": [
- {
- "name": "center"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the radio."
- },
- {
- "name": "justify",
- "description": "How to pack the label and radio within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the radio `display` to `block`.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "space-between"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the radio.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "value",
- "description": "the value of the radio."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/radio/radio.tsx"
- }
- ]
- },
- {
- "name": "ion-radio-group",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "allow-empty-selection",
- "description": "If `true`, the radios can be deselected."
- },
- {
- "name": "compare-with",
- "description": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-radio-group. When not specified, the default behavior will use strict\nequality (===) for comparison."
- },
- {
- "name": "error-text",
- "description": "The error text to display at the top of the radio group."
- },
- {
- "name": "helper-text",
- "description": "The helper text to display at the top of the radio group."
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "value",
- "description": "the value of the radio group."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/radio-group/radio-group.tsx"
- }
- ]
- },
- {
- "name": "ion-range",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "active-bar-start",
- "description": "The start position of the range active bar. This feature is only available with a single knob (dualKnobs=\"false\").\nValid values are greater than or equal to the min value and less than or equal to the max value."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "debounce",
- "description": "How long, in milliseconds, to wait to trigger the\n`ionInput` event after each change in the range value."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the range."
- },
- {
- "name": "dual-knobs",
- "description": "Show two knobs."
- },
- {
- "name": "label",
- "description": "The text to display as the control's label. Use this over the `label` slot if\nyou only need plain text. The `label` property will take priority over the\n`label` slot if both are used."
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the range.\n`\"start\"`: The label will appear to the left of the range in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the range in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the range regardless of the direction.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "max",
- "description": "Maximum integer value of the range."
- },
- {
- "name": "min",
- "description": "Minimum integer value of the range."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "pin",
- "description": "If `true`, a pin with integer value is shown when the knob\nis pressed."
- },
- {
- "name": "snaps",
- "description": "If `true`, the knob snaps to tick marks evenly spaced based\non the step property value."
- },
- {
- "name": "step",
- "description": "Specifies the value granularity."
- },
- {
- "name": "ticks",
- "description": "If `true`, tick marks are displayed based on the step value.\nOnly applies when `snaps` is `true`."
- },
- {
- "name": "value",
- "description": "the value of the range."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/range/range.tsx"
- }
- ]
- },
- {
- "name": "ion-refresher",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "close-duration",
- "description": "Time it takes to close the refresher.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
- },
- {
- "name": "disabled",
- "description": "If `true`, the refresher will be hidden."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "pull-factor",
- "description": "How much to multiply the pull speed by. To slow the pull animation down,\npass a number less than `1`. To speed up the pull, pass a number greater\nthan `1`. The default value is `1` which is equal to the speed of the cursor.\nIf a negative value is passed in, the factor will be `1` instead.\n\nFor example: If the value passed is `1.2` and the content is dragged by\n`10` pixels, instead of `10` pixels the content will be pulled by `12` pixels\n(an increase of 20 percent). If the value passed is `0.8`, the dragged amount\nwill be `8` pixels, less than the amount the cursor has moved.\n\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
- },
- {
- "name": "pull-max",
- "description": "The maximum distance of the pull until the refresher\nwill automatically go into the `refreshing` state.\nDefaults to the result of `pullMin + 60`.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
- },
- {
- "name": "pull-min",
- "description": "The minimum distance the user must pull down until the\nrefresher will go into the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
- },
- {
- "name": "snapback-duration",
- "description": "Time it takes the refresher to snap back to the `refreshing` state.\nDoes not apply when the refresher content uses a spinner,\nenabling the native refresher."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/refresher/refresher.tsx"
- }
- ]
- },
- {
- "name": "ion-refresher-content",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "pulling-icon",
- "description": "A static icon or a spinner to display when you begin to pull down.\nA spinner name can be provided to gradually show tick marks\nwhen pulling down on iOS devices."
- },
- {
- "name": "pulling-text",
- "description": "The text you want to display when you begin to pull down.\n`pullingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- },
- {
- "name": "refreshing-spinner",
- "description": "An animated SVG spinner that shows when refreshing begins",
- "values": [
- {
- "name": "bubbles"
- },
- {
- "name": "circles"
- },
- {
- "name": "circular"
- },
- {
- "name": "crescent"
- },
- {
- "name": "dots"
- },
- {
- "name": "lines"
- },
- {
- "name": "lines-sharp"
- },
- {
- "name": "lines-sharp-small"
- },
- {
- "name": "lines-small"
- }
- ]
- },
- {
- "name": "refreshing-text",
- "description": "The text you want to display when performing a refresh.\n`refreshingText` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/refresher-content/refresher-content.tsx"
- }
- ]
- },
- {
- "name": "ion-reorder",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/reorder/reorder.tsx"
- }
- ]
- },
- {
- "name": "ion-reorder-group",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the reorder will be hidden."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/reorder-group/reorder-group.tsx"
- }
- ]
- },
- {
- "name": "ion-ripple-effect",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "type",
- "description": "Sets the type of ripple-effect:\n\n- `bounded`: the ripple effect expands from the user's click position\n- `unbounded`: the ripple effect expands from the center of the button and overflows the container.\n\nNOTE: Surfaces for bounded ripples should have the overflow property set to hidden,\nwhile surfaces for unbounded ripples should have it set to visible.",
- "values": [
- {
- "name": "bounded"
- },
- {
- "name": "unbounded"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/ripple-effect/ripple-effect.tsx"
- }
- ]
- },
- {
- "name": "ion-route",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "component",
- "description": "Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`)\nwhen the route matches.\n\nThe value of this property is not always the tagname of the component to load,\nin `ion-tabs` it actually refers to the name of the `ion-tab` to select."
- },
- {
- "name": "url",
- "description": "Relative path that needs to match in order for this route to apply.\n\nAccepts paths similar to expressjs so that you can define parameters\nin the url /foo/:bar where bar would be available in incoming props."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/route/route.tsx"
- }
- ]
- },
- {
- "name": "ion-route-redirect",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "from",
- "description": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"from\" URL.\nIt needs to be an exact match of the navigated URL in order to apply.\n\nThe path specified in this value is always an absolute path, even if the initial `/` slash\nis not specified."
- },
- {
- "name": "to",
- "description": "A redirect route, redirects \"from\" a URL \"to\" another URL. This property is that \"to\" URL.\nWhen the defined `ion-route-redirect` rule matches, the router will redirect to the path\nspecified in this property.\n\nThe value of this property is always an absolute path inside the scope of routes defined in\n`ion-router` it can't be used with another router or to perform a redirection to a different domain.\n\nNote that this is a virtual redirect, it will not cause a real browser refresh, again, it's\na redirect inside the context of ion-router.\n\nWhen this property is not specified or his value is `undefined` the whole redirect route is noop,\neven if the \"from\" value matches."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/route-redirect/route-redirect.tsx"
- }
- ]
- },
- {
- "name": "ion-router",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "root",
- "description": "The root path to use when matching URLs. By default, this is set to \"/\", but you can specify\nan alternate prefix for all URL paths."
- },
- {
- "name": "use-hash",
- "description": "The router can work in two \"modes\":\n- With hash: `/index.html#/path/to/page`\n- Without hash: `/path/to/page`\n\nUsing one or another might depend in the requirements of your app and/or where it's deployed.\n\nUsually \"hash-less\" navigation works better for SEO and it's more user friendly too, but it might\nrequires additional server-side configuration in order to properly work.\n\nOn the other side hash-navigation is much easier to deploy, it even works over the file protocol.\n\nBy default, this property is `true`, change to `false` to allow hash-less URLs."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/router/router.tsx"
- }
- ]
- },
- {
- "name": "ion-router-link",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "router-direction",
- "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
- "values": [
- {
- "name": "back"
- },
- {
- "name": "forward"
- },
- {
- "name": "root"
- }
- ]
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/router-link/router-link.tsx"
- }
- ]
- },
- {
- "name": "ion-router-outlet",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the router-outlet should animate the transition of components."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/router-outlet/router-outlet.tsx"
- }
- ]
- },
- {
- "name": "ion-row",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/row/row.tsx"
- }
- ]
- },
- {
- "name": "ion-searchbar",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, enable searchbar animation."
- },
- {
- "name": "autocapitalize",
- "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
- },
- {
- "name": "autocomplete",
- "description": "Set the input's autocomplete property.",
- "values": [
- {
- "name": "name"
- },
- {
- "name": "email"
- },
- {
- "name": "tel"
- },
- {
- "name": "url"
- },
- {
- "name": "on"
- },
- {
- "name": "off"
- },
- {
- "name": "honorific-prefix"
- },
- {
- "name": "given-name"
- },
- {
- "name": "additional-name"
- },
- {
- "name": "family-name"
- },
- {
- "name": "honorific-suffix"
- },
- {
- "name": "nickname"
- },
- {
- "name": "username"
- },
- {
- "name": "new-password"
- },
- {
- "name": "current-password"
- },
- {
- "name": "one-time-code"
- },
- {
- "name": "organization-title"
- },
- {
- "name": "organization"
- },
- {
- "name": "street-address"
- },
- {
- "name": "address-line1"
- },
- {
- "name": "address-line2"
- },
- {
- "name": "address-line3"
- },
- {
- "name": "address-level4"
- },
- {
- "name": "address-level3"
- },
- {
- "name": "address-level2"
- },
- {
- "name": "address-level1"
- },
- {
- "name": "country"
- },
- {
- "name": "country-name"
- },
- {
- "name": "postal-code"
- },
- {
- "name": "cc-name"
- },
- {
- "name": "cc-given-name"
- },
- {
- "name": "cc-additional-name"
- },
- {
- "name": "cc-family-name"
- },
- {
- "name": "cc-number"
- },
- {
- "name": "cc-exp"
- },
- {
- "name": "cc-exp-month"
- },
- {
- "name": "cc-exp-year"
- },
- {
- "name": "cc-csc"
- },
- {
- "name": "cc-type"
- },
- {
- "name": "transaction-currency"
- },
- {
- "name": "transaction-amount"
- },
- {
- "name": "language"
- },
- {
- "name": "bday"
- },
- {
- "name": "bday-day"
- },
- {
- "name": "bday-month"
- },
- {
- "name": "bday-year"
- },
- {
- "name": "sex"
- },
- {
- "name": "tel-country-code"
- },
- {
- "name": "tel-national"
- },
- {
- "name": "tel-area-code"
- },
- {
- "name": "tel-local"
- },
- {
- "name": "tel-extension"
- },
- {
- "name": "impp"
- },
- {
- "name": "photo"
- }
- ]
- },
- {
- "name": "autocorrect",
- "description": "Set the input's autocorrect property.",
- "values": [
- {
- "name": "off"
- },
- {
- "name": "on"
- }
- ]
- },
- {
- "name": "cancel-button-icon",
- "description": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `arrow-back-sharp`."
- },
- {
- "name": "cancel-button-text",
- "description": "Set the the cancel button text. Only applies to `ios` mode."
- },
- {
- "name": "clear-icon",
- "description": "Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "debounce",
- "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the input."
- },
- {
- "name": "enterkeyhint",
- "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
- "values": [
- {
- "name": "done"
- },
- {
- "name": "enter"
- },
- {
- "name": "go"
- },
- {
- "name": "next"
- },
- {
- "name": "previous"
- },
- {
- "name": "search"
- },
- {
- "name": "send"
- }
- ]
- },
- {
- "name": "inputmode",
- "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
- "values": [
- {
- "name": "decimal"
- },
- {
- "name": "email"
- },
- {
- "name": "none"
- },
- {
- "name": "numeric"
- },
- {
- "name": "search"
- },
- {
- "name": "tel"
- },
- {
- "name": "text"
- },
- {
- "name": "url"
- }
- ]
- },
- {
- "name": "maxlength",
- "description": "This attribute specifies the maximum number of characters that the user can enter."
- },
- {
- "name": "minlength",
- "description": "This attribute specifies the minimum number of characters that the user can enter."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "If used in a form, set the name of the control, which is submitted with the form data."
- },
- {
- "name": "placeholder",
- "description": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`<Ionic>`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)"
- },
- {
- "name": "search-icon",
- "description": "The icon to use as the search icon. Defaults to `search-outline` in\n`ios` mode and `search-sharp` in `md` mode."
- },
- {
- "name": "show-cancel-button",
- "description": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.",
- "values": [
- {
- "name": "always"
- },
- {
- "name": "focus"
- },
- {
- "name": "never"
- }
- ]
- },
- {
- "name": "show-clear-button",
- "description": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.",
- "values": [
- {
- "name": "always"
- },
- {
- "name": "focus"
- },
- {
- "name": "never"
- }
- ]
- },
- {
- "name": "spellcheck",
- "description": "If `true`, enable spellcheck on the input."
- },
- {
- "name": "type",
- "description": "Set the type of the input.",
- "values": [
- {
- "name": "email"
- },
- {
- "name": "number"
- },
- {
- "name": "password"
- },
- {
- "name": "search"
- },
- {
- "name": "tel"
- },
- {
- "name": "text"
- },
- {
- "name": "url"
- }
- ]
- },
- {
- "name": "value",
- "description": "the value of the searchbar."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/searchbar/searchbar.tsx"
- }
- ]
- },
- {
- "name": "ion-segment",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the segment."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "scrollable",
- "description": "If `true`, the segment buttons will overflow and the user can swipe to see them.\nIn addition, this will disable the gesture to drag the indicator between the buttons\nin order to swipe to see hidden buttons."
- },
- {
- "name": "select-on-focus",
- "description": "If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element.\nIf `false`, keyboard navigation will only focus the `ion-segment-button` element."
- },
- {
- "name": "swipe-gesture",
- "description": "If `true`, users will be able to swipe between segment buttons to activate them."
- },
- {
- "name": "value",
- "description": "the value of the segment."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/segment/segment.tsx"
- }
- ]
- },
- {
- "name": "ion-segment-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "content-id",
- "description": "The `id` of the segment content."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the segment button."
- },
- {
- "name": "layout",
- "description": "Set the layout of the text and icon in the segment.",
- "values": [
- {
- "name": "icon-bottom"
- },
- {
- "name": "icon-end"
- },
- {
- "name": "icon-hide"
- },
- {
- "name": "icon-start"
- },
- {
- "name": "icon-top"
- },
- {
- "name": "label-hide"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "type",
- "description": "The type of the button.",
- "values": [
- {
- "name": "button"
- },
- {
- "name": "reset"
- },
- {
- "name": "submit"
- }
- ]
- },
- {
- "name": "value",
- "description": "The value of the segment button."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/segment-button/segment-button.tsx"
- }
- ]
- },
- {
- "name": "ion-segment-content",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/segment-content/segment-content.tsx"
- }
- ]
- },
- {
- "name": "ion-segment-view",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the segment view cannot be interacted with."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/segment-view/segment-view.tsx"
- }
- ]
- },
- {
- "name": "ion-select",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "cancel-text",
- "description": "The text to display on the cancel button."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).\n\nThis property is only available when using the modern select syntax.",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "compare-with",
- "description": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-select. When not specified, the default behavior will use strict\nequality (===) for comparison."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the select."
- },
- {
- "name": "error-text",
- "description": "Text that is placed under the select and displayed when an error is detected."
- },
- {
- "name": "expanded-icon",
- "description": "The toggle icon to show when the select is open. If defined, the icon\nrotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`\nwill be used for when the select is both open and closed."
- },
- {
- "name": "fill",
- "description": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
- "values": [
- {
- "name": "outline"
- },
- {
- "name": "solid"
- }
- ]
- },
- {
- "name": "helper-text",
- "description": "Text that is placed under the select and displayed when no error is detected."
- },
- {
- "name": "interface",
- "description": "The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.",
- "values": [
- {
- "name": "action-sheet"
- },
- {
- "name": "alert"
- },
- {
- "name": "modal"
- },
- {
- "name": "popover"
- }
- ]
- },
- {
- "name": "interface-options",
- "description": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet), the\n[ion-popover docs](./popover), and the [ion-modal docs](./modal) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
- },
- {
- "name": "justify",
- "description": "How to pack the label and select within a line.\n`justify` does not apply when the label and select\nare on different lines when `labelPlacement` is set to\n`\"floating\"` or `\"stacked\"`.\n`\"start\"`: The label and select will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and select will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and select will appear on opposite\nends of the line with space between the two elements.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "space-between"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "label",
- "description": "The visible label associated with the select.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used."
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the select.\n`\"start\"`: The label will appear to the left of the select in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the select in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select.\n`\"stacked\"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\nWhen using `\"floating\"` or `\"stacked\"` we recommend initializing the select with either a `value` or a `placeholder`.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "floating"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "multiple",
- "description": "If `true`, the select can accept multiple values."
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "ok-text",
- "description": "The text to display on the ok button."
- },
- {
- "name": "placeholder",
- "description": "The text to display when the select is empty."
- },
- {
- "name": "required",
- "description": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
- },
- {
- "name": "selected-text",
- "description": "The text to display instead of the selected option's value."
- },
- {
- "name": "shape",
- "description": "The shape of the select. If \"round\" it will have an increased border radius.",
- "values": [
- {
- "name": "round"
- }
- ]
- },
- {
- "name": "toggle-icon",
- "description": "The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,\nor `caretDownSharp` for `md` mode."
- },
- {
- "name": "value",
- "description": "The value of the select."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/select/select.tsx"
- }
- ]
- },
- {
- "name": "ion-select-modal",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "header",
- "description": ""
- },
- {
- "name": "multiple",
- "description": ""
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/select-modal/select-modal.tsx"
- }
- ]
- },
- {
- "name": "ion-select-option",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons."
- },
- {
- "name": "value",
- "description": "The text value of the option."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/select-option/select-option.tsx"
- }
- ]
- },
- {
- "name": "ion-skeleton-text",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the skeleton text will animate."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/skeleton-text/skeleton-text.tsx"
- }
- ]
- },
- {
- "name": "ion-spinner",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "duration",
- "description": "Duration of the spinner animation in milliseconds. The default varies based on the spinner."
- },
- {
- "name": "name",
- "description": "The name of the SVG spinner to use. If a name is not provided, the platform's default\nspinner will be used.",
- "values": [
- {
- "name": "bubbles"
- },
- {
- "name": "circles"
- },
- {
- "name": "circular"
- },
- {
- "name": "crescent"
- },
- {
- "name": "dots"
- },
- {
- "name": "lines"
- },
- {
- "name": "lines-sharp"
- },
- {
- "name": "lines-sharp-small"
- },
- {
- "name": "lines-small"
- }
- ]
- },
- {
- "name": "paused",
- "description": "If `true`, the spinner's animation will be paused."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/spinner/spinner.tsx"
- }
- ]
- },
- {
- "name": "ion-split-pane",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "content-id",
- "description": "The `id` of the main content. When using\na router this is typically `ion-router-outlet`.\nWhen not using a router, this is typically\nyour main view's `ion-content`. This is not the\nid of the `ion-content` inside of your `ion-menu`."
- },
- {
- "name": "disabled",
- "description": "If `true`, the split pane will be hidden."
- },
- {
- "name": "when",
- "description": "When the split-pane should be shown.\nCan be a CSS media query expression, or a shortcut expression.\nCan also be a boolean expression."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/split-pane/split-pane.tsx"
- }
- ]
- },
- {
- "name": "ion-tab",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "component",
- "description": "The component to display inside of the tab."
- },
- {
- "name": "tab",
- "description": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/tab/tab.tsx"
- }
- ]
- },
- {
- "name": "ion-tab-bar",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "selected-tab",
- "description": "The selected tab component"
- },
- {
- "name": "translucent",
- "description": "If `true`, the tab bar will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/tab-bar/tab-bar.tsx"
- }
- ]
- },
- {
- "name": "ion-tab-button",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the tab button."
- },
- {
- "name": "download",
- "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
- },
- {
- "name": "href",
- "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
- },
- {
- "name": "layout",
- "description": "Set the layout of the text and icon in the tab bar.\nIt defaults to `\"icon-top\"`.",
- "values": [
- {
- "name": "icon-bottom"
- },
- {
- "name": "icon-end"
- },
- {
- "name": "icon-hide"
- },
- {
- "name": "icon-start"
- },
- {
- "name": "icon-top"
- },
- {
- "name": "label-hide"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "rel",
- "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
- },
- {
- "name": "selected",
- "description": "The selected tab component"
- },
- {
- "name": "tab",
- "description": "A tab id must be provided for each `ion-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
- },
- {
- "name": "target",
- "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/tab-button/tab-button.tsx"
- }
- ]
- },
- {
- "name": "ion-tabs",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/tabs/tabs.tsx"
- }
- ]
- },
- {
- "name": "ion-text",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/text/text.tsx"
- }
- ]
- },
- {
- "name": "ion-textarea",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "auto-grow",
- "description": "If `true`, the textarea container will grow and shrink based\non the contents of the textarea."
- },
- {
- "name": "autocapitalize",
- "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
- },
- {
- "name": "autofocus",
- "description": "Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n\nThis may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information."
- },
- {
- "name": "clear-on-edit",
- "description": "If `true`, the value will be cleared after focus upon edit."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "cols",
- "description": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
- },
- {
- "name": "counter",
- "description": "If `true`, a character counter will display the ratio of characters used and the total character limit.\nDevelopers must also set the `maxlength` property for the counter to be calculated correctly."
- },
- {
- "name": "debounce",
- "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke."
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the textarea."
- },
- {
- "name": "enterkeyhint",
- "description": "A hint to the browser for which enter key to display.\nPossible values: `\"enter\"`, `\"done\"`, `\"go\"`, `\"next\"`,\n`\"previous\"`, `\"search\"`, and `\"send\"`.",
- "values": [
- {
- "name": "done"
- },
- {
- "name": "enter"
- },
- {
- "name": "go"
- },
- {
- "name": "next"
- },
- {
- "name": "previous"
- },
- {
- "name": "search"
- },
- {
- "name": "send"
- }
- ]
- },
- {
- "name": "error-text",
- "description": "Text that is placed under the textarea and displayed when an error is detected."
- },
- {
- "name": "fill",
- "description": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
- "values": [
- {
- "name": "outline"
- },
- {
- "name": "solid"
- }
- ]
- },
- {
- "name": "helper-text",
- "description": "Text that is placed under the textarea and displayed when no error is detected."
- },
- {
- "name": "inputmode",
- "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
- "values": [
- {
- "name": "decimal"
- },
- {
- "name": "email"
- },
- {
- "name": "none"
- },
- {
- "name": "numeric"
- },
- {
- "name": "search"
- },
- {
- "name": "tel"
- },
- {
- "name": "text"
- },
- {
- "name": "url"
- }
- ]
- },
- {
- "name": "label",
- "description": "The visible label associated with the textarea.\n\nUse this if you need to render a plaintext label.\n\nThe `label` property will take priority over the `label` slot if both are used."
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the textarea.\n`\"start\"`: The label will appear to the left of the textarea in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the textarea in LTR and to the left in RTL.\n`\"floating\"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea.\n`\"stacked\"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "floating"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "maxlength",
- "description": "This attribute specifies the maximum number of characters that the user can enter."
- },
- {
- "name": "minlength",
- "description": "This attribute specifies the minimum number of characters that the user can enter."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "placeholder",
- "description": "Instructional text that shows before the input has a value."
- },
- {
- "name": "readonly",
- "description": "If `true`, the user cannot modify the value."
- },
- {
- "name": "required",
- "description": "If `true`, the user must fill in a value before submitting a form."
- },
- {
- "name": "rows",
- "description": "The number of visible text lines for the control."
- },
- {
- "name": "shape",
- "description": "The shape of the textarea. If \"round\" it will have an increased border radius.",
- "values": [
- {
- "name": "round"
- }
- ]
- },
- {
- "name": "spellcheck",
- "description": "If `true`, the element will have its spelling and grammar checked."
- },
- {
- "name": "value",
- "description": "The value of the textarea."
- },
- {
- "name": "wrap",
- "description": "Indicates how the control wraps text.",
- "values": [
- {
- "name": "hard"
- },
- {
- "name": "off"
- },
- {
- "name": "soft"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/textarea/textarea.tsx"
- }
- ]
- },
- {
- "name": "ion-thumbnail",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/thumbnail/thumbnail.tsx"
- }
- ]
- },
- {
- "name": "ion-title",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "size",
- "description": "The size of the toolbar title.",
- "values": [
- {
- "name": "large"
- },
- {
- "name": "small"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/title/title.tsx"
- }
- ]
- },
- {
- "name": "ion-toast",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "animated",
- "description": "If `true`, the toast will animate."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "css-class",
- "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
- },
- {
- "name": "duration",
- "description": "How many milliseconds to wait before hiding the toast. By default, it will show\nuntil `dismiss()` is called."
- },
- {
- "name": "header",
- "description": "Header to be shown in the toast."
- },
- {
- "name": "icon",
- "description": "The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.\nhttps://ionic.io/ionicons"
- },
- {
- "name": "is-open",
- "description": "If `true`, the toast will open. If `false`, the toast will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the toastController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe toast dismisses. You will need to do that in your code."
- },
- {
- "name": "keyboard-close",
- "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
- },
- {
- "name": "layout",
- "description": "Defines how the message and buttons are laid out in the toast.\n'baseline': The message and the buttons will appear on the same line.\nMessage text may wrap within the message container.\n'stacked': The buttons containers and message will stack on top\nof each other. Use this if you have long text in your buttons.",
- "values": [
- {
- "name": "baseline"
- },
- {
- "name": "stacked"
- }
- ]
- },
- {
- "name": "message",
- "description": "Message to be shown in the toast.\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "position",
- "description": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property.",
- "values": [
- {
- "name": "bottom"
- },
- {
- "name": "middle"
- },
- {
- "name": "top"
- }
- ]
- },
- {
- "name": "position-anchor",
- "description": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
- },
- {
- "name": "swipe-gesture",
- "description": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss.",
- "values": [
- {
- "name": "vertical"
- }
- ]
- },
- {
- "name": "translucent",
- "description": "If `true`, the toast will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
- },
- {
- "name": "trigger",
- "description": "An ID corresponding to the trigger element that\ncauses the toast to open when clicked."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/toast/toast.tsx"
- }
- ]
- },
- {
- "name": "ion-toggle",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "alignment",
- "description": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the toggle `display` to `block`.",
- "values": [
- {
- "name": "center"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "checked",
- "description": "If `true`, the toggle is selected."
- },
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "disabled",
- "description": "If `true`, the user cannot interact with the toggle."
- },
- {
- "name": "enable-on-off-labels",
- "description": "Enables the on/off accessibility switch labels within the toggle."
- },
- {
- "name": "error-text",
- "description": "Text that is placed under the toggle label and displayed when an error is detected."
- },
- {
- "name": "helper-text",
- "description": "Text that is placed under the toggle label and displayed when no error is detected."
- },
- {
- "name": "justify",
- "description": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the toggle `display` to `block`.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "space-between"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "label-placement",
- "description": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
- "values": [
- {
- "name": "end"
- },
- {
- "name": "fixed"
- },
- {
- "name": "stacked"
- },
- {
- "name": "start"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- },
- {
- "name": "name",
- "description": "The name of the control, which is submitted with the form data."
- },
- {
- "name": "required",
- "description": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
- },
- {
- "name": "value",
- "description": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`."
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/toggle/toggle.tsx"
- }
- ]
- },
- {
- "name": "ion-toolbar",
- "description": {
- "kind": "markdown",
- "value": ""
- },
- "attributes": [
- {
- "name": "color",
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
- "values": [
- {
- "name": "danger"
- },
- {
- "name": "dark"
- },
- {
- "name": "light"
- },
- {
- "name": "medium"
- },
- {
- "name": "primary"
- },
- {
- "name": "secondary"
- },
- {
- "name": "success"
- },
- {
- "name": "tertiary"
- },
- {
- "name": "warning"
- }
- ]
- },
- {
- "name": "mode",
- "description": "The mode determines which platform styles to use.",
- "values": [
- {
- "name": "ios"
- },
- {
- "name": "md"
- }
- ]
- }
- ],
- "references": [
- {
- "name": "Source code",
- "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/toolbar/toolbar.tsx"
- }
- ]
- }
- ]
- }
|